[Resolved] Featured image in sticky post big, others small

Home Forums Support [Resolved] Featured image in sticky post big, others small

Home Forums Support Featured image in sticky post big, others small

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #303121
    Elio Martinez

    Hi,

    I want that all the featured images of my posts stay with a width of 200px in Masonry option, but I need that the most recent post selected as “Sticky” has a bigger width. It is possible that with some css or code?

    Thanks.

    #303122
    Leo
    Staff
    Customer Support

    Hi Elio,

    Are you able to provide a link to your site? I’ll see if I can come up with something.

    Let me know.

    #303127
    Elio Martinez

    My site is nbamaniacs.com

    I want only one column with a sidebar, not two or three columns plus a sidebar.

    #303139
    Leo
    Staff
    Customer Support

    If you want only one column then try disabling both Columns and Masonry in Customizer > Blog.

    Let me know if this is what you wanted.

    p.s. Dubs all the way πŸ™‚

    #303175
    Elio Martinez

    Leo,

    The thing is that I want all the featured images in the home with a 200px width BUT the images in the sticky post much bigger.

    #303196
    Leo
    Staff
    Customer Support

    Try this CSS for sticky post featured image size:

    .sticky .post-image {
        max-width: 500px;
    }

    Let me know.

    #303242
    Tom
    Lead Developer
    Lead Developer

    Might be best to set the image dimensions for the large image, then use CSS to make them smaller on the smaller posts.

    Otherwise you can use a function like this: https://docs.generatepress.com/article/adjusting-the-featured-images/#changing-the-featured-image-sizes-using-a-filter

    Using a conditional like this: https://codex.wordpress.org/Function_Reference/is_sticky

    #303436
    Elio Martinez

    Which is best? css for not sticky images (don’t know the exact css code) or the function that Tom wrote?

    #303515
    Leo
    Staff
    Customer Support

    I would say using the function would be the best way. Try this code below and adjust the width and height to what you want on sticky post:

    add_filter( 'generate_blog_image_attributes','tu_variable_image_sizes' );
    function tu_variable_image_sizes( $atts )
    {
        // Set up our conditional
        if ( is_sticky() ) :
            $atts[ 'width' ] = 300;
            $atts[ 'height' ] = 300;
            $atts[ 'crop' ] = true;
        endif;
    
        // Return our options
        return $atts;
    }

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

    #385567
    Elio Martinez

    Hi,

    I have solved this but now I have a problem: if I select three posts as sticky, the three of them have a big photo. It is possible to make a function so only the most recent sticky has the big image and the older stickys the same photo size as the non-sticky?

    #385733
    Tom
    Lead Developer
    Lead Developer

    You could try this instead:

    add_filter( 'generate_blog_image_attributes','tu_variable_image_sizes' );
    function tu_variable_image_sizes( $atts ) {
        global $wp_query;
        // Set up our conditional
        if ( 0 == $wp_query->current_post ) {
            $atts[ 'width' ] = 300;
            $atts[ 'height' ] = 300;
            $atts[ 'crop' ] = true;
        }
    
        // Return our options
        return $atts;
    }
    #385754
    Elio Martinez

    Solved! πŸ˜€

    #386029
    Tom
    Lead Developer
    Lead Developer

    Awesome πŸ™‚

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