Can I use custom image size for the zoomed image?

Hi,

you can specify which image to use for the zoom window by adding the data-zoom-image attribute to the <img> element.

For example, for the following image:

<img src="https://example.com/wp-content/uploads/2017/10/luxurious-body-oils-Botanic-Body-Oil-1-768x1024.jpg" class="zoooom" alt="" srcset="https://example.com/wp-content/uploads/2017/10/luxurious-body-oils-Botanic-Body-Oil-1.jpg 768w, https://example.com/wp-content/uploads/2017/10/luxurious-body-oils-Botanic-Body-Oil-1-225x300.jpg 225w, https://example.com/wp-content/uploads/2017/10/luxurious-body-oils-Botanic-Body-Oil-1-500x667.jpg 500w, https://example.com/wp-content/uploads/2017/10/luxurious-body-oils-Botanic-Body-Oil-1-512x682.jpg 512w, https://example.com/wp-content/uploads/2017/10/luxurious-body-oils-Botanic-Body-Oil-1-450x600.jpg 450w" sizes="(max-width: 768px) 100vw, 768px" />

you can add the data-zoom-image attribute to the 600x450px image as follows:

<img src="https://example.com/wp-content/uploads/2017/10/luxurious-body-oils-Botanic-Body-Oil-1-768x1024.jpg" class="zoooom" alt="" srcset="https://example.com/wp-content/uploads/2017/10/luxurious-body-oils-Botanic-Body-Oil-1.jpg 768w, https://example.com/wp-content/uploads/2017/10/luxurious-body-oils-Botanic-Body-Oil-1-225x300.jpg 225w, https://example.com/wp-content/uploads/2017/10/luxurious-body-oils-Botanic-Body-Oil-1-500x667.jpg 500w, https://example.com/wp-content/uploads/2017/10/luxurious-body-oils-Botanic-Body-Oil-1-512x682.jpg 512w, https://example.com/wp-content/uploads/2017/10/luxurious-body-oils-Botanic-Body-Oil-1-450x600.jpg 450w" sizes="(max-width: 768px) 100vw, 768px" data-zoom-image="https://example.com/wp-content/uploads/2017/11/luxurious-body-oils-Botanic-Body-Oil-1-600x450.jpg" />

(note the data-zoom-image="https://example.com/wp-content/uploads/2017/11/luxurious-body-oils-Botanic-Body-Oil-1-600x450.jpg" at the end).

• This reply was modified 7 years, 4 months ago by SilkyPress.

Hi,

you can specify which image to use in the zoom window by using the data-zoom-image attribute to the <img> element.

For example, for the following image:

<img src="https://example.com/image1.jpg" class="zoooom" alt="" />

you can add the data-zoom-image attribute to the 600x450px image as follows:

<img src="https://example.com/image1.jpg" class="zoooom" alt="" data-zoom-image="https://example.com/image1-600x450.jpg" />

This will force the zoom to use the 600×450 thumbnail for the zoom window.

Hi – I’ve been playing around with this and am finding it difficult to get to work, I am using ACF to pull in a image field and using this code, just to pull in the zoooom class –

<?php
$image = get_sub_field(‘product_image’);
$size = ‘full’; // (thumbnail, medium, large, full or custom size)
if( $image ) {
echo wp_get_attachment_image( $image, $size, ”, array( “class” => “zoooom” ) );
}
?>

But don’t know how to add the data-zoom-image as you have done?
If you can help I’d be super grateful!
Chris

ps – changed this to not resolved so hopefully you can see it and assist. thanks in advance for any advice you can give.

Yes, indeed I was about to overlook the message with the ACF.

I’ll get back to you in a couple of hours, hopefully with a solution.

That’s really kind thankyou Diana.

You’re using the get_sub_field() function added by the Repeater Field addon, which is only commercially available. So, I cannot test what does the get_sub_field() function return.

The get_field() function returns an array of data, including the ID and the URL, so I’ll assume the get_sub_field() does the same.

You need to add the data-zoom-image as follows:

echo wp_get_attachment_image( $image_id, 'full', '', array( 'class' => 'zoooom', 'data-zoom-image' => $zoom_window_image_url ) );

where $image_id is the ID of the presented image and the $zoom_window_image_url is the URL of the ‘custom-thumb-3’ thumbnail;

With the get_field() function you can get the $image_id and the $zoom_window_image_url as follows:

$image = get_field('product_image');
$image_id = $image['id'];
$zoom_window_image_url = $image['sizes']['custom-thumb-3'];

but you need to see if the get_sub_field() function returns the data the same way.

To summarize, you can try the following:

$image = get_sub_field('product_image');
$image_id = $image['id'];
$zoom_window_image_url = $image['sizes']['custom-thumb-3'];
echo wp_get_attachment_image( $image_id, 'full', '', array( 'class' => 'zoooom', 'data-zoom-image' => $zoom_window_image_url ) );

Thanks for the code – have tried it out as both this: –

		<?php 
			$image = get_sub_field('product_image');
			$image_id = $image['id'];
			$zoom_window_image_url = $image['sizes']['full'];
			if( $image ) {
				echo wp_get_attachment_image( $image_id, 'full', '', array( 'class' => 'zoooom', 'data-zoom-image' => $zoom_window_image_url ) );
			}
		?>

and as this

		<?php 
			$image = get_sub_field('product_image');
			$image_id = $image['id'];
			$zoom_window_image_url = $image['sizes']['full'];
				echo wp_get_attachment_image( $image_id, 'full', '', array( 'class' => 'zoooom', 'data-zoom-image' => $zoom_window_image_url ) );
		?>

But in both cases the rendered code is totally blank ?? Expect there is an issue with the get sub field.

Not to worry – I may just resign to using the full size image as the zoom as that may be the only option for me. Thanks again for your help.

Are you having the WP_DEBUG constant set to true in the wp-config.php? You should set it to true when developing.

If the rendered code is blank, that means there is an error and it isn’t output because by default WordPress suppresses the errors and warnings.

Diana – thanks again, I need to look further into this and for now feel it is only fair to mark this as resolved – you have been more than generous with your suggestions & support.
Chris