Display Featured Image cropped

  • I have googled this and tried suggestions for hours without luck.

    I have a website and want a Featured image to display as a 1000 x 563 (16×9 ratio)

    I will give clients ability to upload photos from a Front End form.

    However this form does not allow for resizing/cropping on upload.

    My solution is to display Thumbnails to show 1000×563 and crop at the bottom.

    Can someone tell me the code to do this and where to put it?

Viewing 1 replies (of 1 total)

  • Hello @eiretv,

    You can add the following code in the Custom CSS field of the Customizer:

    .single .thumbnail img {
    max-width: 1000px;
    height: 563px;
    max-height: 563px;
    width: 1000px;
}

    Note: this does NOT crop the image, so the images could appear distorted.

    In addition to it, you will need to create @media queries, because the featured image will look like a disaster on mobile devices.

    On the other hand, adding a warning on the front end that the image they’re submitting must follow specific guidelines would be the best solution without any hassle.

    Hope this helps. Best of luck with your website.

Viewing 1 replies (of 1 total)
  • The topic ‘Display Featured Image cropped’ is closed to new replies.