Modal Background Image

[gunesinan]

Hi,

For my product pages, I want to create a review section where there will be thumbnail size pictures and which will become full screen when clicked. The source of the images will be an ACF field that is nested in looper.

To do so, it looks using the Modal element looks like a right choice (If you think there is a better option, please let me know and discard what’s written below.)

When I use the Modal element and use the ACF field as a source, the image always stays behind the backdrop color. I cannot bring the image element to the top, so the backdrop color does not act like a backdrop color or background layer.

If I do not use the ACF field as the image souce, however, I do not have this issue.

Like I said above, I do not have to use the Modal element. If there is a better way to achieve what I want to achieve (such as the review images on Amazon), I highly appreciate your guidance.

Thanks!

[ruenel]

Hello Gunes,

Thanks for writing in!

Yes, the use of the Modal element is the only since you want that there will be a thumbnail size picture and will become full screen when clicked. It may not be currently working because of your element set up. You need to use the Modal > Toggle to display the thumbnail image and then when the Modal Content displays, you can display a bigger image size. If you already have set this up but it is not working for you, please provide with us your login credentials and the page URL so that we can double check it. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[gunesinan]

Hi @ruenel,

Thanks for the response. I solved the above mentioned problem, but I have another issue that I couldnt solve in the last 4-5 days. You can find the details in the secure note, but it looks like with a looper provider/consumer, we can pull multiple ACF text fields (using dynamic contents) but can only pull one ACF image field. Is this the case?

You will see that I have a Modal element that is supposed to pull two ACF image fields, but the looper provider/consumer is pulling only one of them. Is this how looper provider/consumer works?

Thanks in advance for your help.

Gunes

[ruenel]

Hello Gunes,

Please insert a separate Div element and use this as Looper Provider. You can then insert another element as your Looper Consumer. For example, use the “Review Content Row” as your Looper Provider while making the “Review Content Column” as your Looper Consumer.

I can see that you are using Nested Repeaters, have you check out this tutorial videos?

• https://www.youtube.com/watch?v=7w7nD6W9tlk
• https://www.youtube.com/watch?v=BFJdDM078VI
• https://www.youtube.com/watch?v=ncnXpRW4G_M

Kindly let us know how it goes.

[gunesinan]

Hello @ruenel

Yes, I am using a nested repeater and it is working as expected if I am not using a Modal element as a consumer. There is 100% a problem with your Modal element, or it works differently than a div or other elements. Here is the problem: If there are child elements under a Modal, those child elements consume the last ACF field data/item of the data array. Let’s say I have an ACF text field, and this is data array: aaa, bbb, ccc.
If this text element “is not” the child of a Modal, I get the right values: aaa, bbb, ccc. If I drag and drop this text element inside a Modal, however, I get the last item of the array: ccc, ccc, ccc. I watched all the videos and tried everything but I couldn’t find the reason why the child elements of a Modal are not consuming the looping data correctly. I gave this example for a text element, but the same is happening for an image element as well. Thanks.

[ruenel]

Hello Gunes,

I was able to investigate the issue and as it turns out, you are not using the looper:field as your second looper provider. The correct way should be:

First Loop: {{dc:acf:post_field field="reviews"}}
2nd Loop: {{dc:looper:field key="review_content"}}

Kindly check out my example in the layout added in the secure note below.

Thanks.

[gunesinan]

@ruenel,

You are awesome! I still did not understand how you made it but it is working.

Thank you so much!

[ruenel]

Hello Gunes,

You do not have to use {{dc:ACF:post_field field="review_content"}} in your second Looper Provider because this is already a part of the first post field settings.

You are most welcome. I am glad I was able to resolve your issue.

Cheers.

[gunesinan]

Thanks for the extra explanation. I understand we use {{dc:ACF:post_field field="..."}}only on top level fields, and only once in a nested repeater. My mistake was using it on all repeater that have sub fields.

Thank you so much for the great support!

[tristup]

Hi Gunes,

Glad that we are able to help you.

Thanks