Removing CSS if div element empty

Hi there,

That's not possible with just CSS. You may have to change how the code you're using for the image behaves.

Can you share us the code on what's displaying the image? Let us know.

I have an ACF custom field with outputs an image array. I then created the shortcode using the below snippet so I can add [category_image] within the div element on the header element:

add_shortcode( 'category_image_for_cat_page', function() {
	
    $term = get_queried_object();
    
    $category_image = get_field( 'category_image', $term );
    $category_image_html = '<img src="' . $category_image['url'] . '">';

    return $category_image_html;
	
} );

I feel if the element is empty, that is a conditional statement that would potentially work (when the image is not there i.e. element is empty), just not sure how to do this with the header element.

We can modify your code a bit so nothing renders if its empty.

Try using this PHP snippet instead.

add_shortcode( 'category_image_for_cat_page', function() {
	
    $term = get_queried_object();
    
    $category_image = get_field( 'category_image', $term );

    $category_image_html = '';

    if( !empty($category_image) ){
        $category_image_html = '<img src="' . $category_image['url'] . '">';
    } 
    
    return $category_image_html;
	
} );

Hi there,

I added that code and have the following CSS, but still the CSS appears when that is empty.

.page-hero #category_image:not(:empty) {
    width: 160px;
    height: 160px;
    overflow: hidden;
    border-radius: 100%;
	  box-shadow:  0px 0px 8px rgba(0,0,0,0.3);
}

Just to provide some extra info, my div element in question I don't want the above CSS to apply to, when the image is not there, is:

<div id="category_image" class="category-image-style">
[category_image_for_cat_page]	
</div>

Hi there,

few optioms:

1. Style the <img> not its container.

2. Return the content in the shortcode condition to stop any empty HTML string being output ( which results in a 'space' in the HTML and therefore is NOT empty ):

add_shortcode( 'category_image_for_cat_page', function() {
	
    $term = get_queried_object();
    
    $category_image = get_field( 'category_image', $term );

    if( !empty($category_image) ){
        $category_image_html = '<img src="' . $category_image['url'] . '">';
        return $category_image_html;
    } 
	
} );

3. If the #category_image wrapper element is required when an image is being displayed then include that HTML in your shortcode. Then if theres no Image theres no wrapper.

Thank you for that - I changed the snippet so the shortcode outputs an image URL and simply add a with a class etc.

Is this what you were referring to? Just on this page, it does not disappear.

I'm quite open to whatever of the above options is easiest and quickest to implement.

This is what i meant:

add_shortcode( 'category_image_for_cat_page', function() {
	
    $term = get_queried_object();
    
    $category_image = get_field( 'category_image', $term );

    if( !empty($category_image) ){
        $category_image_html = '<div id="category_image" class="category-image-style"><img src="' . $category_image['url'] . '"></div>';
        return $category_image_html;
    } 
	
} );

Then you just need the shortcode which will output the #category-image div and the iamge

That's amazing thank you - all looks for the look now!

It might not be possible, but is it possible to use the {{post_title}} or something similar to add an alt tag for such an image in the above snippet?

We can modify David's code a bit to add the alt attribute.

add_shortcode( 'category_image_for_cat_page', function() {
	
    $term = get_queried_object();
    
    $category_image = get_field( 'category_image', $term );

    $parent_title = get_the_title();

    if( !empty($category_image) ){
        $category_image_html = '<img src="' . $category_image['url'] . '" alt="' . esc_attr( $parent_title ) . '">';
        return $category_image_html;
    } 
	
} );

That seems to work, although the alt/title (I added title) is for the first post on the page, not the title of the page?

See here.

Let's modify the code abit:

Try this:

add_shortcode( 'category_image_for_cat_page', function() {
	
    $term = get_queried_object();
    
    $category_image = get_field( 'category_image', $term );

    if( is_archive() || is_home() || is_search() ){
        $image_alt = $term->name;
    }
    if( is_singular() ){
        $image_alt = $term->post_title;
    }

    if( !empty($category_image) ){
        $category_image_html = '<img src="' . $category_image['url'] . '" alt="' .  $image_alt . '">';
        return $category_image_html;
    } 
	
} );

That's great! Thank you :)

No problem. Glad you got it sorted. :)