WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] a tip: how to limit the maximum size of pictures in a theme (17 posts)

  1. talgalili
    Member
    Posted 5 years ago #

    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

  2. Saurus
    Member
    Posted 5 years ago #

    And you don't think the majority of theme designers - not to mention users - already know how to implement maximum sizes of images?

  3. talgalili
    Member
    Posted 5 years ago #

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

  4. Saurus
    Member
    Posted 5 years ago #

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

  5. talgalili
    Member
    Posted 5 years ago #

    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 ?

  6. lbrocka
    Member
    Posted 5 years ago #

    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!

  7. t31os
    Member
    Posted 5 years ago #

    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... ;)

  8. kalinka
    Member
    Posted 4 years ago #

    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?

  9. Samuel Wood (Otto)
    Tech Ninja
    Posted 4 years ago #

    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.

  10. jhsu79
    Member
    Posted 4 years ago #

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

  11. Mark / t31os
    Moderator
    Posted 4 years ago #

    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.. :)

  12. jhsu79
    Member
    Posted 4 years ago #

    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.

  13. esmi
    Theme Diva & Forum Moderator
    Posted 4 years ago #

    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.

  14. xinfo
    Member
    Posted 4 years ago #

    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

  15. stacistubbs
    Member
    Posted 4 years ago #

    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!

  16. ZJL
    Member
    Posted 4 years ago #

    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.

  17. jamai
    Member
    Posted 4 years ago #

    Xinfo,

    Many many thanks, I had that problem when used tdo mini forms.
    Thumbnails on the main page worked fine,also zoom, but when click to each post,pictures were to wide...

    now all works fine:) many thanks

Topic Closed

This topic has been closed to new replies.

About this Topic