Theme automatically crops featured image

  • Unknown's avatar

    Hello everyone,
    I think I need your help with some of the settings of the Illustratr theme.
    I tend to upload square photos as featured images and if you go on my homepage and see the last posts you can see the real form of the pictures. But if you go on the blog the featured images become like rectangles and you can see only a part of it. It’s terrible with images with texts on it because you can only read a part of it. I tried searching for “theme options” but I can’t find it, I just wanted to know if you can personalise this aspect according to the theme. Thank you!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    Hi

    I also thought that featured image size depends on a Theme, but seems not. Have tried Dalston, Twenty Twenty-One, Mayland, Button themes – both image and featured image size are square on home page and on blog page itself. Then tried same on Illustratr Theme and also had squares!

    I found the solution here, hope that works for you too:
    My Sites -> Settings -> Media -> Large size : Both height and width have to be identical. But it works on uploading a fresh image upload only, so you have to upload same image to the media library again to see the effect of that change.

    Please revert if that helped? We value your feedback, so let us know what you think!

  • Unknown's avatar

    @cucinaantispecista,

    The dimensions at which featured images are displayed is theme dependent. On some themes a file image selected as the featured image will be automatically cropped, and on others you may skip such cropping. Featured images on the Illustratr theme are automatically cropped to a height of 500 pixels, UNLESS the chosen file image is less than 500 pixels in height. The featured image tool for Illustratr, both in the Block Editor and the Classic Editor, does not allow the option to skip the automatic cropping.

    Examples:
    1. On the post The Office in the Illustratr demo, the featured image displays with dimensions 1100 x 500 pixels, while the uncropped file image used to create the featured image has dimensions 1685 x 1123.

    2. On your posts Risotto supercremoso agli asparagi, the featured image displays at 1080 x 500 pixels, while the uncropped file image is a square of 1080 x 1080 pixels.

    3. On your post Arancinə vegan al ragù di lenticchie e piselli, the featured image displays at the size 1080 x 500 pixels, although the uncropped file image is 1080 x 904 pixels.

    Again, square images with sides of 500 pixels or less will display as squares. I also found that if a file image is too small, then the featured image will automatically be enlarged somewhat. For example, a file image 292 pixels square created a featured image 324 pixels square.

  • Unknown's avatar

    Hi @musicdoc1,

    Thanks for the info!
    Seems in my case featured image was square under many themes (including Illustratr theme) because a theme crops only those images that are newly uploaded to the media library, while those which already exist in the library remain unchanged.

  • Unknown's avatar

    @maksimurasov,

    You’re welcome!

    a theme crops only those images that are newly uploaded to the media library, while those which already exist in the library remain unchanged.

    I’m not finding any difference between how old and new media library images behave when I set them as featured images on Illustratr. Just now I, on a test site, I created a featured image from a file that’s been in the media library since 2017, and did the same with an image uploaded in 2015. Each were cropped to a height of 500 pixels. The dimensions of the file images are 2000 x 1500 and 1024 x 768, respectively.

    Perhaps I’m misunderstanding you. Yes, when you create a featured image from an image in the media library, that image remains unchanged in the media library. But in creating the featured image a new cropped image is added to the media library. That is, it will be cropped as long as the original image is sufficiently large.

  • Unknown's avatar

    Hi @musicdoc1

    It is strange, seems I do something in different way.

    Have tested once again and have different result:
    With old image set as featured the image is reduced but not cropped.
    When uploaded same image again – it is shown cropped:

    Original image: 2560 by 1920 pixels

    Have tried both new posts and pages, and have same result…
    Do you have any ideas?

  • Unknown's avatar

    Hi @maksimurasov,

    I don’t know. Maybe it works differently on the two editors, Calypso vs. WP-Admin. Are you using the Block Editor? I’ve been using the Classic.

  • Unknown's avatar

    Hi again @musicdoc1,

    First of all thank you for your precious time spent on that case!

    I was using WP-Admin and block editor. Have recreated same in WP-Admin + Classic editor, result is also reduced but not cropped (used old image from gallery):

    Have tried to set a featured image first, before adding it to the post body- the result was same- image is reduced to computed size 667x500px.

    Anyway, I don’t think it is worth further investigation, because the main thing is what you have stated: Illustratr theme (same as probably many others) does crop the featured image.

    So thank you for help!

  • Unknown's avatar

    Thanks for the screenshots and the clear explanation of your results. We can call staff in. Perhaps they can explain why when creating a featured image one might obtain different results depending upon….the age of one’s media files?! I’ll let you decide.

  • Unknown's avatar

    In your tests where you upload the image again, and it appears as a featured image at the scaled size 667 x 500 pixels, does it appear in the media library at the original size, 2560 x 1920? Wondering why it’s being scaled, and when.

  • Unknown's avatar

    In Media gallery both old and a newly uploaded images look identically, both 2560 x 1920.
    Smallest size 667 x 500 pixels I see in Chrome inspect console, Computed styles tab. So it is only final representation of that image on client side.

    In Media gallery I see same image twice:
    Old one:
    Uploaded on: September 6, 2020
    File name: p1013412-scaled.jpg
    File size: 597 KB
    Dimensions: 2560 by 1920 pixels
    Original image: p1013412.jpg

    New one is identical, only date is different:
    Uploaded on: May 4, 2021
    File name: P1013412-scaled.jpg
    File size: 597 KB
    Dimensions: 2560 by 1920 pixels
    Original image: P1013412.jpg

    Moreover, that original image on my PC is 3264x2448px , 1.79MB.

    By the way, as far as I know, WordPress saves few copies of each image, Thumbnail, Medium, Large. But there is no way to access them in Dashboard right?

  • Unknown's avatar

    Moreover, that original image on my PC is 3264x2448px , 1.79MB

    Do I have this straight? You upload an image with dimension 3264 x 2448, and it is automatically scaled down to 2560 x 1920, the size that it appears at in the media library? I don’t recall seeing that happen, in 12+ years on WordPress.com, to an image of any size uploaded to a media library.

    By the way, as far as I know, WordPress saves few copies of each image, Thumbnail, Medium, Large. But there is no way to access them in Dashboard right?

    Not that I’m aware of.

    I’d like to get some input from staff on the questions we’ve raised here, and am feeling somewhat over my head here, so I’m going to “modlook” the topic.

    Let’s not forget that the original question posed by @cucinaantispecista was, if I’m understanding correctly, is it possible to customize the way featured images appear on Illustratr. Can you “personalise this aspect according to the theme” they ask. I found the answer to be no, on Illustratr, and while your results are different as we’ve outlined above, I’ve been unable to reproduce the dissimilar results you’ve obtained dependent upon the age of the media file image. So there’s an unknown factor that’s leading to our different results.

    You mention that the browser used in your tests was Chrome. I don’t know why it would make a difference, but I’ve been using the latest Firefox (88.0). I presume that you haven’t been using a WordPress.com app.

  • Unknown's avatar

    The other, more specific, question asked by @cucinaantispecista in the OP is, to paraphrase: “On Illustratr, can featured images created from square file images be displayed as the uncropped square images?”

    Again I found the answer to be no, at least not with the free built-in customization options on Illustratr (i.e. possible CSS customization options excluded), EXCEPT when the file images are squares with sides of 500 pixels or less. For reasons that remain unknown, @maksimurasov obtained different results, as described above.

  • Hm, I must admit I’m a bit stumped on this too. It is true that different themes display featured images differently, but within the _same_ theme things should be consistent.

    Do you know about when this started?

  • Unknown's avatar

    staff-blorbo,

    Do you know about when this started?
    No, but I suspect that on Illustratr, the featured image tool has always left images of 500 pixels width or smaller uncropped. I don’t recall seeing this behavior previously on Illustratr, specifically, but I vaguely recall similar behavior on one or more of the older themes.

    It’s not clear why the creators would include a 501 pixel width lower limit regarding the automatic cropping of featured images. Perhaps they thought it might discourage users from employing file images much smaller than the recommended width of 1100 pixels.

    My tests on Illustratr also reveal that for images between 500 and 1100 pixels width, the width of the featured image created is exactly that of the file image. For example, a file image of 700 x 600 will be cropped to 700 x 500 pixels. It isn’t stretched to the recommended minimum width (1100 pixels) as it might be on another theme.

  • Yeah, hence being stumped too, and I’m not having any luck finding any related changes, so if I had even a range of dates to start digging, that would help.


    @maksimurasov
    any change you can recall about when this started?

  • Unknown's avatar

    Thank you both a lot for investigating that case! And sorry it took so much of your time.

    Finally I have figured out why I had different behavior than @musicdoc1. I did not thought that it might affect, but it did. In my previous tests I have used WordPress installation on Local, not the WordPress.com platform :(
    To get same result I have obtained Premium plan and ran the tests- if interested you can check two posts uploaded into one category here (both featured images are cropped): https://premiumplan341263548.wordpress.com/category/may06teston-com/

    As long as I have was experimenting, I already prepared some answers below, let me post some of them too:

    You upload an image with dimension 3264 x 2448, and it is automatically scaled down to 2560 x 1920, the size that it appears at in the media library?

    Sorry I have mislead you, here is separate comparison of images:
    Original file on my PC: 6.42 MB 5148x3888px.
    On WordPress installation on Local:
    File name: DSC00582-scaled.jpg
    File size: 646 KB
    Dimensions: 2560 by 1920 pixels
    Original image: DSC00582.jpg (After downloading it I get same 6.42 MB 5148x3888px)

    Same image on WordPress.com:
    File name: dsc00582-1.jpg
    File size: 6 MB
    Dimensions: 5184 by 3888 pixels
    There is no link to original image, because the one shown is original.

    So you are right again! On WordPress.com platform Media library shows original image, while WordPress.org installation on Local shows scaled one and a link to original.

    Just for info: I have made one more test on Local installation, which gave me positive result (non cropped featured image):
    When image is being uploaded under another active theme, then switching back to Illustrar leaves non cropped, but reduced image:

    Result shown under TWENTY TWENTY-ONE theme below, Images were uploaded under different active themes. Image on display is 1240x930px:

    Then I switched back to Illustrar to see how same posts looks like:

    Conclusion: Sadly enough, on WordPress.com using Illustrar theme the only option to show square featured image is to upload 500x500px or smaller images as @musicdoc1 found out. Other options work only for users that have self hosted WordPress.org software.

  • Ah excellent, yes. To clear up any confusion, WordPress.com and WordPress.org are two different entities: https://wordpress.com/support/com-vs-org/

    Besides functional differences between the two WordPresses, it’s also possible that the themes may function differently as well.

  • The topic ‘Theme automatically crops featured image’ is closed to new replies.