[Resolved] Blog post: crop and resize featured image on mobile

Home Forums Support [Resolved] Blog post: crop and resize featured image on mobile

Home Forums Support Blog post: crop and resize featured image on mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1640285
    Karl

    Hi there,
    Sorry if I posted this twice. I may have forgotten topic title last time.
    I am trying to figure out how to handle feature images like this website: https://www.goodhousekeeping.com/holidays/gift-ideas/g35265796/best-baby-shower-gifts

    I really love the way the feature image is handled on desktop and mobile. It looks like, on mobile, 50% of the image is cropped and resized to fit perfectly on mobile. I really like this and it is a better mobile experience in my opinion.
    If the image was just responsive and resized, the height would be lower (and not as nice looking).

    So, I wish to replicate this as much as possible. Original image size seems to be 2000x1000px (why so big initially?). On desktop: 980×490, on mobile 640px x 640px(ish). How can I do this?

    I’m using Generatepress with wp show posts pro and Generateblocks hosted on Kinsta.
    Thanks
    Karl

    #1640586
    David
    Staff
    Customer Support

    Hi there,

    That site is using some Javascript to ‘crop’ the image.
    Can you share a link to your site so i can see if theres anything we can suggest ?

    #1640615
    Karl

    Hi, sure, the site is a mess right now but here you go:
    https://gavekongen.no/gave-12-aring/

    I testet my feature image design on mobile and quickly saw it was to much information in one image on a smaller screen.

    That’s when I found that website and saw they used to pictures in one image to fill it out horizontally on desktop, and then cropped and resized to one picture on mobile so that the height would look good.

    I think a height somewhere around 350-400px looks very nice on small screens.

    I’m open to suggestions 🙂

    #1641378
    David
    Staff
    Customer Support

    So you can do something like this:

    @media(max-width: 768px) {
      /* Stop image from overflowing container */
      .featured-image.page-header-image-single {
        overflow: hidden;
      }
      /* Resize and position image */
      .featured-image.page-header-image-single img {
        max-width: unset;
        width: 200vw;
        margin-left: -100vw; /* show right hand side of image */
      }
    }

    The width: 200vw; sets the image to 2x the viewport width. So only 50% of it will be visible.
    The margin-left: -100vw; is optional, without it you will see the left hand side of the image, with it you will see the right hand side of the image.

    This works if you want to see only 50% of the image. If you want to see a different percentage of the image then its simply mathematics.

    For example:

    width: 300vw;
    margin-left: -200vw;

    This will scale the image so only 1/3rd is visible and the -200vw will move it to display the right hand 3rd.

    Hope that makes sense.

    #1641918
    Karl

    Thanks man! Worked perfectly 🙂

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