Hide if custom field is empty

[marketfresh]

Here’s the situation.

I have created a custom post type using CPT UI and ACF PRO.

I’m using a Global Block with Dynamic Content in a template to display the content entered into the Custom Post Type’s Custom Fields.

The content on each of these pages is basically 3 rows with a block of text and an image in each row.

The issue is that some pages only have enough content to fill 2 of the rows, and when there is no image added for the 3rd row it shows the broken image icon on the front end.

Is there a way to hide the image ( or text block, row, container, etc) if no content is entered for them.

Thanks!

[rad]

Hi Jonathan,

Thanks for reaching out.

It’s only possible with PHP coding which not possible within the builder. Like from this one https://www.advancedcustomfields.com/resources/hiding-empty-fields/ but you must add it to your custom post type template.

Or you can try this one https://stackoverflow.com/questions/22051573/how-to-hide-image-broken-icon-using-only-css-html and implement the javascript code in Theme Options > JS. But it’s not our code so we can’t guarantee it will work.

Hope this helps.

[marketfresh]

The css solution is working but not 100% for safari: https://concordia2.wpengine.com/project/ashe-cultural-arts-center/
You can still see an outline around the broken image area and I can’t get rid of it.

A great feature would be a checkbox in the dynamic content area that says “hide when empty” or something like that.

Thanks.

[ruenel]

Hello Jonathan,

To get your issue resolved, kindly remove your custom css and custom JS script that you have added first.
And then, you can utilize this code instead:

(function($){
    $('.x-image img[src=""]').hide();
})(jQuery);

We would love to know if this has worked for you. Thank you.

[marketfresh]

Brilliant! Works perfectly! Thank you @RueNel!

[friech]

Glad we could help,

Cheers!