[Resolved] How to lock down layout dimensions, especially image sizes, across the theme?

[Toby]

I need to define the image sizes used on the site in a deterministic way. I haven’t found any clear instructions on how to do this in the docs but I might have missed something.

More specifically: In all posts and all pages the image width needs to remain constant as long as there is enough width overall (i.e. the browser window is wide enough). This really boils down to setting the (max) column width of the content in blog posts and page content and have the image take 100% of this width.

I need to define the image width because that is what the photographers will use in image post-processing to achieve max image quality when published to the site. If WP is allowed to resize the images (when enough space is available) then that work is for naught.

I know I can set the customization->layout->container width but that is for the entire container.

Another way to phrase this question is: how do I assure my content (text) columns always have a max-width of X and images in those columns use 100% width with no padding and keep their aspect ratio?

Thanks,
Toby

[Leo]

Hi there,

Any chance you can link us to the site in question so I can see your setup?

You can edit the original topic and use the private URL field.

Let me know 🙂

[Toby]

Hi,

Sorry, no, there is no site yet 🙂

I’m not sure why that would help though – the question is, to rephrase it again:

How do I set the actual content width, that is, the width used for text/images? The setting must be global. I’m not talking about setting the “container width” because that would require I understand how you’ve built the HTML/CSS structure which I would then have to use to “reverse calculate” the actual content width (subtracting paddings, margins, etc from the container width), and it would break should you modify this basic structure.

The reason I need to know this is I must be able to tell the photographers that they should size their images in “X pixels width”, X being that guaranteed width that is used across the site.

I can probably solve this using trial and error but thought it’d be somewhere in the docs… 🙂

Or maybe I’m just missing something obvious because this should be simple to do, right?

Best regards, Toby

[Leo]

How do I set the actual content width, that is, the width used for text/images?

That’s not possible unfortunately as that value is depending on the container width and content padding you are using.

Unfortunately you would need to do a little math as you’ve described to get the actual content width

[Toby]

Ok, but what is this setting for?

Appearance -> Elements -> Add New -> Layout -> Content -> Content Width?

Even though you have a lot of documentation – which is great – it is not always clear what the intent of a function/configuration is. When you would use it as an alternative to something else.

The GP “Elements” is a new concept to me (and I’ve since long moved away from page builders like Elementor so I cringe a little at the name too, lol).

I would have guessed the above setting would solve my problem but since I don’t even understand how “elements” are applied to the site vs setting padding etc in Appearance -> Layout, it is difficult to say.

So, back to you 🙂

[Leo]

The content width allows you to set a different container width than the global setting in the customizer and apply to specific pages/ or post types.

Also the container width in the customizer controls the header width, content width and footer width. The content width option in the element only changes the content width – however, the content width also includes sidebar and padding etc.

Let me know if this makes sense 🙂

[Toby]

Yes that makes sense. Thanks. 🙂

[Leo]

No problem 🙂

[Author]

Posts