Using ACF gallery as provider - choosing image size

[spedney]

I know I am being slow here, but I’m playing with ACF galleries…
I have set my provider as dynamic content / ACF post field / my_gallery_field
{{dc:acf:post_field field="my_gallery_field"}}

Consumer is set to an image with source as dynamic content / looper field / key = “id”
I wasn’t sure what to put here, so I tried “url” which worked and then “id” which also worked.
This works fine and my gallery is displayed, but here’s the question(s):

1. Am I doing this right?
2. How can I select a particular image size to use such as “medium” etc?

[alexander]

Nice getting a gallery working! That’s awesome. So you’re definitely not doing anything wrong, but this isn’t a case we’ve tested specifically yet so I can’t quite advise if there’s a better way. I made a comment over here about some looper internals that might be handy to know: Beta 4.2: Return the array from the gallery field

The way our elements resolve the thumbnail size is by having it specified in a string after the thumbnail ID. For example: 1234:medium will resolve the image with an attachment ID of 1234 at the medium cropped size.

One of these might be what you need:

{{dc:looper:field key="id"}}:medium

{{dc:looper:item}}:medium

[alexander]

@spedney I played around with Gallery fields a bit more and here’s some more info that will help.

1. If you have the return format of the Gallery field set to ID you can access it in Dynamic Content as {{dc:looper:item}}

2. If you have the return value set to Image Array, you can access all the attachment data via Dynamic Content

Try adding this inside the consumer to get an idea of what data is available:

{{dc:looper:debug_consumer}}

Using dot notation you can access nested fields. This will allow you to directly retrieve image URLs for specific thumbnail sizes. This could be handy if you’re doing something custom where the resulting value isn’t going into an element’s image field.

{{dc:looper:field key="sizes.medium"}}

[Misho]

I got the gallery looper working as well. Nice!

Provider: Row, {{dc:acf:post_field field="gallery"}}
Consumer: Column
Image source: Looper / Current Item
Return format: Image ID.

I must say I didn’t understand how to call a specific image size from the explanation above, but the Gallery field allows selecting it in ACF. Though, it would be great if we could manipulate this in the looper. That would allow hiding a gallery with full images on mobile and show one with smaller images.

I also got the Lightbox working by setting the image URL to Current item.

However, what about the Alt text? I haven’t been able to find any custom key to place into its field. In case it is left empty, it displays “Image”.

Thanks!

[alexander]

Sure! Let me try explaining better. Try this:

• Set your Gallery field return format to “Image Array”. This will allow you to retrieve all the attachment meta data WordPress makes available on the image.
• Add a Dynamic Content Looper provider set to {{dc:acf:post_field field="gallery"}}
• Use {{dc:looper:field key="alt"}} to access alt text
• Use {{dc:looper:field key="sizes.medium"}} to get the medium thumbnail
• Inside your consumer, add a text element with this content: {{dc:looper:debug_consumer}}. This will let you see all the data you have available. Then the corresponding key can be used with the syntax above (alt text, thumbnail, etc.) to get other bits of information.

[BuzzStory]

Hi @Misho,

I‘m currently searching for a acf Gallery solution with loghtbox and tried a couple of things. I got the Gallery output working but Lightbox is not working correctly for me. Would you mind sharing how you achieved a functional loghtbox?

Cheers,
Patrik

[Misho]

Hi @BuzzStory, my favorite Lightbox (Until Themeco comes up with the new native one) is
WP Featherlight. Or a variation of it, WP Featherlight Disabled which I use more often.

Just install it and that’s it. (Galleries need to have images set to link to the image URL).

[BuzzStory]

Thanks for the reply @Misho! I‘ll give it a go!

[alexander]

Looks like a great alternative!

[mcostales84]

On this use case, using dynamic content, by just activating the wp featherlight disabled plugin the lightbox is not working. I have the image link activated and pointing to the image url but still no luck. What am I missing?

[Misho]

@mcostales84, this plugin is a “disabled” version of Feathelight, which means you need to enable it on the per-page basis. That might be the reason.

[mcostales84]

Thank buddy. I installed the not disabled version, since I want to use it actually in all the pages, and now is working.
Now I have another question, not actually related to this but…
I’m using the grid element to display all the images of my gallery, but the lightbox is just for the image I clicked on, I can go the the next photo. Do you have an idea of how I can make that work?

[Misho]

CSS Grid? I haven’t tested it with galleries and this lighbox. Perhaps if you use the native Lightbox shortcode and assign the same class to all images, it should work.

[spedney]

I’ve used it within a grid today and it worked ok. Just gave a class to my image in my grid cell and make sure the image has a link to the full size url. Then added a [lightbox selector=“a.myclass”] right after my provider loop. Just using the standard Themeco lightbox for now.

[alexander]

@spedney very cool! glad to hear you got that working.

[Maratopia_Digital]

Not sure this is on the same topic but a bit similar.

So I’ve been able to set a {{dc:looper:field key="modified"}} looper item and its displaying correctly as its shown on the debug.consumer. Here is how it looks below:

But I’m now trying to get the modified date to be displayed in a more compact way of just Month and Year, so I’ve tried using this dynamic content field {{dc:looper:field key="modified" format="F j, Y"}} but it not giving me the formatted result:

This might not be a bug or problem and its just me not knowing code enough to get it working haha. But would be really amazing to be able to format these looper fields in the arrays, which gives so much useful info.

Would also be interesting to know if I can change the format of the {{dc:looper:field key="filesize"}}to only show in MB.

[spedney]

Is this helpful / relevant?

ACF Repeater Date condition

Hi @BuzzStory, Can you try adding a text element with both dynamic content tags you’re using? Something like: {{dc:looper:field key=“tao_date” type=“date” format=“YmdHi”}}<br/> {{dc:global:date format=“YmdHi”}} Maybe seeing the exact output inline will provide a clue to why they’re not comparing properly. Thanks! @deranaloge I’m sorry we don’t have an extensive reference on the subject. There’s an introductory article here: https://theme.co/docs/dynamic-content Let me know if you have any qu…

[Maratopia_Digital]

Thanks @spedney, I must have been searching for the wrong topic and not seen this thread.

I’ll just continue on that thread then since it is more in line with my issue. Thanks mate.

[spedney]

Hope you find a fix I wasn’t complaining that your post wasn’t relevant or helpful. Should have said “maybe this will help” - sometimes I forget how to say things in English

[alexander]

@Maratopia_Digital, it’s covered more in depth on the thread Steve linked but the main thing to note is that you need type="date" as well. This will tell Dynamic Content to apply a date format. It will use the WordPress default date format if you don’t pass your own.

Regarding the filesize formatting, regretfully there isn’t a way to do this without custom coding.