[Support request] Featured Image Thumbnail on a Blog Grid

Home Forums Support Featured Image Thumbnail on a Blog Grid

  • This topic has 5 replies, 2 voices, and was last updated 4 months ago by Tom.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1327163
    Ophira

    Hi Team,

    I want my blog layout on the homepage to display as a single column grid where the Featured image thumbnail is floated to the left and the Blog Title, meta and Excerpt is displayed floated to the right – on a desktop and tablet.

    Whereas on mobile I want the layout to be Featured image followed by Blog Title, meta and Excerpt.

    I cannot find an option in the customizer to set a different layout for desktop, tablet and a different layout for a mobile.

    As a work around I have set the Customizer > Layout > Blog > Featured Image > Location: Above Title, Alignment: Center, Media Attachment Size: Full.

    and added custom CSS


    @media
    (min-width: 768px) {
    img.wp-post-image {
    width: 200px;
    height: 200px;
    float: left;
    margin: 15px 15px;
    object-fit: cover;
    }
    .inside-article::after{
    content: “”;
    clear:both;
    display: table;
    }
    }

    Doing so leads to

    A. The image sticking to the top of the blog grid on a tablet.

    B. Also I don’t think it’s best practice to load a full size image and shrink it down to a thumbnail to get the effect I want, is there a workaround?

    I would appreciate if you could help me out.

    Best Regards,

    Ophira

    #1327596
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I think you’d be better off setting the featured image alignment to “Left” in the Customizer. That way you can get your desired layout on desktop/tablet by using the Customizer, and make any necessary tweaks on mobile.

    Let me know if that works or not 🙂

    #1328740
    Ophira

    Hi Tom,

    I tired your recommendation. However this leads to the thumbnail pixelating on mobile.

    Is there a way to display the featured image on the mobile taking up the entire width of the screen without pixelating? Which would be the same effect as :

    Customizer > Layout > Blog > Featured Image > Location: Above Title, Alignment: Center, Media Attachment Size: Full

    Best Regards,

    Ophira

    #1329150
    Tom
    Lead Developer
    Lead Developer

    Should be quite easy, can you set it up that way so I can adjust with CSS?

    There shouldn’t be any pixelating as long as the image isn’t being resized up.

    #1329759
    Ophira

    Hi Tom,

    How do I share the login details? This is public forum.

    Best Regards,

    Ophira

    #1330232
    Tom
    Lead Developer
    Lead Developer

    Would we need login details? Is it possible for you to set it up like I mentioned above? We aren’t able to make any changes to your website.

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