WordPress.org

• Extending WordPress
• Plugins
• Themes
• Mobile
• Ideas

Re: Photo Management Workflow

1. dhemberg
   Member

   Hi;

   About 6 months ago, I posted a note about working with photos in WordPress (the subject was "Photo Management Workflow". I wanted to follow up on that, as I've noticed something that might be useful to others dealing with the same problems as I.

   The problem, to reiterate, is that if I post an image on my wordpress blog that's wider than the css stylesheet for the blog allows, the image gets "squished" in a very unpleasing way. This behavior did not exist when I first began using wordpress, but crept in a while back in one update and hasn't gone away since.

   A few weeks ago, I posted a blog entry on one of my own blogs through my iPhone's WordPress app. To my surprise, the image included in the post, which was much wider than the blog should have allowed, was displayed correctly (it was scaled down proportionally, rather than just in X). I thought maybe WordPress had fixed this problem, so there was much rejoicing.

   Turns out this wasn't quite the case; the WordPress app handles images slightly differently than web-based WordPress. Specifically, it omits the "width" and "height" tags in the HTML code for a given image. This omission causes the image to be scaled down proportionally in the blog, and works just as I'd like. The web-based WordPress does not do this; it includes these width and height tags, which for some reason causes this disproportionate scaling.

   The fix, then, for anyone out there who needs this: when posting images, go to the HTML for your image and remove the "width=" and "height=" tags, and your images should behave properly. As an added bonus, readers who subscribe to your blog in Google Reader will be able to see the original, unscaled images inline in google reader, rather than having to click through on them to see them full size.

   WordPress authors: it would be great to have WordPress omit these width/height tags in images to avoid this unpleasant scaling issue.

   Posted: 7 years ago #

2. donottumbledry
   Member

   The problem is though that if you omit the height and width attributes the image may not always display correctly.

   Now I grant you that most browsers are clever enough to do what you have seen and they expand the image to fill the gap, as it were - but the solution is not ideal.

   A much better implementation is to omit the height and width attributes as you suggest BUT include a CSS class. There are three or so default image CSS classes built in to WordPress that any good theme designer should utilise.

   .size-medium
   .size-large
   .thumbnail

   These classes can be assigned to your images depending on their use. So - an image that you want to display full-size in your blog you will add the '.size-large' css class to the image. Usually this is automatically done if you use the image uploader/media gallery and select 'full-size' option when inserting the image into your post.

   The CSS file inside your themes package can then be tweaked to ensure the image never displays too big. Add a 'max-width' constraint to the CSS to ensure it doesn't get too big. You can even have the CSS auto-crop images by adding a 'overflow:hidden' directive to the CSS class.

   Posted: 7 years ago #

3. Joy
   Member

   12345

   I prefer to set the width but remove the height attribute.

   Posted: 6 years ago #

RSS feed for this topic

Reply

You must log in to post.