Automatic margins for images added with a WYSIWYG editor

WYSIWYG editors are great tools to make content formatting accessible for our clients. Unfortunately a lot of our clients are don't have enough computer / internet experience to deal with some of the limitations or difficulties that come with using a WYSIWYG-editor. Therefor, we are always looking for better ways for making working with WYSIWYG editors easier for our clients.

One of our basic obstacles has always been providing floated images with a nice margin. Images floated left with a margin on the bottom and right, images floated on the right with a margin on the bottom and left. Out-of-the-box, all WYSIWYG editor we have used come with buttons to float an image or other piece of content to the left or right. But because these buttons only add style="float:left" or style="float:right" to the element, we used to make custom formats for floating images that also added margins to the images. In order to float the images the right way, clients had to select an image - and had to select the custom style. They always did it right a few times, but after time they forgot and used the aligment buttons in the WYSIWYG editor again.

Today I was browsing around the web looking which browsers supported the css outline property, and accidentally came across the attr selector. I knew of the existence of this selector, but this day I realised what noble cause it could serve. What if we could check if an image is floated to the left or right and if so, add a margin to it?

What we do here is we check the style attribute of the images inside every p element and we check if the string float: right; is found using the * sign before the = (more information about attribute selectors can be found on css3.info). Not that i'm searching for float: right; and not float:right; (note the space). If you are implementing this yourself, check what your WYSIWYG inserts and use the correct one. Anyway, see the following example:

CSS img float styles example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

Using the following HTML (directly generated from the WYSIWYG editor):

As you can see, this is a super easy way to provide images you add via your WYSIWYG editor with the right margins. This works in IE7, IE8, Firefox, webkit browers and probably Opera.

H&O is expert in het oplossen van complexe Magento vraagstukken, maatwerk grafisch ontwerp en het bouwen van custom Magento modules.

Als je op zoek bent naar een partner die je kan helpen met het beantwoorden van moeilijke Magento vragen, een maatwerk productimport voor je ontwikkeld of een custom Magento module voor je schrijft die jouw assortiment met een andere webshop koppelt, dan ben je aan het juiste adres. H&O heeft zich sinds 2007 verdiept in de techniek en ontwikkelingen van het e-commerce CMS, speelt een actieve rol in de community, heeft verschillende modules uitgebracht en heeft voor klanten uiteenlopende technische modules ontwikkeld. Ons kantoor is gevestigd in Roelofarendsveen, direct naast de A4 én slechts op 15 minuten afstand van Amsterdam. Neem contact met ons op en kom eens langs, dan bespreken we jouw vraagstuk!

Paul Hachmang

Paul Hachmang is a Back-end Developer from Roelofarendsveen (The Netherlands) and co-founder of H&O. His weapons of choice include PHP, MySQL, HTML, Javascript, ExpressionEngine, Magento and a good cup of coffee. Contact Paul Hachmang

Comments
  • Thijs Kaspers

    (dec 09)
    Reply to this comment

    Bedankt voor deze oplossing! Ik kwam hetzelfde probleem tegen en wilde ook margins toevoegen bij float left / right. Werkt super

  • Thijs Kaspers

    (dec 09)
    Reply to this comment

    Sommige WYSIWYG editors zetten trouwens geen spatie tussen float: en left of right. Nog beter is dus om op beiden te controleren:

    p img[style*=‘float: left;’], p img[style*=‘float:left;’] {margin: 0 1.5em 0 0;}
    p img[style*=‘float: right;’], p img[style*=‘float:right;’] {margin: 0 0 0 1.5em;}

    • Erwin Otten

      (dec 09)
      Reply to this comment

      Hoi Thijs. Ja, dat is inderdaad goede aanvulling! Wij werken meestal met ExpressionEngine, met de wysiwyg-editor wygwam. Die zet er een spatie tussen, vandaar. Je hebt gelijk, met jouw aanvulling hebben we een oplossing die in alle situaties werkt. Thanks!

  • Thijs Kaspers

    (apr 26)
    Reply to this comment

    Hi Jordan, that is exactly what this code is doing ;). It only adds a margin if the image (within a p tag) is floating left or right.

Reageren

Contact

Bel mij terug

Vul uw telefoonnummer in en we bellen u zo spoedig mogelijk terug.

Contactgegevens

H&O
Veenderveld 20
2371 TV
Roelofarendsveen
info@h-o.nl
www.h-o.nl
071 744 0084
KvK Rijnland nr. 28119089
BTW nr. NL818554071B01

Nieuwe projecten

Wilt u weten wat H&O kan betekenen voor uw Magento project? Stuur ons een mailtje:

Paul Hachmang

p.hachmang@h-o.nl

Erwin Otten

e.otten@h-o.nl

Contactformulier