ACF Image not showing in Pro Button

[FoundationDesign]

Hi, I’m using a Global Block in Pro to create a Portfolio layout. Part of the information for the Portfolio layout is an optional (not all portfolios will have this) is a Thumbnail link to a PDF. Please see the example here - https://staging2.rdw.co.nz/portfolio-item/five-mile-queenstown-stage-2/

In the Global Block, I have used a button and set the Link URL using an ACF Field {{dc:acf:field field=“pdf_case_study”}} which works and opens this link https://staging2.rdw.co.nz/wp-content/uploads/2020/04/Case-Study-5-Mile-2016.pdf

Also in the Global Block button and set the Primary Graphic Link using this ACF Field {{dc:acf:field field=“pdf_case_study_thumb”}}, but the button doesn’t show the ACF image.

I’ve also created a text image to see if that would work with the ACF link, but is doesn’t other either.

Can you please suggest how I can make the image show or another option for my Thumbnail link to the PDF case study.

Thank you.

[ruenel]

Hello Paul,

Thanks for posting in! The image is not displaying because the return format of the option field is an array. You must set it to “Image URL” instead.

You will have to edit your field and change the Return Format for the output display of the option.

Hope this makes sense.

[FoundationDesign]

Hi @ruenel. Thank you, yes that did make sense and I’ve got it to work. Although it has exposed a failure in my solution, in that not all of my portfolio’s will have a case study. I thought that not having a thumbnail image or a link would not show, but of course… the button is still present.

I don’t suppose that you have a trick suggestion on how to hide an element (the button) if there is no data assigned to it?

[ruenel]

Hello Paul,

If that is the case, then a custom CSS with the CSS selector that if the image source contains a value with the image file, it will display as block and if there is no value or other value than the image display it will display as none to hide the element.
Check out the CSS class selector here: https://www.w3schools.com/cssref/css_selectors.asp

Hope this makes sense. Thanks.

[FoundationDesign]

Hi @ruenel. Again thank you for your help, but I am struggling this time.

I’ve come up with this to hide the button unless there is an input, but it doesn’t seem to be working.

.e1769-16.x-anchor {
input: invalid { display: none; };
}

But like I said, I have no idea what I’m doing here. Suggestions, please.

[ruenel]

Hello Paul,

Your code is incorrect. It should only be like this:

.class:invalid { 
  // your styling
}

In your case, you will need to hide all the images and then only show it when the image has a correct image file in jpg format. For example:

.the-button-element img { 
  display: none;
}

.the-button-element img[src$=".jpg"] { 
  display: block;
}

I am just assuming that I added a the-button-element class in my button element. You should be able to modify this according to your element structure and class.

Be advised that custom coding is beyond the scope of our support. The code above will not work out of the box and has been given as an example to get you started with your modifications.

Best Regards.

[FoundationDesign]

@ruenel. I DID IT! I worked it out. Thank you so much for your guidance. I’m starting to understand it now. Thank you!

[ruenel]

You’re welcome Paul!
We’re glad we were able to help you out.