Maximum displayed image width

114 thoughts on “Maximum displayed image width”

1. 

   G’d afternoon, Panos
   This is impressive!

   Posted by Tess | July 24, 2009, 16:16
2. 

   Hi! I’m a bit crazy I guess…

   Posted by Panos | July 24, 2009, 16:26
3. 

   No. If it takes one to know one, then I’d know. ≥^,^≤

   I started a second blog (link in my sidebar) when I’m not even keeping up with the old one!

   Posted by Tess | July 24, 2009, 16:40
4. 

   Curious to see what it’s about – coming right over!

   Posted by Panos | July 24, 2009, 16:43
5. 

   Ooooh I got some reading to do (probably commenting too)!

   Posted by Panos | July 24, 2009, 16:51
6. 

   Not so much. Mostly I’ve been fighting with those tables. WP puts end paragraph symbols after my html comments; that messes up the validation and I believe it messes with the way Safari displays them. Though I just updated to S4 and it’s better. The editor for the sidebar doesn’t do that: code validates and table looks fine.

   I just wanted to get that stuff off my main blog, where it was becoming unmanageable. So mostly, I’m avoiding the topic by putzing around with technicalities.

   Posted by Tess | July 24, 2009, 17:28
7. 

   “WP puts end paragraph symbols after my html comments”: Clarify please?

   “Though I just updated to S4”: As far as editing is concerned, I find Firefox safer.

   “Just wanted to get that stuff off my main blog”: Agree with the move!

   Posted by Panos | July 24, 2009, 17:49
8. 

   I finally asked in the forum last night:
   http://en.forums.wordpress.com/topic/validated-post-show-many-errors-and-warnings?replies=13
   The post editor just adds the code.
   I only updated Safari to see if the table displays better, and it does. But lots of people aren’t updated to 4 so it’s still a problem.

   The validation errors might be an issue?

   Re: the move
   It’s not as if I want thousands of readers; it’s hidden from search engines. It’s been linked in my sidebar for weeks (a month?) but no one visited until I asked about the table in the forum! I already knew that would be the case since I don’t get many hits to the pages linked in the sidebar (sometimes readers click on blogroll links, though). Anyway, if the blog wasn’t minimally public I’d eliminate it and forget about the whole problem. Understand that it would be easy to forget.

   Posted by Tess | July 24, 2009, 19:25
9. 

   Honestly, Panos, just brilliant. You are tireless. Thank you!

   Posted by Jennifer | July 24, 2009, 23:36
10. 

    @Tess: I hadn’t noticed that thread. I don’t get the p tags in my editor, but your table won’t behave nevertheless. Sending you my version by mail.

    @Jennifer: Thank you! (As I said to Tess, can be called crazy instead of tireless…)

    Posted by Panos | July 25, 2009, 10:10
11. 

    Hi Panos,
    This is totally off topic but I found a response by you in the WP forum that almost answered a question I have about aligning two images side by side in a post. You gave the following answer code to the questioner:

    IMAGE1_CODE_HEREIMAGE2_CODE_HERE
    CAPTION_HERE

    Is there any way you can change the code so that I could put text under each individual image instead of the two images combined?

    I had no other way to reach you than post here. Thanks in advance for your help.
    Peter

    Posted by pacecom | July 29, 2009, 12:16
12. 

    Sorry the code did not show up. Can you see it on your end?

    Peter

    Posted by pacecom | July 29, 2009, 12:17
13. 

    Here is a link to the post in case it does not show on your end:
    http://en.forums.wordpress.com/topic/positioning-photographs

    Thanks,
    Peter

    Posted by pacecom | July 29, 2009, 12:20
14. 

    • The code cannot show up, because comments are almost like posts: if you paste code, you get the result the code is meant to produce, not the code itself.

    • If you want two captioned images side by side, you need no code: you just write the text in their caption box and set their alignment to left. You’ll only need some code if you want the pair of images to be centered, so let me know exactly how you want them to be. Best give me a link to your post too, or at least tell me which theme you’re using, as there are a couple of quirky themes in which some standard codes won’t work.

    Posted by Panos | July 29, 2009, 13:06
15. 

    Hi Panos,
    I’m using the Flexibility2 theme. I tried using 2 images aligned left but that would not work. Here is my url:
    http://www.learningtoplaypiano.org

    Thanks,
    Peter

    Posted by pacecom | July 29, 2009, 13:28
16. 

    Panos,
    Your code worked! Is there a way to add some padding between the images? Also, how would I write a paragraph of text below each image.

    Thanks so much for your help,
    Peter

    Posted by pacecom | July 29, 2009, 14:09
17. 

    Panos,
    I am going to bed. Thanks for all your help. I’ll check your blog in the morning.

    Thanks,
    Peter

    Posted by pacecom | July 29, 2009, 14:22
18. 

    Ah, you’ve got a wp.ORG blog! As we keep saying in the wp.COM forum, your software is different and our answers may not apply!

    First try reducing the width of the images a little: maybe there’s not room enough for them to get side-by-side. If that doesn’t work, try this:

    <table border="0">
    <tr>
    <td>IMAGE1_CODE_HERE</td>
    <td>IMAGE2_CODE_HERE</td>
    </tr>
    </table>

    It might need some fine-tuning. I can’t use your theme, so I’ll only be able to tell after I see the result in your blog.

    Posted by Panos | July 29, 2009, 13:58
19. 

    If you want more space between the two images, you must first downsize them cause there’s no room for that now. And if you want paragraphs of text below each image, things get complicated, because you must design the table code in a way that will constrain the text to the width of each image. Since I cannot use your theme, I cannot work out a precise solution for you along the lines of the previous one, so I suggest you try two-column content instead – see here:

    https://wpbtips.wordpress.com/2009/06/10/formatting-text-pt-1/

    Posted by Panos | July 29, 2009, 15:01
20. 

    Panos,

    Thanks Again.

    Peter

    Posted by pacecom | July 29, 2009, 22:28
21. 

    Hi! Thank you for creating this resource! The info in the FAQs are completely outdated, so it’s great to see someone taking charge and making a page on their own. I still have a few questions, if you don’t mind.

    If there is a difference between the value in the “Uploader says” and the “Must be” column, does that mean that the particular theme adds some sort of padding/border/margin to the image? For example, in Contempt, the “Uploader says” reads 450, but the “Must be” reads “438.” Does that mean that the theme adds a padding/border/margin totaling 12 pixels to the left and right of the image by default?

    I notice that iNove allows images up to 600 px. This limit looks to be a result of the side bar. Without the sidebar, there’s a lot more space! I’m wondering how wide an image can be if the sidebar is disabled.

    Finally, may I make a formatting suggestion for your chart? For the places that say “See notes,” I recommend adding a superscript(s) that links to the corresponding note(s) below the chart, kind of like what some Wikipedia articles use when citing sources (look here for a random example if you don’t know what I mean). That way, a lot less up-and-down scrolling will be needed. :)

    Posted by Allen | September 5, 2009, 00:09
22. 

    @Allen: You’re welcome and thanks for your comments.

    Re your first question: Yes (I mention that in the post); in cases where the difference is small, as in your 450/438) example, it’s usually due to the fact that the theme automatically produces margins and/or frames around images, and the uploader doesn’t take that into account.

    Re you second one: I’m not sure what you have in mind when you say “disabling” the sidebar. In a free wp.com you cannot do that – you can only make the sidebar completely empty, but the main/posts column will still have the same width; you can only change that with the paid CSS upgrade. Without that, you can take advantage of an empty sidebar as extra room for wide images if the theme has no border between main column and sidebar. But you also have the flexible-width themes, which can accommodate very wide images, plus of course the option of inserting downsized images that link to the larger originals.

    Re your suggestion (I know what you mean: it’s called anchor links): Hadn’t thought of it – good idea – thanks – will do it!

    Posted by Panos | September 5, 2009, 03:43
23. 

    Panos-iNove lets you hide the sidebar on Pages, so while the content container stays the same width with or without the sidebar, on Pages, the contents cover the entire width. (Updated: EXCEPT THE PHOTOS, which behave as though the sidebar is still there!)

    But there’s also something else funny (read: bug) going on with iNove. After uploading a full-size horizontal image (2288×1712) to a test post, the choices, besides thumb and medium, were for Large at 1024×766 and Full at 901×674. Unfortunately, WordPress.com doesn’t actually resize the horizontal image proportionally (its distorted) nor if I link the image to an attachment page, was there a further link to open the image at the full, uploaded size.

    :x

    Posted by Jennifer | September 5, 2009, 14:37
24. 

    @Jennifer: Ah, that’s what Allen had in mind! Thanks, didn’t remember iNove has that option.

    Re the bug (did you or will you report it?): The images remain at 600 no matter what – you cannot override that the way you can in other themes (write desired width, delete height). What’s more funny is that the sidebar space is available: if you set the image to align center or right, it will happily move into the ex-sidebar area.

    Posted by Panos | September 5, 2009, 15:55
25. 

    Thank you very much Panos, I found this really helpful.

    Posted by happychinchilla | September 25, 2009, 03:51
26. 

    You’re welcome.

    Posted by Panos | September 25, 2009, 08:51
27. 

    • Andreas 09, Fadtastic, Girl in Green, Rubric, Sandbox 0.6.1, Sandbox 1.1, Sandbox 1.6.1, Shocking Blue Green, Silver is the New Black, WordPress Classic: flexible-width themes; in theory the images you insert can be as wide as you like; in practice you must consider that many readers don’t have wide high-resolution screens, so the “Full size” option of the uploader is a sensible limit.

    There was a question in the forum just now (“auto adjust image to window” usung Andreas 09), and this may be a different issue, but with a flexible width theme, do you think using % is more useful than the # of px?

    Oh, Happy Christmes~
    Tess

    Posted by Tess | December 24, 2009, 13:22
28. 

    Amazing! I hadn’t ever thought of that, and now that you asked I doubted it would work, but I tried it and it does – even in IE! You delete the height declaration from the image code, write width=”100%”, and the image will happily adjust to window resizing. Of course you have to upload a very large image, to avoid pixellation.

    You just made my day – happy holidays!

    Posted by Panos | December 24, 2009, 16:31
29. 

    Hooray. I was running on intuition…

    I wasn’t sure about IE and the 100% so I just told the fellow 99% (something I didn’t really understand re IE and absolute position).

    Posted by Tess | December 24, 2009, 17:36
30. 

    “Panos Says:
    05/09/2009 at 15:55

    @Jennifer: Ah, that’s what Allen had in mind! Thanks, didn’t remember iNove has that option.

    Re the bug (did you or will you report it?): The images remain at 600 no matter what – you cannot override that the way you can in other themes (write desired width, delete height). What’s more funny is that the sidebar space is available: if you set the image to align center or right, it will happily move into the ex-sidebar area.”

    Does this mean that the CSS upgrade is worthless for wider photos in iNove?

    Posted by David | December 31, 2009, 03:32
31. 

    @David: Not at all. I just checked the CSS of the theme; the behavior described in the passage you quote is due to this:

    .post .content img {
    max-width:600px;
    }

    So with the CSS upgrade you can easily override it by adding this command and changing the number to a higher one.

    Posted by Panos | December 31, 2009, 05:20
32. 

    Or, better, add this command (so that it will apply only if you deactivate the sidebar):

    .one-column .post .content img {
    max-width:906px;
    }

    Since the CSS of the theme includes a bunch of settings for “one-column” (= hidden sidebar), then the omission of the above is definitely an oversight. When Support opens again, I’ll let them know – they’ll probably correct it.

    Posted by Panos | December 31, 2009, 05:35
33. 

    Thank you!

    Posted by David | December 31, 2009, 07:33
34. 

    Did Support say whether or not they would increase the image width in the iNove theme with a hidden sidebar?

    Posted by David | January 6, 2010, 05:14
35. 

    @David: Sorry, didn’t do it yet – I was on a short vacation. I’ll probably send them a ticket tonight, and I’ll let you know as soon as they reply.

    Posted by Panos | January 6, 2010, 18:35
36. 

    @David: For the record, I did send the suggestion soon after posting the above comment; strangely, no fix and no reply yet. (Very strangely, because I’ve done this several times, and in all other cases I got a reply after one day.)

    Posted by Panos | January 11, 2010, 06:43
37. 

    Maybe they’re swamped with tickets from the holiday break. Or, they might be waiting for approval from a committee. I’m in agreement with you. It appears to be an oversight. Why would they increase the content width, but not the image width?

    Posted by David | January 13, 2010, 01:18
38. 

    “Maybe they’re swamped with tickets from the holiday break.”

    That’s not the case, I’m afraid, because I sent them two tickets that evening. The second one was about an oversight in the new Duotone theme: they promptly fixed that one, and sent me a thank-you note the next day.

    Posted by Panos | January 13, 2010, 01:32
39. 

    @David: Good news! On the 13th I got a mail telling me that they talked to one of their developers about my recommendation, and a few minutes ago I got this: “Thanks, this has been fixed!”

    Posted by Panos | January 21, 2010, 05:47
40. 

    @Panos: Wow, you’re the man!

    Posted by David | January 21, 2010, 06:27
41. 

    …or woman!? Why don’t you have an “about” page? Anyway, thank you very much for the valuable support you provide to WordPress.com users.

    Posted by David | January 21, 2010, 17:59
42. 

    You’re welcome!

    Man.

    (I don’t have an about page, first because I don’t find it necessary, second because I don’t like the way page tags are displayed in the theme I’m using.)

    Posted by Panos | January 21, 2010, 21:28
43. 

    Hi all,

    I am going really mad with faded images in my blog. I have been reading all forums, tried every tip found, and prayed all gods. Truth is that the way pictures show up in wordpress seems to me a total RANDOM issue, not necessarily dependent on images size and resize.
    I have this old post where images are: (starting from the top) this first 428, 432, 429, 427, 432, 431…. Now, why I was so messy with my pictures at that time I don’t know, but the point here is that these “messy” pictures ALL look exactly the same as my originals.
    Pictures from all posts of last months are faded.
    In the very last weeks I have not been able to publish any post because of this problem, food looks really horrible when is washed-out.
    You say that for DIGG3 480pxls is the right wisth, so I sized at 480 in photoshop, and also erased the size line… no changes, all faded.
    Not secondarily, I cannot be 100% sure here, but I am almost sure that the images in these posts:
    http://breadandcherries.wordpress.com/2009/12/02/escarole-with-a-gourmet-surprise/
    http://breadandcherries.wordpress.com/2009/12/04/spinach-and-eggs-a-super-supply-of-iron-and-vitamins/
    http://breadandcherries.wordpress.com/2009/12/16/a-cooking-marathon-for-folks-and-friends/
    WERE ALL PERFECT when I published them (sized in photoshop at 380 width). In the last week I go back and they all look faded!! When I published those posts I was already very aware of the faded images problem, so I was REALLLLYYY very careful to the process and the result…
    This is very frustrating. Please, I see that you are fantastic and do a great job helping all of us struggling with wordpress, what am I doing wrong? There is anything that I could try? Settings for saving images in photoshop?

    Sorry for writing such a long post… well put it this way length is directly proportional to my frustration :-|

    Thank you in advance, to whoever can help.

    Cinzia

    Posted by cinzia | January 26, 2010, 01:55
44. 

    Excuse me,

    the post with more images that I mention above is here:
    http://breadandcherries.wordpress.com/2008/08/29/a-happy-land-of-history-and-white-vines/

    Thanks…

    Posted by cinzia | January 26, 2010, 02:03
45. 

    @cinzia: There’s nothing “random” with images and image quality in WP. I’m explaining the situation here:

    https://wpbtips.wordpress.com/2010/01/16/image-quality/

    In short: images resized by WP are rather heavily compressed, so they lose some detail; a) you get better quality if you upload and insert copies downsized to fit the theme you’re using; b) even better quality if you then delete the w & h commands from the code; c) the new complication is that WP has started adding a w indication to the code even when you expressly delete it (I’ve contacted staff on this, received a preliminary unsatisfactory reply, sent them all the details along with a link to a test post demonstrating the issue, waiting for further reply).

    Now, you seem to be aware of a and b but not c. But you also seem somewhat confused as to what you should be doing and what you’ve actually been doing:

    “I have this old post where images are: (starting from the top) this first 428, 432, 429, 427, 432, 431…. […] ALL look exactly the same as my originals.”

    No they don’t: they’re duller. The widths you mention are what’s displayed in the post, not what you have uploaded; here are the first three of them:

    
    
    

    First one is 504px wide, second one 1166, third one 709.

    “You say that for DIGG3 480pxls is the right wisth, so I sized at 480 in photoshop”.

    No I don’t, and no you didn’t!
    – My table says 458, not 480 (480 is the number given in the wretched support doc).
    – Your “uova-anatra.jpg” and your “scarola.jpg” are both 500px wide (so they couldn’t have been “perfect when you published them”), and they have been inserted at 468px.

    As far as uploading and inserting is concerned, perhaps you’ve been misled by what the uploader calls the “Full size” option. This is limited to the (supposedly – often wrong) maximum for the theme; it coincides with the real size of the uploaded original when the latter is narrower than the allowed maximum; if it’s wider, then “full-size” is still downsized…

    As for Photoshop, I can’t tell what might have made you think you have downsized the images when you haven’t.

    Posted by Panos | January 26, 2010, 11:48
46. 

    Panos I am so sorry I just saw your reply.
    I have been buried for the last two weeks. Thank you so much for your thorough explanation. I am a terrible user I know… I will go through your answer very carefully over this weekend and try to make a better use of the tools I am using…
    Thank you so much again.

    Posted by cinzia | February 12, 2010, 23:33
47. 

    You’re welcome and no problem. And don’t think you’re a terrible user: handling images well is complicated – took me quite long to get used to and figure out some of this stuff… First thing you must clear up is how to really downsize copies of your images in Photoshop before uploading them. There are also easy-to-use online tools for resizing etc., such as this one:

    http://www.picnik.com/

    Posted by Panos | February 13, 2010, 03:19
48. 

    hi panos

    you seem like you know more about this subject than anyone else and i was hoping you could help with my small problem since I stopped posting due to this issue!

    chaos theory is currently chopping off my images. (you can see it on my 2nd post JUNEBUG). though in your chart above it says 510 for chaos theory, when i preview my blog with the themes SIMPLA or DEPO SQUARE, the whole width of the image is displayed! (even though according to your chart they both have lower capacity than chaos)

    do i just have to change my image sizes from now on or change themes?

    also on my last post the white image caption border looks like it malfunctioned :S

    any help is greatly appreciated!

    Posted by bibi salas | February 16, 2010, 17:29
49. 

    Re captioned images, see remark in red under “General notes” in this post.

    Re “Junebug”, the images you have uploaded are 1024px wide, and you have inserted them at 612px (how and why, I don’t know), so of course they won’t fit.

    So: for the theme you’re using, you need to downsize copies of your images to 500px wide in an image editing application, and upload those copies, selecting the “Full Size” option before inserting. (That way you also save storage space, and get better quality too – see here:
    https://wpbtips.wordpress.com/2010/01/16/image-quality/ )

    Or it can be 500px for captioned images and 510px for non-captioned ones. In that case you must go to Settings>Media, set 500 as the default width for your “Large” option (typing 0 in the height box), and select that option when inserting captioned images.

    Posted by Panos | February 16, 2010, 18:41
50. 

    hi panos thankyou for the help
    ive fixed the captioning thing but im still struggling with the image sizing.

    is there a way to post my large images without downsizing them first? (it sounds like too much hassle/time)

    i changed my settings in media for 510 as default for large and one if the images in junebug now fits (its small which is lame but im guessing thats the only way) but now when you click on it, the big original size does not open in its own URL

    thanks again panos!

    Posted by tamagotchi | February 18, 2010, 19:38
51. 

    i meant downsizing them on a SEPARATE program…

    and i WOULD like original image sizes to come up in new URL…

    thanks!

    Posted by tamagotchi | February 18, 2010, 19:54
52. 

    You’re welcome.

    “now when you click on it, the big original size does not open in its own URL”

    That has nothing to do with size; see here:

    https://wpbtips.wordpress.com/2009/04/26/images-the-three-link-options/

    “is there a way to post my large images without downsizing them first”

    Yes of course. The images you upload (from computer to blog) can be as large as you like; what you insert in the post can be a thumbnail or otherwise downsized version of the uploaded file (created automatically by WP, according to the size option you select). It’s just that if you let WP do the downsizing a) you waste storage space b) image quality in the post suffers.

    But all that applies as long as what you’re interested in is the quality of the image displayed in the post. If you prefer clickable images that link to the full-size original, then of course the quality of the downsized version displayed in the post doesn’t matter. (In that case I would add a note in the vein of “click to see full-sized image”.)

    On another issue: Captioned images have a preset standard look (light-grey frame around the image) – regardless of the theme you’re using. In my opinion, this looks awful in Chaos Theory (or any black theme). If I were you, I would insert plain, not captioned, images, and I would add the caption as plain text below the images. Or I would design my own style for captioned images (via html coding). If you’re interested in that, let me know what color you’d like the frame to be, and I can work out the code for you.

    Posted by Panos | February 18, 2010, 23:14
53. 

    Yay! I found it. Now you don’t need to answer my question in the sidebar width thread. :)

    Posted by timethief | February 19, 2010, 06:10
54. 

    Won’t look ok if I don’t!

    Posted by Panos | February 19, 2010, 11:54
55. 

    lol :D

    Posted by timethief | February 19, 2010, 23:32
56. 

    I’m consfused here. On my 333everyday.wordpress.com (kubrick theme, css upgrade made possible) I insert images in full size, and change the size afterwards to 640 by 480. In the main page, everything looks fine, but if you open a single post, the image runs wide on the left side. Any advice how I can prevent this? It looks really bad.
    Oh, and I set maximum width on the edit css page to 640.

    thanks.

    Posted by Sermons On Monday | March 2, 2010, 22:03
57. 

    @S.O.M.: As you can see in my table, maximum for Kubrick (as long as you haven’t changed it’s overall dimensions via CSS) is 450px. What you’ve tried to do is take advantage of the sidebar area as well. Unfortunately for you, Kubrick doesn’t display the sidebar on single posts, and it’s set so that the main post column on single posts gets centered instead of left aligned – hence the problem you’re having. There’s no solution to that, unless you can alter the CSS to make the main post column left aligned on single posts (I can’t help with that, as I’m not experienced in CSS editing).

    My suggestion is switch to another theme. Your best option would probably be iNove: it’s got a no sidebar option (under Appearance > iNove Theme Options); in that case your images can be up to 896px wide if plain, 886 if captioned.

    By the way 1: You needn’t “insert images in full size, and change the size afterwards”; you can go to Settings > Media, set the desired width in the width box for “Large”, and insert your images using that option.

    By the way 2: Your images link to the real-size original when clicked. If that’s intentional, fine. If not, then you’re just wasting storage space by uploading 2048px wide images, plus the quality of the images displayed in the post suffers.

    Posted by Panos | March 2, 2010, 23:31
58. 

    @Panos: thanks a lot for this. I’ve been trying to poke my way around the CSS a bit, but I’ve learned that poking around in CSS more often than not gets you in trouble in stead of getting you somewhere.
    I will switch to iNove. It looks like the reasonable thing to do.

    As for btw 2: you’re right. At first, it wasn’t intentional, but by the time I’d learned what I was doing wrong, I had uploaded so many pictures in original size that I figured what the heck. Since I just discovered you can update your media to refer to another image, I might look into that and reupload smaller versions.

    Thanks again. You made my day.

    Posted by Sermons On Monday | March 3, 2010, 00:06
59. 

    You’re welcome – glad if I could be of help!

    Posted by Panos | March 3, 2010, 00:16
60. 

    Just the info I was looking for! And updated to include the newest themes, too. WP is keeping you busy on this, aren’t they? :)

    Posted by Pied Type | May 28, 2010, 22:21
61. 

    @Yeah – don’t know what bit them…

    Posted by Panos | May 29, 2010, 01:04
62. 

    Panos, thanks for this table of maximum image widths in WordPress themes. I like 3-column themes with two right sidebars, and had used a customization of the Radical Congruency 2005 theme for some years, before now using a customization of the Vita theme by Nurudin Jauhari. I’ve settled on a width of 475px , which doesn’t completely fill out the body in the 3-column theme, but tends to support portability if I change themes in the future.

    My family seems to prefer a two-column look (and I encourage right sidebar), so while I’ve set medium image size maximum to 475px by 640px, I’m looking for a setting for the large size. I recognize some of the popular theme (e.g. Connections at 502px wide) and see relatively few themes over 600px. The WordPress default theme of Twenty Ten at width 640px is probably a message that going wider than that is going to require special attention to image management.

    I’ve been using Zenphoto as my webphoto resizing/display engine. This changes the workflow of photo management around WordPress, but doesn’t change the need to appreciate image width.

    Posted by David Ing | August 7, 2010, 18:17
63. 

    @David: You’re welcome, and thanks for the links.

    In my opinion, choosing a 2- or 3-column layout isn’t just a matter of “look”: the more items you need in the sidebar, the more you need two sidebars.

    Yes, there are very few wide wp.com themes, and yes I think “going wider” will continue, as users with wide high-resolution screens are no longer in the minority.

    In your Digital photos article, you’re recommending Monotone for wp.com: I would suggest you add Duotone, Monochrome, and Modularity Lite, as well as maybe a neutral wide theme such as The Journalist.

    Posted by Panos | August 8, 2010, 10:49
64. 

    Hello Panos-

    I noticed that when you click on the thumbnail image on my blog the large image is being cut off. I’ve recently made some changes to my css regarding my side bar (that you actually helped me with, thank you!) but I can’t figure out how to fix it. See here:

    http://denisesdish.com/2010/02/16/distillery-row-tour-portland-or/img_7388/

    I would appreciate any advice!

    Posted by denisesdish | August 17, 2010, 23:20
65. 

    @denisesdish: Actually your comment is in the wrong place, because what you’ve done doesn’t have to do with image width: you’ve changed the width of the whole content of the so-called attachment pages (in case that’s not clear, see here: https://wpbtips.wordpress.com/2009/04/26/images-the-three-link-options/ ). But I can’t find the selector for that (as I’ve told you before, I’m no CSS expert). So you’ll have to ask at the CSS section of the forum: hallluke or devblog or thesacredpath will be able to tell you.

    Posted by Panos | August 18, 2010, 00:54
66. 

    Denisesdish’s question (theme: Modularity Lite) answered here (by thesacredpath):
    http://en.forums.wordpress.com/topic/help-images-are-being-cut-off?replies=2#post-495159
    Or here (by hallluke):
    http://en.forums.wordpress.com/topic/attachment-images-cut-off?replies=11#post-498849

    Posted by Panos | August 20, 2010, 04:27
67. 

    I needed this quick fix. Thanks much!

    Posted by Netty Gritty | September 3, 2010, 09:03
68. 

    @NG: You’re welcome! The CSS of this theme is tricky, so I thought I’d better record those replies here.

    Posted by Panos | September 3, 2010, 14:25
69. 

    What about twentyten, the new WordPress 3.0 default theme?!

    Posted by skierpage | October 13, 2010, 00:49
70. 

    D’oh, “Twenty Ten” is in there, 640 pixels, thanks.

    Posted by skierpage | October 13, 2010, 06:47
71. 

    Right!

    Posted by Panos | October 13, 2010, 16:03
72. 

    Hi Panos,

    Happy to have come across this information. You are obviously “the man” when it comes to image sizing.
    I have a couple of questions if you don’t mind…
    I am testing out Fusion theme here:
    http://nagababas.wordpress.com/

    All seems to be going well but I have not figured out how to size vertical images to match the horizontal ones. If I make them 958 wide (to match the column width and horizontal photos) they will be way too tall. Right now they are a bit narrower than the column.

    Any suggestions?

    Also, as you will notice, I imported my content from my “real” blog and evidentally the photos are not automatically resized. Do you recommend deleting all my photos and inserting new (larger) ones or is there another option? Thanks in advance!

    Posted by cathyscholl | January 24, 2011, 04:24
73. 

    Re Q1:

    That’s an aesthetic consideration, not a technical one, so obviously I don’t have an objective answer. In my opinion, full-width portrait-shaped images would look gross, and somewhat narrower looks wrong (when juxtaposed with full-width landscape-shaped images). I would probably try half the column width minus something, inserted in rows of two.

    Re Q2:

    The dimensions of the images you insert are part of the HTML of the post, and the HTML of a post doesn’t change when you switch themes, so images aren’t automatically resized when you switch (exception: some themes have an extra command in their CSS that overrides the specified dimensions if they exceed the column width). Inserting auto-resizable images is easy, but it creates more problems than it solves.

    Whether you need to delete and re-upload your images or not depends on the width of the originals you have uploaded: when it’s larger than the new column width, you can switch the editor to HTML and change the dimensions (to avoid calculating new ratios, you increase the width only and delete the height commands altogether); when the width of the original is smaller, you can’t do that, as it would result in poor quality, so you have to re-upload wider versions.

    It also depends on whether you want best quality on the front page or when you click on an image (if you choose to make the images link to the full-size original). See here (I had given you this link some months ago):
    https://wpbtips.wordpress.com/2010/01/16/image-quality/

    Re Q1+2:

    So far I replied keeping in mind your apparent preference for full-width images on your front page. Problem is, I don’t agree with this! Subjective opinion: at that column width, to me it feels as if you’re trying to shove your photos in my face. Less subjective: too much scrolling, no sense of structure, loading issues for visitors with a slow connection.

    Personally, I would use a sidebar instead of a bottombar, and I would make each post display either a) a complete set of clickable thumbnails (regular or gallery), or b) one thumbnail on the front page, with a read-more tag and an explicit note inviting visitors to click for more large-size photos.

    Posted by Panos | January 24, 2011, 12:20
74. 

    Panos thanks for your response. I appreciate your suggestions and opinions.

    What you saw as my (test) front page will soon be the blog page. The Home page will be static as will the galleries so I will play around with the layout of those pages as I start working on them.

    As far as using large images, everyone will differ as to their preference but the trend right now in photography websites and blogs is definitely for big and bigger images! I don’t know if you are familiar with The Boston Globe’s blog…it’s a good example of what I am going for:
    http://www.boston.com/bigpicture/

    Click on one of the posts for “more pictures” and you will see it’s pretty much the same layout as I have.

    You have a good point about loading issues. I am guessing that what I am trying to do will still be faster to load than all the “big picture” flash sites everyone is doing with companies such as Neon Sky.

    Here’s an example:
    http://www.cypertandleong.com/

    Thanks again.

    Posted by cathyscholl | January 24, 2011, 20:06
75. 

    Okay, last one I promise…someone just sent me this link which fits in with what we are talking about.
    Another site with BIG pictures.

    http://www.robertdeutschman.com/

    Posted by cathyscholl | January 25, 2011, 00:28
76. 

    Ah yes, static front page is a different story altogether. What I didn’t like in your test blog is the long series of posts with a series of large images in each.

    Boston Globe: very good. There’s only one image per post on the front page, so you can move to the next post without much scrolling, and the layout (divider lines, indented text, image border etc.) is more appealing than the plain white of Fusion.

    Deutschman: hate the long intro.

    Posted by Panos | January 25, 2011, 12:19
77. 

    Glad you like the Boston Globe site.

    I have suggested it as a WordPress.com theme a couple of times to Theme Wranglers. I have never put in an “official” suggestion thru the Forums…think I will do so today.

    There is a WordPress.org theme which is based on this blog…I am not sure if it’s current or not. I’d love to see something like this on WordPress.com. Fingers crossed!

    http://andreamignolo.com/zack-990/

    Posted by cathyscholl | January 25, 2011, 20:13
78. 

    Promising reply here!

    Posted by Panos | January 27, 2011, 11:52
79. 

    Yes, very nice! If they select it I am sure there would be some who would enjoy it. Then there will be others who won’t…I got this message (below) on a post about widgets…we weren’t even discussing Themes!

    @Cathy,
    I have seen the theme you suggested that’s a knock-off of the copyrighted Boston Globe’s Big Picture theme, and I honestly don’t consider it to be special in any way. Its a stripped naked theme that’s operating like a billboard. MEH … big deal. :D

    Posted by cathyscholl | January 28, 2011, 04:36
80. 

    Well.. First, some will enjoy it, second, you didn’t ask for our opinion, you made a suggestion to staff; therefore the reply you quote is pointless.

    By the way, if the reason you opted for Fusion is the no-sidebar option, there are alternatives – check here:
    https://wpbtips.wordpress.com/2009/11/12/widgets-on-pages-or-single-posts/

    Posted by Panos | January 28, 2011, 10:17
81. 

    Thanks for the link…very good info. I will check out the other options.

    I started with Fusion because Mathias (?) suggested it when I commented on one of the new themes but I am interested in getting familiar with others. Believe it or not I may now be pretty ignorant but hope one day to help others with at least the basics on WordPress.

    Yeah, I posted the quote only as an illustration that for every one who likes something there is someone who doesn’t!

    Posted by cathyscholl | January 29, 2011, 02:28
82. 

    Thanks panos, for this awesome list, and thanks too, to cathyscholl, for asking pretty much all the questions that have been buzzing in my head! Im a photoblogger too, relatively new, been on wp.com for about 6 months and considering the leap into custom css… i posted on the forum a little while ago and have just seen your answer there, thanks!

    Posted by Kerry | March 1, 2011, 23:06
83. 

    You’re welcome!

    If “leap” means you have no experience in CSS editing, be warned that radical layout changes are trickier than changing colors or font sizes.

    Posted by Panos | March 1, 2011, 23:28
84. 

    i’m beginning to realise that… was hoping that someone could send me in the right direction, or copy from another stylesheet, but so far havent found what i’m after. I’m going to keep at it though, play around with my test blog until i feel a bit more comfortable…

    thanks again, sure i will be back again soon!

    Posted by Kerry | March 2, 2011, 01:29
85. 

    Thanks for thanking me Kerry. Glad my questions were of some help to you. That’s the beauty of shared online information :)
    Nice blog too!

    Posted by cathyscholl | March 2, 2011, 05:14
86. 

    hi Panos,

    Thank you for sharing this detailed information.

    I use Inuit types and I often post PNG screenshots and automatic resize makes them blurry! Now I know I must not upload images larger than 598 pixels.

    Posted by pierrick le gall | March 19, 2011, 12:37
87. 

    You’re welcome. See here for more on this:
    https://wpbtips.wordpress.com/2010/01/16/image-quality/

    Posted by Panos | March 19, 2011, 14:40
88. 

    Hi I’m a wedding photographer constantly on the look out for themes which let me display nice wide big images, this info has been very useful, many thanks for sharing.

    Posted by Essex Wedding Photography | August 14, 2011, 20:25
89. 

    You’re welcome. But your site is self-hosted, while my blog and my post are limited to wordpress.COM themes only.

    Posted by Panos | August 15, 2011, 01:58
90. 

    Selecta has a wide (no sidebar) format for video and image posts. I don’t know how you get your precise measurements or I’d give you the width myself if I could. :)

    Posted by Holly @foggyphils.com | September 5, 2011, 07:32
91. 

    Thanks for pointing this out. The width in that case is 940 – I’ll add this piece of info to the post too.
    (As for how I get my measurements: I use a test post with an image inserted twice, once with its width expressed in pixels and once with width:100%, and adjust the first till it becomes exactly equal to the second. Or sometimes I take a screenshot and measure the image in Photoshop.)

    Posted by Panos | September 5, 2011, 15:09
92. 

    Panos, learn to use Firebug. View any web page, open Firebug, click its element inspector, click any image (or div, or other block element) in the web page and look in the Style > Computed or Style > Layout tabs for its actual size.

    Trying to do HTML or CSS work without Firebug is crazy masochism.

    Posted by skierpage | September 6, 2011, 14:16
93. 

    @ Skierpage: Thanks! You’re right, and I do use both Firebug and Web Developer, but in this particular case I prefer to work in the post editor because I need to check other things as well. For instance, I need to see what width the uploader suggests (often wrong, as my post shows), or whether the 100% image fits correctly (sometimes that’s wrong too).

    Posted by Panos | September 6, 2011, 17:19
94. 

    I just noticed that Twenty Eleven has a Showcase Template for pages. Using it allows for wider images to be displayed. Not as wide as the header, maybe 920px?

    Posted by Tess | September 25, 2011, 19:14
95. 

    Yes it does have a showcase template – see here:
    https://wpbtips.wordpress.com/2011/05/04/workings-of-duster/
    Yes, if you put an image in the content of that page it can be larger than regular (up to 826px), but I think there’s no point putting large images there: the content of that page serves a purpose similar to the alert/notice box of some other themes.

    Posted by Panos | September 26, 2011, 03:59
96. 

    I must be dense. I tried in a test blog, and made the page part of the custom menu and it looks just like an ordinary page with a wider image. Well, two images on the page…

    I was answering a question on the forums here:
    http://en.forums.wordpress.com/topic/help-setting-up-site?replies=6

    Posted by Tess | September 26, 2011, 07:41
97. 

    In the forum thread you linked to, you’re talking about the sidebar template, not the showcase template.
    I don’t know what you did in your test blog, but the showcase template is supposed to produce the complex page described in my post on 2011 – no matter if its the main page or a page in the menu. The solution for wider content on a no-sidebar page in 2011 is to enclose the whole content in a div with negative left and right margins.

    Posted by Panos | September 26, 2011, 11:28
98. 

    Yes, I know, but I was trying to figure out if there is a way to make the google calendar full page in twenty eleven (their theme). I started using images because I know they are adjustable. Foolishly, I did not think of the negative margins… But it seems the shortcode for inserting the calendar can be modified to be longer or shorter, but not wider than what that theme allows for its content column.

    In commet with full-width page template, the calendar can take up the full width.

    Posted by Tess | September 26, 2011, 19:35
99. 

    You mean it can take up the full width in a no-sidebar page but not in a (no-sidebar) post? If so, can you give me the shortcode for a Google calendar, as I don’t have any?

    Posted by Panos | September 27, 2011, 03:18
100. 

     I took the code for the calendar from the source code of their website “schedule” page.

     [Code removed – P.]

     Posted by Tess | September 28, 2011, 01:17
101. 

     I removed the code – doesn’t render correctly if you just paste it in a comment.

     Created my own google calendar, got the embed code, experimented with it: can’t make the calendar wider than the default for the theme. I can do it for an image (by enclosing it in a div with the desired width and negative left/right margins), because the HTML editor contains the actual code for the image, but the same thing won’t work for the calendar: the HTML editor contains the shortcode only, and the shortcode is designed to translate into an iframe constrained to the ‘right’ width for the theme (no matter what the width in the shortcode says or what you enclose the shortcode in).

     Posted by Panos | September 28, 2011, 04:37
102. 

     To kill a dead horse, I did email you a code to my own (made-up) calendar. I did use the html converter in your sidebar to post the code here from the source code of the OP—note: wp automatically changes the iframes to their own shortcode.

     Yes: images within a div can be wider (Originally I hadn’t thought about negative margins).

     Sorry to annoy you, but with the Comet theme, I could alter the wp shortcode for a calendar to make it wider, full page width. So there is some difference among the themes—but it’s of no interest for me at this point. And as I said, i apologize for rubbing you the wrong way!

     Part of the email mess was that I f-ked up on the “request feedback” feature for my private test blog. I have used that in the past, but must have remembered to change the privacy feature before sending, or maybe I used it with a co-adminsitrator? Truly, I did not mean to impose.
     ≥^!^≤

     Posted by Tess | September 28, 2011, 06:47
103. 

     The converter converts the code correctly, but then the comment system gets in the way: if it sees http, it turns whatever it can into a live link again (but the end result is wrong, since the converter has already changed other things). To avoid that if I need to display some code that includes a URL, I have to manually replace the colon after http with the corresponding HTML entity. Textsnip seems to be the only foolproof way to display code, and I’ll be eternally grateful to sanjida for introducing us to it.

     As far as the calendar shortcode is concerned, there’s no difference between Comet and 2011 (I just checked it): whatever the width in the shortcode, the iframe you can see in the sourcecode won’t exceed the default max width of the page. The difference is that in most themes no-sidebar template means full-width, while in the moronic 2011 no-sidebar template means same width as sidebar template, just centered.

     Posted by Panos | September 28, 2011, 09:31
104. 

     THANKS FOR pointing me here…bummer the theme I wanted can’t handle big pics….thanks again!

     Posted by advgrrls | November 28, 2011, 02:53
105. 

     You’re welcome. But I think it was timethief that pointed you here, not me.

     Posted by Panos | November 28, 2011, 22:36
106. 

     Hi,
     You have helped me out before so I hope you can do so again. WordPress keeps resizing my images/and not allowing me to resize them how I want them. Is there a permanent fix to this? I am tired of asking them to fix it.
     Thanks!

     Posted by lavitapetite | December 20, 2011, 09:13
107. 

     Hi. I have a question that’s a little off topic but I don’t know the proper place to ask so I’d give it a shot here. My question is image-related. Is it possible to post a colored image and when I hover over the image it becomes balck and white? I know my luck is stiff here coz that kind of effect will probably require some codes that wordpress doesn’t approve of. But I’d like to know your opinion.

     Posted by AJ Luna | December 20, 2011, 09:58
108. 

     @LAVITAPETITE:
     a) Point to specific posts with the issue in question.
     b) You mean you can’t resize them the way you want them when you first insert them, or that images already inserted in older posts changed size after the latest WP updates?

     @AJ LUNA:
     Your suspicion is almost correct. There are two ways you can do that: the one requires javascript (which we’re not allowed to use in wp.com blogs), the other requires the paid Custom Design upgrade.

     Posted by Panos | December 20, 2011, 10:18

Trackbacks/Pingbacks

1. Pingback: Cut and Paste HTML Tables for Your WordPress Blog « onecoolsitebloggingtips.com - February 22, 2010

2. Pingback: Image editing and preparation tips part 2 « onecoolsitebloggingtips.com - February 27, 2010

3. Pingback: Align Images: HTML Tables for WordPress Blogs « onecoolsitebloggingtips.com - March 25, 2010

4. Pingback: Not the Official WordPress.com Gallery FAQ « Random Acts of Photography - April 30, 2010

5. Pingback: Select a WordPress.com theme 2 « onecoolsitebloggingtips - May 21, 2010

6. Pingback: DIY Slideshows on WordPress.com « Sponge Belly's Junk Heap - January 27, 2013