[necxelosParticipant]

Hello

I understand that uploading featured image to a newly created post creates several versions of this image (resizes and cropps them – resulting in 9 image files + original one). I observed that actual featured image (both in full-width blog and masonry blog) is standarized in X size but varies in Y size, depending on source image.

I would like to have those images standarized in both dimensions (X and Y), so the featured image for post SOMETHING has identical height as the featured image for post SOMETHING_ELSE.

Thanks in advance, and good day to You all 🙂

[RahulModerator]

Hey There,

Thanks for writing in!

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[necxelosParticipant]

Well this time fault is mine, I forgot to include my usual disclaimer:
– I don’t have a domain yet, so I work on localhost, thus can’t provide site access. I will try my best o make my questions as specific as possible.
– I have a Child Theme ready to go. I used the one downloadable from Your site.
– I’m using Integrity stack for now although I’m not sure if I’ll stay loyal to it or change it to Ethos. Please try to give answers as stack-independent as possible.

Thank You 🙂

[JoaoModerator]

Hi There,

The best practice would be to upload the images with the same size.

Forcing images to re-size will distort them unless they have different sizes but the same proportion, what is unlikely.

Let us know your thoughts,

Joao

[necxelosParticipant]

I agree with the best practices, but I’m unable to enforce those on everyone writing the articles (once site goes live) so it’s not an option for me.

So I need auto-resizing after all:
Right now algorithm that prepares those 9 images from my source image does keep their proportions while resizing, cropping and centering them. Look at the screen I provided before reading further.

Now the 862px width one I inspected to be my featured image one. But the 150px width 150px height image is what I’m interested in, because it’s the only one which has identical size in every uploaded featured image set. This is the proof that images can be cropped/resized in both X and Y while still maintaining their proportions.

All I need is to make all the other images in the set, the same way the 150×150 one was created (of course with manually selected Y size for each of them, just like they have their X size set for them somewhere in the code right now).

[ChristopherModerator]

Hi there,

We can help you to resize images but this code will distort them.
Please add following code in Customize -> Custom -> CSS :

.entry-featured{
width:150px;
height:150px;
}

Hope that helps.

[necxelosParticipant]

a) Why resizing will distort them? I attached a screenshot showing that all the images generated from the code (while uploading original image) are proportional (AKA not distorted). Even the one that has fixed X and Y.
b) If You consider images that are already generated by code as distorted, then I’m 100% fine with this level of distortion. In most cases this will be far bigger image resized/cropped to be smaller anyway 🙂
c) Resizing images also deals with the problem of big slowly-loading images, while simply resizing container don’t.

So I’d still like to modify the original function that generates those images and apply fixed Y values for each image in the generated set.

Thanks in advance 🙂

[RadModerator]

Hi there,

Sizes are calculated depending on layout size. But you can change them here \wp-content\themes\x\framework\functions\global\admin\setup.php

We don’t really recommend editing them and we can’t support any further changes on X core files. But, you can always edit them.

Thanks!

[necxelosParticipant]

What else would You suggest if I need (for the sake of example) all featured images in fullwidth PC view to be exactly 862 px * 300 px? How should I approach this problem?

– Changing the size of a container cropps picture from the one side only (it isn’t centered anymore) and if I understand underlying mechanics correctly it is still processed in full size (affecting performance), just not visible as a whole. RULED OUT

– Editing core X files containing functions that cropp/resize uploaded images isn’t safe and supported (and I’m not pro enough to mess with those on my own). RULED OUT

– Uploading pre-processed images isn’t an option, because I’m not going to be the one making those images and uploading them. RULED OUT

I kind of hoped functions that create those images are as simple as to write down fixed height and voila, but I can’t even find any of the fixed width parameters (even though every image I uploaded ended up being cropped to the same width, which suggested there are some fixed values somewhere). I can’t believe as simple thing as fixing the height for an image can be that complicated…

[RadModerator]

Hi there,

It’s based on your site’s layout size, and since it’s fixed layout, it’s the fixed parameter that you’re looking.

    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 100, 9999 );
    add_image_size( 'entry',                   x_post_thumbnail_width(),      9999,                                   false );
    add_image_size( 'entry-cropped',           x_post_thumbnail_width(),      x_post_thumbnail_cropped_height(),      true  );
    add_image_size( 'entry-fullwidth',         x_post_thumbnail_width_full(), 9999,                                   false );
    add_image_size( 'entry-cropped-fullwidth', x_post_thumbnail_width_full(), x_post_thumbnail_cropped_height_full(), true  );

Hence, you can change it to something like this

    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 100, 9999 );
    add_image_size( 'entry',                   862,      300,                                   false );
    add_image_size( 'entry-cropped',           862,      300,      true  );
    add_image_size( 'entry-fullwidth',         862, 300,                                   false );
    add_image_size( 'entry-cropped-fullwidth', 862, 300, true  );

https://developer.wordpress.org/reference/functions/add_image_size/

The x_post_thumbnail_width(), x_post_thumbnail_width_full(), x_post_thumbnail_cropped_height(), and x_post_thumbnail_cropped_height_full() are the functions responsible for calculation and it generate the fix values.

Once you do this, you’ll have to regenerate your thumbnails (Force regenerate thumbnails plugin)

Thanks!

[necxelosParticipant]

Changing the code indeed changes the pictures themselves to proper sizes but what X Theme does with them later is entirely different story. Once on front-end they are resized once again (enlarged in this case) from the initial smaller image. Even I see that going this way would be far beyond Your support, so let’s rule it out permanently.

I’ll rephrase my question to try different approach (and maybe one of You will be able to suggest simpler solution). My end goal is:
a) Having featured images that are thin, let’s say 4:1 ratio of dimensions (4 being width, 1 being height).
b) Having all featured images (in front-end view) appear as same height (of course it will scale while for example scaling browser window just as it is now).
c) Having them centered both horizontally and vertically just as they are right now.
Is it possible with just CSS? Or something else but just as simple?

[RadModerator]

Hi there,

That’s because X theme is responsive, hence, the size is calculated based on layout size. The ideal X theme size is around 900px (may change) regardless of height. This image size is good for desktop size as well as on smaller size. This is why we don’t recommend changing its size through custom code. We can’t fix it to any aspect ratio since not all users have same preferences. With the code above, you can utilize it to maintain your preferred aspect ratio.

a. Like as said, you can follow the code above to standardize your aspect ratio. You can use this tool http://andrew.hedges.name/experiments/aspect_ratio/ to calculate different sizes for 4:1 aspect ratio

b. Same as A, which of course you need to upload images of the same size. Please note that WordPress cropping works in the certain condition. It’s not X theme’s standard, but WordPress’. Example, if uploaded image width or height is smaller than registered image size, then there will be no cropping. Hence, images may still not appear of the same size. Some will be processed, some aren’t. The solution, upload images of the same size.

c. It’s not possible through CSS , but with the code above, it may be possible. Example, https://developer.wordpress.org/reference/functions/add_image_size/

add_image_size( 'entry-cropped', 220, 220, array( 'center', 'center' ) ); // Hard crop middle

My previous reply is still relevant to what you’re trying to do, because what you need to do is all there 😉

Thanks!

[necxelosParticipant]

HOORAY! 🙂

I experimented with setup.php a little and this actually works pretty good – at least I think so as I have no knowledge of underlying mechanics. So I have few questions to fill up the gaps in my understanding (all knowledge based this time – I’m not asking for solutions but for information for a change) about Your responsive mechanic:

1. In my screenshot from post #1154084, can You tell me which image is used for what purpose on Your Theme X and where their “creation” is defined? There are 9 images generated but only 4 defined sizes in setup.php. I only know that ‘entry’ one that is 862px wide is used as actual featured image.

2. Can You tell me what exactly happens to the image on front-end?

I’ve read that in responsive layout there are several sizes of images, so when user scales browser window there should be breakpoints at which smaller resolution image is loaded while between those breakpoints image is just dynamically scaled. But using FireBug I found out that even when I downsize the browser window to the point when it uses Cellphone layout, still the big ‘entry’ image is used, just scaled down.

3. You said that smaller images aren’t cropped. Can You tell if one of those are correct:
– Images aren’t cropped because cropping happens before enlarging so there is nothing to be cropped at the point at which it should happen?
– Images aren’t cropped because there is entirely separate function that deals with smaller-then-required images compared to bigger-then-required images and the former doesn’t have cropping in it whatsoever?
Just a side comment: Whatever the case may be it’s still easier for me to try enforcing “images bigger then some minimum” on writers then enforcing “images of exact size”. Most images will be screenshots or data charts or just plain illustrations for what I can tell, AKA big or huge 🙂

And now back to the solution questions (just one this time):
– Can I copy this setup.php file to a child theme to avoid it being overwritten during updates? If no, can I overwrite those add_image_size() functions from outside this file? For example from functions.php or somewhere else?

Thanks again Rad, You are awesome! 🙂

[RadModerator]

Hi there,

1. What page do you see those images? Not all image you see in the upload folder is from X theme. Other feature and plugins can register their own. Hence, the only way to verify this is to check the page where they are displayed.

2. There are several sizes of images but not all of them are used. We need to check the page to see what images it’s picking. Yes, that’s how X theme’s responsive layout works, it’s scaling down and up the images, hence, it needs to pick an image that is good on both larger and smaller screen. X theme has no dedicated or separate theme for mobile, what you see on a desktop is the same on mobile, it only changes according to CSS breakpoints (eg. layout columns, width, menu, and etc.) but it will display just the same image (eg. entry size on both desktop and mobile).

3. Not smaller images. But images smaller than registered image sizes.

Example, you registered your size like this

add_image_size( 'entry-cropped', 400, 400, true );

Yet, you uploaded a 300×300 image. Hence, it will not be cropped. But it happens that you also have

add_image_size( 'my-custom-size', 200, 200, true );

Then it will be cropped since 300×300 is larger than 200×200.

Yes, you should set a standard of what size that you should upload. Make sure that it’s larger on all registered sizes. There are many registered sizes, you should not set it just based on one size.

4. You can’t copy setup.php, it’s not a template. It’s part of the core and we don’t really recommend editing it. Though, I’m not restricting you, just letting you know that we can’t cover it. You can re-declare same code to your child theme’s functions.php

function x_setup_theme() {

    //
    // Localization.
    //
    // Translations can be added to the /framework/lang/ directory.
    //

    load_theme_textdomain( '__x__', X_TEMPLATE_PATH . '/framework/lang' );

    //
    // Automatic feed links.
    //
    // Adds RSS feed links to <head> for posts and comments.
    //

    add_theme_support( 'automatic-feed-links' );

    //
    // Post formats.
    //
    // Adds support for a variety of post formats.
    //

    add_theme_support( 'post-formats', array( 'link', 'gallery', 'quote', 'image', 'video', 'audio' ) );

    //
    // WordPress menus.
    //
    // This theme uses wp_nav_menu() in two locations.
    //

    register_nav_menus( array(
      'primary' => __( 'Primary Menu', '__x__' ),
      'footer'  => __( 'Footer Menu', '__x__' )
    ) );

    //
    // Featured images.
    //
    // Theme support for featured images and thumbnail sizes.
    //

    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 100, 9999 );
    add_image_size( 'entry',                   x_post_thumbnail_width(),      9999,                                   false );
    add_image_size( 'entry-cropped',           x_post_thumbnail_width(),      x_post_thumbnail_cropped_height(),      true  );
    add_image_size( 'entry-fullwidth',         x_post_thumbnail_width_full(), 9999,                                   false );
    add_image_size( 'entry-cropped-fullwidth', x_post_thumbnail_width_full(), x_post_thumbnail_cropped_height_full(), true  );

    //
    // WooCommerce.
    //
    // Theme support for the WooCommerce plugin.
    //

    add_theme_support( 'woocommerce' );

    //
    // Allow shortcodes in widgets.
    //

    add_filter( 'widget_text', 'do_shortcode' );

    //
    // Remove unnecessary stuff.
    //
    // 1. Version number (for security).
    // 2. Really simple discovery.
    // 3. Windows live writer.
    // 4. Post relational links.
    //

    remove_action( 'wp_head', 'wp_generator' );                    // 1
    remove_action( 'wp_head', 'rsd_link' );                        // 2
    remove_action( 'wp_head', 'wlwmanifest_link' );                // 3
    remove_action( 'wp_head', 'start_post_rel_link' );             // 4
    remove_action( 'wp_head', 'index_rel_link' );                  // 4
    remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head' ); // 4

  }
  add_action( 'after_setup_theme', 'x_setup_theme' );

Thanks!

[necxelosParticipant]

1. This screenshot is actually from my physical folder where those images are created (in this case inside my XAMPP folders). And those 9 images (the 10th is the original image) are being created with just the WordPress, X Theme and Polylang installed, nothing else.

I understand some of those 9 images maybe WordPress generics that are never used, so lets just focus on those used by X Theme. Are those 4 registered in setup.php only ones being used?

2. Doesn’t it hurt loading speed on mobile connection plans? Should I use images on the smaller side of the scope to prevent that? Or ar those “around 900px*600px” sizes optimal enough?

From what I understand blog/thematic pages have most readers on mobile devices regardless the topic involved, that’s why I’m asking – better safe then sorry.

3. I understood You meant registered sizes. What I’m asking is if the reason smaller ones aren’t cropped:
– Is that cropping process always happen before resizing? With this logic simply changing the order of processes to “first resize then crop” would make smaller ones eligible for cropping.
OR
– Is that “resize and crop – for bigger” and “resize” for smaller are completely separate processes so once “decision” to only resize is made, there’s nothing to be done, except for rewriting half the wordpress.
Mind that this question is purely academic, I don’t expect help with doing that, I’m just curious 😉

4. It works like a charm just as You wrote it. Thanks to this I won’t need to change hardcoded values after every X Theme update. Thank You 🙂

[Author]

Posts