just wondering if I can get the cropped image and also the original of cropped image. Using ACF to build a slider that images are in light box !

 <div class="slide">
    <a href="<?php echo image1_full-sized-image ?>" class="mfp-image">
        <img src="<?php echo image1_cropped-image?>"/>
    </a>
</div>

• My goal is to cropped images and show them in slider but use the original images in light box !

Thanks,

just wondering if I can get the cropped image and also the original of cropped image. Using ACF to build a slider that images are in light box !

 <div class="slide">
    <a href="<?php echo image1_full-sized-image ?>" class="mfp-image">
        <img src="<?php echo image1_cropped-image?>"/>
    </a>
</div>

• My goal is to cropped images and show them in slider but use the original images in light box !

Thanks,

• php
• jquery

Share Improve this question asked Aug 27, 2019 at 11:50 GMedijaGMedija 311 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Yes, it is possible to get original image and a smaller version of it. Use wp_get_attachment_url($id) to get the full url and wp_get_attachment_image_src($id,$size) for the smaller version.

EDIT: You can get the name of the original uncropped (full) image from the attachments post_meta. Then replace the cropped file name with the original name in the full url. If there's more direct way to do this, I'm all ears.

For example like this,

$image_id = 0; // get this from the saved ACF data
$full_image = wp_get_attachment_url( $image_id );
$thumbnail = wp_get_attachment_image_src( $image_id, 'thumbnail' ); // or some other valid image size

// get original file name and replace cropped name with it
$backup_full = get_post_meta( $image_id, '_wp_attachment_backup_sizes', true );
if ( ! empty( $backup_full['full-orig']['file'] ) ) {
    $full_path = explode( '/', $full_image );
    $full_image = str_replace( end( $full_path ), $backup_full['full-orig']['file'], $full_image );
}

if ( $full_image && is_array( $thumbnail ) ) {
  printf(
    '<div class="slide">
        <a href="%s" class="mfp-image">
            <img src="%s"/>
        </a>
    </div>',
    esc_url( $full_image ),
    esc_url( $thumbnail[0] )
  );
}