WordPress.org

1. talgalili
   Member
   Posted 10 months 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 10 months 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 10 months ago #

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

4. Saurus
   Member
   Posted 10 months 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 10 months 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 8 months 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 8 months 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 5 months 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. Otto42
   Moderator
   Posted 5 months 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 months ago #

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

11. t31os_
    Member
    Posted 4 months 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 months 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
    Member
    Posted 4 months 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 months 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

Reply

You must log in to post.