Default image sizes

  • I’m not sure if this should be classified as “developing” but I hope it fits in this forum.

    I am modifying a very simple theme by developing a simple child theme, and I’m having a problem with featured images.

    The theme doesn’t specify image sizes in functions.php, and so relies on the default image sizes set by WordPress. The featured images are 640 px wide, as is the single column width. (The theme is deliberately simple to make it fast on mobiles.)

    I want to make the column and image width 720 px. Changing the width of both container and image is easy, but although the images are stored as 720 px they still show on the page as 640 px. When I use “inspect Element”, I see this width is set not in the CSS, but as “HTML atrtributes” with a little padlock shown against it.

    How do I make the change I want?

    And also, what is the best practice in deciding whether to specify other smaller images for smaller screens?

    Thanks for any help.

    • This topic was modified 5 years, 2 months ago by Jan Dembowski. Reason: ;wpeMoved to Fixing WordPress, this is not an Developing with WordPress topic

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz

    (@bcworkz)

    The default media sizes are set in Settings > Media. If you change these, it only affects images subsequently uploaded. Older images remain at their uploaded size unless you use a plugin like “Regenerate Thumbnails” to resize them.

    The img tag attributes “height” and “width” are of little consequence because they are overridden by CSS. “style” attributes are another matter, these cannot be overridden except by altering the initial output or by using JavaScript.

    WP typically generates “srcset” and “sizes” attributes from available image sizes so browsers can choose the best size to request for their particular situation. You generally don’t need to do anything special, it just happens. If there is a huge jump in available sizes, it might make sense to add an intermediate size which browsers can choose to use where appropriate.

    Thread Starter unklee

    (@unklee)

    OK, thanks for that. I wonder how best to change this then.

    I suppose I can’t add a settings > Media file in my child theme, but I could break the rules and change it in WordPress.

    Otherwise, from what you say, there doesn’t seem to be a way unless I use javacript, which I was hoping to avoid (especially as I’m very inexperienced in javascript).

    Moderator bcworkz

    (@bcworkz)

    The rule for only changing in your theme and to not touch WP settings is important to adhere to when others will be using your theme. When you are customizing your own site and do not intend the same to be used by others it doesn’t matter where you make desired changes.

    But lets say you want to follow best practices anyway. Your only option then is to create a theme specific additional image size. If something else is outputting style attributes setting a size, the added image size will not help because style attributes overrule all other sizing. This is why no one should use style attributes. Ideally you should locate the source of the style attribute and either alter its values or prevent it from being output so your own CSS can manage sizes. Overriding with JS is a method of last resort when all else has failed.

    Thread Starter unklee

    (@unklee)

    Thank you for that advice, it is really helpful.

    I have managed to fix the problem, but I still don’t understand how the initial 640px width was set. But it doesn’t matter now.

    Thanks again.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Default image sizes’ is closed to new replies.