[Resolved] Hide Element if no Featured Image

Home Forums Support [Resolved] Hide Element if no Featured Image

Home Forums Support Hide Element if no Featured Image

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1642027
    Joel

    Hello, is it possible to hide an element (or prevent it from loading) if the page/post doesn’t have a featured image? I have an SVG shape set up as a block element that cuts into the featured image using negative top margin, when there is no featured image the effect doesn’t work as it cuts into the menu. I would like to hide the element or prevent it from loading when the post/page doesn’t have a featured image.

    Many thanks

    #1642277
    Leo
    Staff
    Customer Support

    Hi Joel,

    I believe the third example here is what you are after:
    https://docs.generatepress.com/article/generate_header_element_display/

    Adding PHP: https://docs.generatepress.com/article/adding-php/

    Let me know if this helps 🙂

    #1642501
    Joel

    Thanks Leo, that looks really close but the only problem is that the element I’m trying to disable isn’t a header element, it’s a block element inserted using a hook (generate_after_header).

    Can the code you linked to be tweaked to work for this situation?

    Thanks

    #1642752
    David
    Staff
    Customer Support

    Hi there,

    you can use the generate_block_element_display instead of the generate_header_element_display filter

    #1642801
    Joel

    Perfect! Thanks David.

    Is it possible to also add some style when there is no featured image? I would like to add some top padding to the .entry-header but only when there is no featured image.

    This is what I’ve got for the filter at the moment…

    add_filter( 'generate_block_element_display', function( $display, $element_id ) {
        if ( 394 === $element_id ) { // Only target specific Element
            if ( !has_post_thumbnail($post->ID) || get_post_meta( get_the_ID(), '_generate-disable-post-image', true ) === 'true' ) {
                $display = false;
            }
        }
        return $display;
    }, 10, 2 );

    Thanks again

    #1643070
    David
    Staff
    Customer Support

    Any chance i can see a post/page with the Block Element ?

    #1643210
    Joel

    I’ve quickly tried to duplicate it at the address in the private info…the homepage has a featured image the other pages don’t

    thanks

    #1643218
    David
    Staff
    Customer Support

    Try this, edit the Block Element, select the Container Block, and in Settings > Additional CSS Class(es) – give it a class of hero-divider

    Now we add some CSS to add padding to the Top of the #page.

    #page {
       padding-top: 40px;
    }

    And then remove it if the hero-divider is in place:

    .hero-divider + #page {
       padding-top: 0;
    }
    #1643234
    Joel

    Perfect again! Thanks David, top support!

    #1643420
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.