[textile] Image alignment

candyman · 2007-11-06 20:23:46

I know that, using forms and CSS class, I can set the alignment of the images in the article. In this way, for example, I can set the image of a post, maybe with an excerpt, always on the left below the article post. Well, the problem arises when I try to write an article with a lot of images and different alignment. How can I set an image on the left, another on the right if, in the body of the message, using textile I can’t set the CSS class? Is there a plugin or an image selector which allows to put an image choosin’ the position of the image beside the text?

Many thanks.

Mary · 2007-11-06 20:26:04

Align it using a paragraph or span.

candyman · 2007-11-06 20:29:45

Hello Mary. Can you make an example or suggest me a resource/FAQ? Isn’t there any plugin allowing this with a few clicks?

Mary · 2007-11-06 20:41:14

Leave your left-aligned images alone (since that’s what will happen by default) and for right-aligned images, something like:

p(right). !image.gif!

.right {
	float: right;
}

A plugin wouldn’t apply to Textile.

candyman · 2007-11-06 22:09:36

I’m missing something.
The default images in my CSS are set by:

.article img
{
	float: left;
	margin: 4px 15px 5px 0;
	border: 5px solid #d4cfb7;
	background: #777;
	padding: 1px;
}

Now I added these:

.article img.center
{
	float: center;
	margin: 4px 15px 5px 0;
	border: 5px solid #d4cfb7;
	background: #777;
	padding: 1px;
}

.article img.right
{
	float: right;
	margin: 4px 15px 5px 0;
	border: 5px solid #d4cfb7;
	background: #777;
	padding: 1px;
}

.article img.plain
{
	float: none;
	margin: 0;
	border: 0;
	background: transparent;
	padding: 0;
}

But I can’t apply their effects to the images.
Is this:

p(img.right) !image.gif!

wrong?

Last edited by candyman (2007-11-06 22:10:50)

jakob · 2007-11-06 22:25:53

Try either textile with your css as follows !(right)image.gif!

or in the css .article p.right img {...} and p(right). !image.gif!

Last edited by jakob (2007-11-06 22:27:39)

Gocom · 2007-11-06 23:33:32

In other words you are using CSS wrongly. You are styling directly the image, but you are using the styling for paragraph. If you know, .article img.right is styling allowed for object in example like <div class="article"><img class="right" alt="" src="/images/01.jpg" /></div>

And because you are selected the object image in your stylesheet, you can not use it anything else than for images. So if you want the aligment for the outer object, remove img from CSS, or use following for styling:

<img class="right" alt="" src="/images/01.jpg" />

And basic floating with out class:

<img alt="" src="/images/01.jpg" />

Remember that the image have to be inside article-block

Cheers!

candyman · 2007-11-07 16:47:59

Firstly, thanks to all. I’m a little confused. The TxP default puts the image on the left side: I’m looking for an easy method/plugin/command to get the possibility to set any image on the left, center and right. Which is the better solution? According do Gocum I have to specify the class but I can’t using textile: this is my problem. Probably it’s my fault: so, can you suggest me a specific CSS tutorial to set the images alignment in TxP?

So, I have to delete all except the .article img in the CSS, haven’t I? And, then, how may I to force the images to the center or right alignment?

Gocom · 2007-11-07 17:17:10

According do Gocum I have to specify the class but I can’t using textile: this is my problem. Probably it’s my fault: so, can you suggest me a specific CSS tutorial to set the images alignment in TxP?

No, I didn’t say that you can’t use Textile, I just pointed that your CSS and XHTML output differs, and dont match. So the class and styling wouldn’t be set. I didn’t use Textile at my examples, because, I wasn’t talking about textile – but about wrongly used class and CSS.

As for textile, use !(right)images/01.jpg! – it outputs <img class="right" src="/images/01.jpg" alt="" />.

PS. TxP is TXP as Firefox is Fx and not FF… And also, Gocum is Gocom as Jukka is Jukka :D

Cheers!

Last edited by Gocom (2007-11-07 17:20:37)

Textpattern CMS

Textpattern CMS support forum

#1 2007-11-06 20:23:46

[textile] Image alignment

#2 2007-11-06 20:26:04

Re: [textile] Image alignment

#3 2007-11-06 20:29:45

Re: [textile] Image alignment

#4 2007-11-06 20:41:14

Re: [textile] Image alignment

#5 2007-11-06 22:09:36

Re: [textile] Image alignment

#6 2007-11-06 22:25:53

Re: [textile] Image alignment

#7 2007-11-06 23:33:32

Re: [textile] Image alignment

#8 2007-11-07 16:47:59

Re: [textile] Image alignment

#9 2007-11-07 17:17:10

Re: [textile] Image alignment

Board footer