WordPress Theme Designers not paying attention to in-post photo styling and layout
CSS, Web Design, WordPress June 18th, 2007I have made the move from Blogger.com to WordPress as a platform for all my blogging needs for a little more then a year. Coming form a Blogger.com background, I’ve since noticed some peculiarities in the WordPress world that never even cross my mind during the days with Blogger.com. One of the most annoying is the lack of or poor support for in-post photos in themes. To begin with, WordPress developers have never given much thought about how to make it easy for bloggers to place photos in posts but theme designers usually just totally ignore the possibilities of photos in posts.
I mean, it is one thing to have the style in the style.css, even though requires bloggers to manually apply the class to image tags, but it is another to give little or no consideration to photos layout and style within a given theme. I frequently tryout themes and I have yet to really come across one that have photos styling sorted. Immediately after applying the theme to my mock blog, I notice photo layout in my mock post will be off and there is no class in the CSS to apply to the image tag to fix the layout problem.
In addition, the rest of the theme’s layout usually never caters for photos that are layout with float. If I add a class to float images to the left or right, it most definitely breaks the theme layout. Although only apparent in short post with images taller then the wrapped text. More likely than not these tall images will extend beyond the post metadata area disrupting the post metadata layout. Images that are tall enough will even extend beyond the next post title.
Of course, I hear you protest that theme writers are usually very generous to give their hard work out for free and that I should be more grateful to their effort. Don’t get me wrong. This post is never intended to slam theme designers and I am really grateful for their work. I’m just hoping that some theme developers may come across this post and perhaps notice missing layout style in their design. Besides, I do feel that most theme developers do what they do to build up a portfolio plus it is a very good way to build links, traffic and attention to their site or blog. An over sight like leaving out style for photos does taint their effort in my opinion.
How many themes have you come across that not only have support styling and layout for photos in the CSS but also to have the styling of photos matches the theme?
October 29th, 2007 at 4:10 am
What are you on about mate ?
You probably came across a bad batch of themes from somewhere. Check out Copyblogger(theme) if you want to get astound by the amount of markup it provides for your blogging needs.
October 29th, 2007 at 4:36 am
Ehab,
It may be unfair for me to generalized like I did in the post, but take a look at any theme browser and do a count on how many theme does not handle photos and how many does handle them. You’ll get what I’m talking about.
I have never question if there is a theme out there that have good amount of markup for most blogging needs. I’m just sadly disappointed at the majority.
May 31st, 2009 at 1:40 pm
So how do you solve the problem of tall images in short posts extending into the next post?
May 31st, 2009 at 4:32 pm
r,
The CSS clear Property should come in handy in this situation. Using the “clear: both;” at the beginning of each post will clear the float and stop the overflow from the previous post. Although it would mean some empty space on the side of the photo, it is a lot more readable to have a clear separation of the post anyway.
October 11th, 2009 at 11:13 am
Clearing the float with clear:both is not at all a solution – it’s an ugly hack that doesn’t address the question properly. I’d love to know what others are doing for this issue (because it IS an issue).
October 11th, 2009 at 5:11 pm
Jake,
Would you mind quantifying as to why it is a hack?
January 25th, 2010 at 10:13 am
Have you heard of STCFX I noticed that they have a similar theme on that site.
February 18th, 2010 at 1:30 am
@Jake
How is using clear: a hack?
It’s the correct way to clear a float…