This is more an issue with CSS issue (I think) than the actual theme but would appreciate any help that is going. I’m new to Drupal and even newer to CSS and theming.
I have created a new content type called consultants and one of the fields is an image field. The image field is displayed at the end of the output, going with the flow. I want the image to be displayed first and the text to be indented right of it.
Would I do this with CSS, and if so how or would I have to change the output flow in node.tpl.php to suit. Could this be achieved using panels?

Here is my test site.

I want the page to look like this


Jeff Burnz’s picture

You can do this with Drupal and Pixture Reloaded:

In the Display settings for your content type move the image field to the top and set the label to hidden (like litterally drag and drop the whole image field to the top of the table, and save).

In the theme settings find the Image settings and select float image fields right


qgolden’s picture

Thanks Jeff thats very close to what I need but i would like all the text to be left side of the image. I think I may have to usee CSS margin

I reckon I need to read up on CSS and custom style sheets for Drupal. Do you know of any good sites for beginnners, w3schools seems to be good for CSS

Jeff Burnz’s picture

w3schools is ok, more a reference with examples, so its good for that, also has a tonne of good resources, and of course although its quite basic, sitepoint i think is teh best site, it really goes from beginner to super advanced, but you have to dig (huge site).

Do you mean you want the text to be in a column? E.g. the image is on the right and text on the left, and the text does not wrap around the image but rather appears like a column?

qgolden’s picture

Yes Jeff as if the text was in a column

qgolden’s picture


twelch’s picture

I know I'm piggy backing on another issue, but they are related.

I've based a subtheme on Pixture reloaded. I have my images working perfectly on about 60% of the pages using the method identified in comment #1. (Although I am using views and a taxonomy to build pages by taxonomy term if views.)

Here's my issue with the other 40% of my nodes: I want to float them right and have been having troubles doing this via CSS.

I have added a subtheme css file to leave all the theme/module css intact as shipped. Via firebug I have found a set of statements for theme image control based on (.ia-l .theme-field-image, and variations for .ia-r and ia.c) I might have the name of .theme-field-image class incorrect but I can find it again if I need it.

Anyway, am I on the right track here? I've created different image fields for each type of image, so I can select them easily enough in that respect, but it seems like the .ia-l class (which I can't find in used in the html source anywhere) is overriding things. I'm assuming it is set through php or .js.

Anyway, floating images right on a several nodes seems like a fairly straightforward thing to accomplish. Can you please point me in the right direction?

And, as you have heard lots of times before I'm sure, excellent themes.


Jeff Burnz’s picture

I would probably turn OFF all theme settings for image positioning and simply do your own CSS using the field name classes. This will potentially be easier than overriding the theme settings, which are really designed for a one-setting-fits-all approach - in short a simply but effective approach if that is all you need. In this case you need something more sophisticated, so I suggest writing this yourself.

If you want you can steal the CSS from the theme and rework it to suit your selectors - are you really using PR 7.x-2.x or 3.x, because the CSS is in different places.

BTW the reason you cannot find those classes in the markup is that they are generated in PHP when the page loads - the theme runs various checks and if you have a setting on it will add the class to the page.

twelch’s picture

Thanks for the quick reply. I will proceed as you suggest. Firebug will point me to the CSS.