Looper Consumer image sizes to thumbnail through array return format

Support
#1

Hi,

I’ve got an ACF Repeater field called ‘colours’.

Within this repeater are 2 custom fields. 1 is ‘colour_name’ and the other is ‘colour_image’.

I can use a dynamic content provider to return the images back to me when using
<img src='{{dc:looper:field key="colour_image"}}' >

However, I need to set the image size to be thumbnail that gets returned (150x150px).

I’ve read that it can be done by setting the image acf return format to ‘array’ instead of ‘image url’, but I can’t get it to return the proper image in the size that I want.

This is the page, and the thumbnails I want to use this on are just above the enquire button: https://www.matthewv13.sg-host.com/product/classic-fleecy/
Currently using image url as the return format as that’s the only way I can get it to work.

Please let me know how I can get these images returned at thumbnail size.

Cheers,
David

#2

Hello David,

Thanks for writing in!

The dynamic content that you used will display the actual image size. If you want to select the thumbnail size, you will have to use this dynamic content instead:

<img src='{{dc:looper:field key="colour_image"  size="thumbnail"}}' >

Kindly let us know how it goes.

#3

Hi,

That doesn’t seem to work.

Please see this video with specifics about the issue I am facing: https://www.loom.com/share/72186a2ad43d4152a97becebae05410e

I need those thumbnail images being pulled through at thumbnail size. Ideally through an image element, but if I have to use a text element I can.

Cheers,
David

#4

Hello David,

Instead of using a manual <img...> code, use the Image element instead and then do the steps as stated here:

If this does not help, please provide us access to your site.

Cheers.

#5

Hi, I’ve attached a secure note with login details.

Instead of using the functions.php snippet, I thought this functionality was already available in Pro Theme?

I’ve been told I can access the image array using dot notation to output the image at a specific size (thumbnail).

Note that the Layout that this applies to is the ‘Product Single - NEW 2’ Layout.
https://www.matthewv13.sg-host.com/product/classic-fleecy/

I’ve already changed the custom field image output to ‘array’, hence why the large image on the left is now broken.

Please let me know what the steps are for me to get the images displaying in thumbnail size successfully.

Cheers,
David

#6

Hi, any progress on this? I’ve managed to get the image displaying from an array in a standard custom post field, but I’m not able to do it through a Repeater Custom Field.

Please let me know if you have any luck.

Cheers,
David

#7

Change your provider to “JSON” and use the following in the JSON text editor.
{{dc:acf:post_field field="colours" type='json'}}

I think the problem is that ACF is not returning an array of arrays, but an array of class objects so Dot notation is not working. When converted to JSON first, from there you can use dot notation like the following.

<img src='{{dc:looper:field key="colour_image.url"}}' id="myimage">

I saved the changes since this looked like a staging setup. Let us know if you have any other questions!

1 Like
#8

Hi Charlie, thank you so much for this! It works perfectly after I changed the consumer image field key to {{dc:looper:field key=“colour_image.sizes.thumbnail”}}

I don’t know why or how it works with JSON, but I’m grateful nonetheless :smiley:

Cheers,
David

#9

No problem, David.
We’re so happy this worked out.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.