Forum closed. New forum available at http://community.wymeditor.org/

How to enable Image Align in the Image Dialog?

Discuss features, code, contributions, ideas, suggestions, ...
For bugs, patches and feature requests, please post on the Trac:
http://trac.wymeditor.org/

How to enable Image Align in the Image Dialog?

Postby Harley on Sun Feb 10, 2008 11:52 am

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
Harley
 
Posts: 5
Joined: Sun Feb 10, 2008 11:45 am

Postby mr_lundis on Thu Feb 14, 2008 6:15 pm

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...
Last edited by mr_lundis on Thu Feb 21, 2008 8:15 pm, edited 1 time in total.
mr_lundis
 
Posts: 335
Joined: Sun Dec 02, 2007 10:59 am
Location: Sweden

Postby Harley on Fri Feb 15, 2008 3:02 pm

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?
Harley
 
Posts: 5
Joined: Sun Feb 10, 2008 11:45 am

Postby mr_lundis on Fri Feb 15, 2008 6:03 pm

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.
mr_lundis
 
Posts: 335
Joined: Sun Dec 02, 2007 10:59 am
Location: Sweden

Postby Harley on Fri Feb 15, 2008 6:47 pm

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
 
Posts: 5
Joined: Sun Feb 10, 2008 11:45 am

Postby Harley on Fri Feb 15, 2008 7:25 pm

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!
Harley
 
Posts: 5
Joined: Sun Feb 10, 2008 11:45 am

Solution?

Postby sitespark on Mon Feb 18, 2008 6:55 am

Hey Harley,

What was the final solution?
sitespark
 
Posts: 13
Joined: Tue Nov 21, 2006 8:59 am

Postby mr_lundis on Mon Feb 18, 2008 8:30 am

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.
mr_lundis
 
Posts: 335
Joined: Sun Dec 02, 2007 10:59 am
Location: Sweden

Postby sitespark on Mon Feb 18, 2008 11:07 am

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 :)
sitespark
 
Posts: 13
Joined: Tue Nov 21, 2006 8:59 am

Postby mr_lundis on Mon Feb 18, 2008 11:41 am

Oups, sorry for that, I'm glad you sorted things out anyway. :)
mr_lundis
 
Posts: 335
Joined: Sun Dec 02, 2007 10:59 am
Location: Sweden

Postby Harley on Wed Feb 20, 2008 7:36 pm

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...
Harley
 
Posts: 5
Joined: Sun Feb 10, 2008 11:45 am

Postby mr_lundis on Thu Feb 21, 2008 4:37 pm

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.
mr_lundis
 
Posts: 335
Joined: Sun Dec 02, 2007 10:59 am
Location: Sweden

Postby sitespark on Thu Feb 21, 2008 7:21 pm

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.

:D
sitespark
 
Posts: 13
Joined: Tue Nov 21, 2006 8:59 am

Postby mr_lundis on Thu Feb 21, 2008 7:37 pm

sitespark wrote: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. =]
mr_lundis
 
Posts: 335
Joined: Sun Dec 02, 2007 10:59 am
Location: Sweden

Postby sitespark on Thu Feb 21, 2008 8:22 pm

Quick link to Trac site pls? :wink:
sitespark
 
Posts: 13
Joined: Tue Nov 21, 2006 8:59 am

Next

Return to Developers

Who is online

Users browsing this forum: No registered users and 1 guest

cron