How to fix Harmony Theme Image Alignment Issues

A client called me up today with a problem using a theme he got from themeforest.net.  He could insert images into the content,set the alignment and all that, and they looked fine-ish in the editor, though the margins were absent…many themes have crappy editor styles.  But when we viewed the page, the images would clear-both causing the text to wrap to the next line.

No immediate answer from their support (UPDATE – See below), so I had to figure this out myself: if you find yourself stranded with the Harmony Theme and your inserted images aren’t aligning properly, just add this to your style-sheet via the editor in appearance->themes->editor

In styles.css add the following:

p img.left, p img.alignleft {
float: left;
margin: 0 1.5em 1.5em 0;
}

p img.right, p img.alignright {
float: right;
margin: 0 0 1.5em 1.5em;
}

For some bizarre reason the theme doesn’t include these basic important styles!?  If you use the center option, be sure to get that style too.

 Update

I did hear back from InventGroup on this.

Hello there,

I’m glad the alignment is working fine for you now. We’ll provide proper changes in the next update. It’s because we use [image] shortcode for inserting images. We didn’t expect that people would insert images using standard HTML syntax.

Best regards

So I reviewed their instructions on inserting images into content, and they want you to go to media uploader, upload and tag the image, copy the url, go back to your page or post, craft an image short-code, and paste the url.  That seems like a lot more steps than what I’m used to.

SO…I replied:

Thanks @InventGroup. The decision to use short-codes for image inserts is a bit strange to me. I think most WP users are accustomed to using the built-in upload/insert controls in most cases. Why add an extra several steps to do it with a short code eh?

Then again, I’m still learning a bit about stock themes and their uses of short-codes as a kind of standard. Still, the interface and workflow convention for inserting images is pretty established for WP users.

Thanks for the responses – I get it now.

 

I could see them either adding hooks to the insert/upload controls to make WP paint their preferred custom code, or ditching that short-code all together since it’s really duplicating WP-core functionality.   Building parallel functionality is probably a bad idea.

After saying all that, these seem like smart folks on top of their game, so I’ll allow that maybe there’s something I’m not getting here?

 Update 2

More from inventGroup:

Hello there :)

Most developers use image shortcode because it’s very helpful – using the shortcode it’s easier to change image html code or add new features(in Harmony every image has a shadow. It would be much harder to add those shadows without predefined images sizes).

Best regards

 

I’m not sure what shortcodes have to do with images having sizes, but in interface design there’s a term that I think applies here:

Convention over Configuration

http://en.wikipedia.org/wiki/Convention_over_configuration

The basic idea here is that if there’s an interface convention that users expect, it’s better to support that than come up with some new convention for users to learn.  I can’t imagine a single thing that shortcode insert does that the WordPress media uploader can’t do.  There are many hooks one can use to interface with WP’s media uploader, it’s what users are accustomed to using, and from an interface perspective – there’s no gains in shortcodes.  I’d much rather work easily and quickly, inserting images, than have a shadow that I have to painfully insert, screw with messy markup, lose my wysiwyg clarity, etc.  All of this, just to deliver a few CSS styles?  That doesn’t make sense to the user.

I can see how this ‘convention’ makes sense to developers who can more quickly code this in the short term, but it makes for an inferior product that will ultimately be harder for the developer to extend and support in the long run.  I bet I could modify this theme to have far better interface conventions with the exact same functionality.  Still, any time you are defending configuration over convention, you aren’t making a good argument for a more usable interface.

All that said, it’s a great theme and I’m really enjoying how it’s working for my client.  I simply respectfully disagree with them on this point.

 

 

Categories

Leave a Reply

Translate »