I've added a image field to a content type. All works great, but when I add more than one image, they appear as so:

Image 1

Image 2

Image 3

I'd like for them to be as so:

image 1 Image 2 Image 3

Ie, horizontal rather than vertical.

Is there a simple way to do this? I'm guessing I need to override a theme function or something? but I'm not really clued up on that side of things.

Any suggestions?

Thanks.

CommentFileSizeAuthor
imagefield-scaled.jpg8.52 KBAnonymous (not verified)

Comments

Boletus’s picture

Boletus commented

I usually look at the source code for the page. The fields you've added have div classes like "field-your-field-name".

I add a css class to the stylesheet like:

div.field-your-field-name {
float: left;
margin-right: 20px;

}

Anonymous’s picture

Anonymous (not verified) commented
Status: Active » Closed (fixed)

Thanks!

I should of thought of the css, but was thinking of php templates. Got it now. all I need to do now I know how to overide it is work out how to re-arrange it how I want using css, I think I should be able to figure that out with a bit of reading up on css (a fair bit rusty with css).

kelly

Anonymous’s picture

Anonymous (not verified) commented

Seems i need the following for it to work, its not quite right, but it just about works how i want it.

First override the imagefield to position it where we want:

div.field-field-image {
position: relative;
padding-right: 65px;
left: 155px;
visibility: show;
align: center;
}

(i didn't want it to the left, wanted it above other items ont he page, but in the centre, hence css above)

Then, to display images inline:

div.field-item {
padding-right: 5px;
display: inline;
border-spacing: 15px 0px;
}

It could probably be done a lot better, and I'm not sure if with more than 3 images it would cause problems.

If anyone has any clearer/better css that'd achieve the above, i'd be glad to see it :)

Kelly

green monkey’s picture

green monkey commented

Kelly,
Wow, thanks big time. I have been trying to figure this out all night. Read tons of stuff that was alot harder and most of it over my head.

me likes the css approach

thanks

wallbay1’s picture

wallbay1 commented

subscribing

andrewbenkard’s picture

andrewbenkard commented

THANKS KELLY

(and my new friend css injector)

sockah’s picture

sockah commented

A very elegant solution. I thank you. I was originally looking at way more complicated means to achieve the same end.