How to enable Image Align in the Image Dialog?

[Harley]

Hi,
I want to have the feature, that I can decide what image align, inserted images should have. So i thought, i could create a Formular field in the image Dialog where I can enter what align the image should have....
So I enter "right" and then in the code should be the align="right" inserted...
But it didn´t worked...
I got the formular field to appear, but when i entered "right" and clicked "submit" and then watched the code, there was no align="right"

Can anyone tell me, how it is possible to become this into the image code? Because I think it is much nicer when the image is integrated in the text...

Mfg Harley
PS: Sorry for my bad English I'm German

[mr_lundis]

Adding the input field alone wont do the trick, because the WYM source code will ignore your extra input. The align attribute isn't allowed in XHTML strict anyway.

If you want to add an extra attribute you'll need to edit the WYM source so that it'll take your extra input into consideration.

Some kind of functionality to add attributes on the fly, so that you don't need to edit the source, would be nice. Like the (extended_)valid_elements functionality in TinyMCE. I think that I'll make a feature request for this @ the tac site, and if I have time make a basic plug-in or patch for this.

For those of you who are curious about the valid_elements functionality in TinyMCE, take a look:
http://wiki.moxiecode.com/index.php/Tin ... d_elements

Edit: It seems like the new xhtml parser implements (some of) this functionality already. However, the xhtml parser itself isn't used in the "real" editor yet because it's somewhat experimental...

[Harley]

I didn´t just add the Input field, i also changed the sourcecode...
But I´m not a programmer i just copied the lines that looked like the "imagetitle" code, and changed them a little, so that i thought that they should work. but they didn´t...

When the align attribute isn´t xhtml strict, what else can i use, that has a similar function?

[mr_lundis]

You'd preferably create a couple of classes, left, right and optionally center.

Code: Select all

.left, .right, .center { display: block; }
.left { float: left; }
.right { float: right; }
.center { margin-left: auto; margin-right: auto; }

Just apply these onto the element(s) you wish to align (you can use the WYM class selector for this) and you'll be fine.

If you have problems with elements that don't float (align) properly, then you might want to clear your elements to. Depending on how you wish to handle things you can add something like left-clear and right-clear classes for this, or just use the classes above for clearing.

[Harley]

ok, i think this is nearer to the soulution of my problem.

I use Wymeditor as a drupal module...
I added the classes to my themes .css file. in the wymeditor module for drupal you can add classes and containers right from the backend, so i createt a new class "left"
when i edited now a site, and added the class to a image, it worked well, BUT: now my whole site is on the left side od the screen.... how can I change that? I tried to create a new conatiner only for images and made the class "left" only for this container available, but the editor didn´t really could manage that, and my site was again on the left site of the screen...
what is my mistake?

great thanks until now, you helped a lot.

[Harley]

Now I understand how it works.
Everything´s fine now.
Here is the result:
http://www.haustiere-net.de/hamster
Now the image is on the right site, and around the image is text, and i don´t have to add manualy code into the source code.
i´m very glad now

mr_lundis, thanx for your great help!

[sitespark]

Hey Harley,

What was the final solution?

[mr_lundis]

Hi sitespark, sorry for my late reply. Do you have a link or something so that I can take a look at you code? The error may not lie in your WYM implementation but in the css itself.

[sitespark]

I didn't have a problem, was just wondering what Harley did to resolve, i've found the WIKI re: CSS alogn attributes/mods and will try that. Thanks

[mr_lundis]

Oups, sorry for that, I'm glad you sorted things out anyway.

[Harley]

The solution for me was:
I edited my css file, and added this:

img {border: 1px solid #000000;}
img.l {float: left; margin-right: 5px;}
img.r {float: right; margin-left: 5px;}

Then, when you use WYMeditor as a Drupal module, you can add new classes. I did this, called the one "l" and the other "r". I clicked that this classes are only available for the container "IMG"
Now, I can add images and then i click one of the classes, and then the Editor adds a class="r" / class="l" to the image code. this works for me, bur I don´t know if there are better solutions, I´m not a coder...

[mr_lundis]

You could also - if you want, add some align buttons to the toolbar. There is more info about extending the toolbar at the trac wiki.

[sitespark]

I thought the simplest, and a completely intuitive option, for aligning images would be to apply the styles above (L or R) to an image WHEN SELECTED to the existing txt align buttons : LEFT, MIDDLE, RIGHT (im assuming a 'wrap' style would be possible, to place image inside txt, although it would be rarely used). I.e. when the IMAGE is selected the behaviour of the TXT align buttons is changed.

This would make sense to even the most novice of user, and would be good as default WYM behaviour.

[mr_lundis]

I thought the simplest, and a completely intuitive option, for aligning images would be to apply the styles above (L or R) to an image WHEN SELECTED to the existing txt align buttons : LEFT, MIDDLE, RIGHT (im assuming a 'wrap' style would be possible, to place image inside txt, although it would be rarely used). I.e. when the IMAGE is selected the behaviour of the TXT align buttons is changed.

This would make sense to even the most novice of user, and would be good as default WYM behaviour.

Post a feature/enhancement ticket at the trac site for this, so that we may see this feature in future versions of WYM. =]

[sitespark]

Quick link to Trac site pls?