[Resolved] Removing CSS if div element empty

Home Forums Support [Resolved] Removing CSS if div element empty

Home Forums Support Removing CSS if div element empty

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1650978
    William

    Hi there,

    For this page, its great – love it.

    For this page, there is not an image for the outlined section:

    I tried to do something, such as:

    .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);
    }

    But it does not seem to work – the CSS for the div element does not need to exist if there is no image inside it – how do I make the header element achieve this?

    #1651018
    Elvin
    Staff
    Customer Support

    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.

    #1651074
    William

    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.

    #1651128
    Elvin
    Staff
    Customer Support

    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;
    	
    } );
    #1651513
    William

    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>
    #1651576
    David
    Staff
    Customer Support

    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.

    #1652051
    William

    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.

    #1652287
    David
    Staff
    Customer Support

    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

    #1652386
    William

    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?

    #1652451
    Elvin
    Staff
    Customer Support

    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;
        } 
    	
    } );
    #1654978
    William

    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.

    #1655166
    Elvin
    Staff
    Customer Support

    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;
        } 
    	
    } );
    #1655177
    William

    That’s great! Thank you ๐Ÿ™‚

    #1655213
    Elvin
    Staff
    Customer Support

    No problem. Glad you got it sorted. ๐Ÿ™‚

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.