Support » Themes and Templates » a tip: how to limit the maximum size of pictures in a theme

  • Resolved talgalili

    (@talgalili)


    Hello people.
    I am posting a tip to help theme developers.

    The problem:
    theme users sometimes happen to inserts photos their posts which are too large (meaning – the width of the photo is larger the then width of the post container in the theme).

    The solution:
    (assuming the theme-post-container size is 450px)
    add the following line of code in the theme style.css:
    img {max-width:450px;}

    note of caution: this solution won’t work for visitors using IE6, but it’s much better then nothing…

    Cheers,
    Tal

Viewing 15 replies - 1 through 15 (of 16 total)
  • And you don’t think the majority of theme designers – not to mention users – already know how to implement maximum sizes of images?

    Thread Starter talgalili

    (@talgalili)

    Saurus:
    I was well intended, I am sorry it wasn’t as useful for people as I had hoped.

    Understood, but understand that people who develop themes are pretty well established in code. That is not a particularly obscure piece of CSS.

    Thread Starter talgalili

    (@talgalili)

    Ok Saurus, you got me curious 🙂

    Let’s run a little experiment for our discussion:
    In the home page of the themes extend in wordpress.org (
    http://wordpress.org/extend/themes/)
    there are currently 15 themes. out of them, I would like your guess, how many has max-width in their css ?
    I’ll save you the trouble of looking, since I just did (scroll down for the answer)
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    4
    they are: atahualpa, crafty, inove, inspiration.

    so only about 26% of themes (in the directory home page), are using the “max-width” tag (Which should explain to me why I didn’t have it in the theme I was using).

    This leaves me to believe there might be an opportunity for some of the more apt css/php coders around to create a “best practices” cheat-sheet, with a list of “you really should have” in your theme.

    What do you think ?

    lbrocka

    (@lbrocka)

    I agree with talgalili. I know my way around css relatively well, but using wordpress as a custom cms is something I am just getting into and there are things that come up with a cms that might not otherwise. It’s also not terribly difficult for anyone with limited coding knowledge to poke around a little and put together a theme. I for one would be very happy to have a “best practices” outline!!

    Regards!

    t31os

    (@t31os)

    Perhaps but…

    Max-width isn’t going to work across the board, neither would an Ajax solution, managing the content is down to the administrator, that includes managing images. Themes create the look, the coder or admin creates the functionality.

    Image size should be done at script level, whether that be at post display or at image upload stage.

    The built-in media management seems to thumbnail etc.. ok for basic images, and there’s oddles and boodles of image upload, crop, and manipulation scripts around, it makes no sense to resize images at a CSS level, since that simply side-steps the issue of the image being too big or the wrong size in the first place.. ie. you should have the right size images for the right scenario…

    Easier said then done perhaps, but i’d take a guess and say anyone capable of writing a theme is also capable of managing image sizes to…

    ALL THE SAME… i’d agree it’s a handy pointer to put out there, but it’s not a total fix… 😉

    Hmm – does it really work? Tried to implement it in my theme but wordpress overrides it by using width and height-tags directly in the <img>-tag.

    Is there a workaround?

    Moderator Samuel Wood (Otto)

    (@otto42)

    WordPress.org Admin

    WordPress has you covered on this using a better way.

    In your theme’s functions.php file, after the initial <?php opening, add this line:
    $GLOBALS[‘content_width’] = 600;

    That defines the maximum width of the “content” area. Now, when inserting “full size” images into a post, WordPress will add that size parameter, if necessary, to scale the images down to a size that won’t overflow your theme.

    Use whatever number makes the most sense for the theme, of course. The default is 500. It’s measured in pixels.

    This has been available since WordPress 2.5, and all theme authors should take note of and use it.

    Here’s a good plugin for you guys. Be nice!

    That’s alot of code just for reducing image size…

    You’d essentially just add to the overall load time of the page for a very small benefit…

    The best solution overall (i feel) is to just size your images correctly in the first place.. you save bandwidth and load times just by taking a few moments to think when creating or exporting images for uploading to the web…

    Or if you must use large images, then take advantage of the built in thumbnailing system in WordPress..

    I’ve already made a mental note regarding Otto’s tip though.. 🙂

    WordPress resizes your images when you upload via media library, you can see the multiple image sizes in your uploads folder. The plugin I listed allows you to easily define what sizes you want WP to resize to.

    I use it this way so I can upload the original size I want, but when showing in the post page I can choose to have the medium size format shown and then click for full view. It saves page load time for the viewer and process time for me.

    I agree with t31os_. Setting a max-width on images isn’t going to be of much use if you’re designing an elastic theme. Plus the native Gallery works so much better if users put a little time and thought into their images sizes before they upload them.

    It’s an administration issue – not a design issue – for a lot of theme developers who try to stay away from fixed width designs.

    i agree with op

    well i use this trick

    img {max-width:100%;}

    even large size image fit with in your content will not over flow

    Thanks for this little bit of information. It was really helpful for people like me who take themes and just tweak them a little as I need. The theme I was working with lately didn’t have this, and my photos were really too large. I want them large so that when people click on them they can zoom in even more, so although I know I need to design for my page to be more efficient, That doesn’t apply to me all the time.

    It also helps when I want to change themes every now and then. If I change the pic size in the specific post (like was mentioned earlier) I would then possibly face a situation where I would have to go back and re-change every pic in every post, or horror-of-horrors, have to re-upload images if I didn’t have them large enough in the first place!

    This support post is going right into my bookmarks.

    Thanks very much!

    I am new to blogging and too-large files have F-d up my entire theme more than once and I had no idea why. My theme which is currently offered in WordPress, did NOT have a max-width rule. So that first guy who slammed you for posting on this was just WRONG and a hater.

    Thanks to you Talgalili and to xinfo for the very simple but critical rule which I had NO idea about.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘a tip: how to limit the maximum size of pictures in a theme’ is closed to new replies.