Using ACF gallery as provider - choosing image size

Beta
#5

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.
1 Like
#6

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

#7

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).

#8

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

#9

Looks like a great alternative!

#10

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?

#11

@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.

#12

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?

#13

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.

#14

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.

1 Like
#15

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

#16

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:

Screenshot 2021-03-16 at 08.37.04
Screenshot 2021-03-16 at 08.37.042198×416 25.4 KB

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:

Screenshot 2021-03-16 at 08.33.26
Screenshot 2021-03-16 at 08.33.261110×652 48 KB

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.

#18

Is this helpful / relevant?

#19

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.

#20

Hope you find a fix :slight_smile: 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 :crazy_face:

#21

@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.

#22

Hi theme.co, I found this post when I was looking for more info for outputting an image array from an ACF field.

The {{dc:looper:debug_consumer}} Function is so helpful that I wonder why this is not included in the official documentation. Or better yet, this should already be available in the builder as a button!

Please mark as feature request!!!

@regnalf

#23

Hi @Regnalf,

Glad to hear it helps! We’ve actually not documented it intentionally - it’s more of a hidden thing since it’s so ugly and will likely be replaced by something else. The problem with this approach is it requires putting something in your page content. We’d really like to bring that data introspection into the builder itself somehow. We’re just not sure how to approach it from a UI perspective yet. Ideally, you’d be able to click on something when working with Loopers and see the current data without effecting the elements in the live preview.

#24

What about putting it into the dev console - inspector while viewing an element?

#25

That might be where it ends up if we don’t land on anything that is more inline with the observer/outlines.