Change HTML based on ACF Data

I want to set the background layer of a grid cell to be either a video or an image based on an ACF radio selector. I have it set up now that in ACF you can select image or video and then you get a field to input an image or a video URL. I also have it setup where the background of a cell can accept either of those items, but what I cannot figure out is how to change the html code inside of that cell background field to be one or the other based on that radio selection.

I tried duplicating cells and conditionally hiding the other, but it seems that the looper still sees the hidden cell so the correct data is not going to the correct cells.

Hello @ZEBRADOG,

Thanks for writing to us.

In order to help you with your concerns we need to check your settings I would request you, please share the admin login details meanwhile I would suggest you troubleshoot a few of the common issues before we investigate your settings. Please share your details in a secure note. Please provide the following details

  • WordPress Login URL
  • Admin-level username and password
  • Exact page URL

You can find the Secure Note button at the bottom of your posts

Thanks

Hello, I dont think that you would need the login to answer this functionality question? I cannot give login details to a live site.

Hi @ZEBRADOG,

If I am not wrong, you want to decide the background option image or video based on the selection of the ACF radio selector. That is not possible to set any condition to the background at this moment, but you can try by adding two different grid cells with image and video backgrounds and setting the condition to those cells based on the ACF data.

Hope it helps.
Thanks

Ok thanks, that works in some cases, but will quickly become overly complicated if there are more than 1-2. Can you please add this to a feature request?

Hi @ZEBRADOG,

I will surely check that with our development team and if possible will add this as a feature request.

Thanks

Thanks, this is how I was able to “work around” the issue for now. I set a custom background and used this code.

<img class="galleryimage" src="{{dc:looper:field key="image"}}" onerror="this.style.display='none'"/>

<video height="100%" width="100%" autoplay loop muted><source src="{{dc:looper:field key="video"}}"onerror="this.style.display='none'"/>

No problem, @ZEBRADOG.
We are also glad that you were able to create a workaround for your issue.

Cheers.

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