Floating images in text editor

[opalepatrick]

Using TinyMCE or CKEditor. Cant seem to find an option to float an image left or right. I can align but not float to wrap text or ad a margin? Am I missing something obvious?

[Joss]

Hi opalepatrick

When you align it adds a style to the element that floats left or right.

In the original download for PW in the styles css you have the following:

.align_left {

        float: left;

        margin: 0 1em 0.25em 0;

}

 

.align_right {

        float: right;

        margin: 0 0 0.25em 1em;

}

 

.align_center {

        display: block;

        margin-left: auto;

        margin-right: auto;

}

 

Those are the styles used in the editor which you can customise as you wish.

 

If you want to add more style information you can use JQuery to addClass to your element as part of your template.

 

I normally make sure that when  I do a template, where I am using a RTE field I wrap that in a div with a unique class or ID so I can identify things like the <a> element that is wrapped round the image and add various bits to it. So, for instance, if I were using fancybox and needed to add the class and the group attribute, I would wrap the output in a div called blog then use the jquery

 

$('.blog img').closest("a").addClass("fancybox ").attr('rel', 'group');

[opalepatrick]

Thanks a lot Joss, I thought it was a bit bizarre.

Of course, it would help if I didn't completely trash the styles.css without checking everything first. I changed it to a foundation 5 based version that I knocked up and then forgot

[Joss]

ha - if you used my foundation profile, it still had the PW specific bits in there!