Home › Forums › General Issues › get_field() — noob problems with Brizy
I’m having problems with Brizy as it is not possible to hide placeholder images when a custom field has no entry (no image uploaded). I’ve learned that it’s possible to return the value of a specific field via get_field() … And as the placeholder image can have a css class I’m wondering if it’s somehow also possible to hide that placeholder image e.g. with javascript when no image is being uploaded?
Any idea or help would be really appreciated!
TeeGee
Hi @teegee
If the placeholder can have a class, then perhaps look to use jQuery:
$(".class").show();
$(".class").hide();
Hi @jarvis
thanks a lot for your answer!
Following the manual on this page: https://www.advancedcustomfields.com/resources/hiding-empty-fields/
The code I am supposed to use is something like this:
`<?php if( get_field(‘field_name’) ): ?>
<?php endif; ?>
Sorry for being stupid — but how can I combine it with the your code?
Thank you!
If you can setup a field, then you can do something like:
<?php $image = get_field('image');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
You would need to change the field name from image to whatever you need.
Or you could do something like:
<?php $image = get_field('image');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php else: ?>
<img src="url-to-placeholder" class="placeholder-class" ?>
<?php endif; ?>
That way you don’t need the jQuery, as it checks if an image exists/been added if not, uses a fall back to a placeholder image
Hi @jarvis!
Thanks a ton!
One (hopefully last) question: what should I write when I want to have that certain field (class maybe is “image_field”) empty instead of heaving a placeholder? Something like $display = "none";
?
Thank you!
If I’ve understood, use:
<?php $image = get_field('image');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
Basically, if no image is added, nothing will be displayed.
Hi @jarvis!
Thank you very much — and sorry for not really understanding it …
What I’d like to achieve is to tell a div which has a certain class that it should not be displayed if a certain field is empty. I assume your code does this trick — but I don’t see where I have to put the class name of the div which should be hidden …
Thanks a lot!
This code will only show an image if one is available:
<?php $image = get_field('image');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
So to extend this:
<style>
.hide-me {
display: none;
}
<?php $image = get_field('image');
if( !empty( $image ) ): ?>
<div class="hide-me">
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
</div>
<?php endif; ?>
If no image is set, the whole div with the class hide-me will not be shown
Hi @jarvis and @teegee!
Thank you so much for trying to help me!
Unfortunately none of the code was working. The code from @jarvis was hiding the placeholder — But was also hiding it when I uploaded an image to the specific custom field. Also the code broke my template when I put it in my functions.php …
I don’t know … Maybe it’s a hopeless case …
The code doesn’t go in the functions file, it goes in your template.
Perhaps I’ve misunderstood what you need?
What I’d like to achieve is to tell a div which has a certain class that it should not be displayed if a certain field is empty
So looking at the supplied code:
<style>
.hide-me {
display: none;
}
<?php $image = get_field('image');
if( !empty( $image ) ): ?>
<div class="hide-me">
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
</div>
<?php endif; ?>
So in the above, we have a div tag with a class of hide-me (use whatever class name you want it to be).
If the field (in this case image) is empty, the whole div and image will not be shown.
You don’t need the class or style, because the if( !empty( $image ) ):
is the conditional tag to show or hide the div and image if nothing has been uploaded.
Hi @jarvis —
Thanks again for helping me!
Sorry — but what do you mean with template? Should I put the code in my “wpb-single-post.php” in my child theme folder?
Thank you!
Your site is running a theme, this is constructed of various files.
Depending where you need the code to be used will depend where you need to add the code.
If you edit the file you suggest (“wpb-single-post.php” ), it will show in a particular place, I suspect a single post.
Hi @jarvis — I can’t thank you enough!
I will try it and let you know if I was successful.
Hi @jarvis!
I finally found a way to implement php code in my template — and your code works very well!
Thanks a lot!
Hi again @jarvis!
Please excuse but there is another question regarding the hide-code:
How do I have to change your code
<?php $image = get_field('image');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
when the custom field contains text instead of an image?
Thank you very much in advance!
Hi @teegee,
If you do something like:
<?php $text = get_field('text');
if( !empty( $text ) ):
echo $text;
endif; ?>
Basically, this checks of your text field has a value, if it does, it will show the content.
You would need to amend the field name from text to whatever you need.
Is that what you meant?
Hi @jarvis!
Thanks a lot for your answer — and your patience!
When I want to hide a specific div (class would be .hide-me) if “test” is empty — do have to use the same workaround as you described above by using `<style>
.hide-me {
display: none;
}
</style>`
Thank you!
Hi @jarvis!
Sorry for opening this topic again but I have a little problem with the code which you kindly provided me with.
Using
<?php $image = get_field('image');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
indeed shows no placeholder frame when there is no image — but if there is an image it will be shown twice.
Is there a way to avoid that?
Thank you very much in advance!
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.