By dagorian on

I have installed CCK and the image field module. I'd like to be able to choose whether to align my images left, or right and have the content flow around them.

I've tried doing this in the teaser template section but nothing I do seems to affect the image alignment. Everything just gets stacked.

I'd like to have:

_____
| | Title of Post
| | subheader
| | content.......
|_____| .....................
.................................
..................................

Whereas right now everything is just stacked on top.

I'm confused as to what/where I edit to get this to happen?

Also, I'd like the option of aligning the images to the right?

This doesn't seem like a bizarre request and I've spent hours searching to no avail.

any ideas?

thanks

dag

⋅ Categories: Drupal 5.x

Comments

dagorian’s picture

dagorian commented

it seems I can't edit comments, but that ascii diagram should show an image on the left and everything wrapping around it, not over it.

______
|........| Title of Post
|........| subheader
|........| content.......
|_____| .....................
.................................
..................................

ack, even that looks wonky - where's the 

 tag! oh well, hopefully you get the idea
marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

Yes, I think I get the idea. But... I doubt if you should do this with CCK. One of the basics of modern webdesign is the seperation of content and presentation. CCK is all about content, but the alignment of images is presentation. Are there specific reasons why you want to control layout as if it were part of the content? Can't you do it by css, or in the template?

[offtopic] You can edit comments, but you can't edit the original post. Don't ask me why. [/offtopic]

AndiS’s picture

AndiS commented

I'd use css.
Look into the sourcecode of your browserpage (eg. with firebug, www.getfirebug.com ), find out the class of the img tag or its container. Add "float:left;" to that in your theme's style.css
Add "clear:left;" to the next tag that should not float around the image, eg. the next post.

dagorian’s picture

dagorian commented

I found the source of the page used the CSS class "field-item" - is this a user accessible CSS class? It was nothing I created so I'm assuming CKK must have done it. Would it be a no-no to go in and muck about with this?

In fact, after checking all the imported CSS files I can find no 'field-item' class.

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

In fact, all CSS is 'user accessible' as you call it. Anything in your source code can be referred to by using the tag, id and class names of the element and its parents. It doesn't really matter if the system defined a style for field-item already, because you can just override it in your template's style.css.

If something is styled, but you don't know in which css file, try using Firefox with the Firebug plugin. When you have Firebug enabled, you can just click any element in a page and check out its css rules and in which file they are located.

tdimg’s picture

tdimg commented

There's a themes folder in the cck module, check it out for documentation on how to theme cck fields and content types.

That way you can layout the specific content type of yours that includes the image whatever way you like it, add whatever html* and css classes and ids you like, use those ids and classes in your style.css to get the exact layout we want to achieve.

If you need to know more, come back after having read the documentation.

* Except don't use tables for presentation, use divs.

The thing about the option about aligning them to the left or right. While it has been said it's not a perfect solution to having this set with cck, here's a suggestion:

Create a new text-field, let this be a select list, call it image alignment, two allowed values, left and right, once saved set left as a default value. No in combination with the above cck customisation, you could use a little php to check the value of this field, and depending on that you add a css class to the image div.

ha5bro’s picture

ha5bro commented

I got around this by using a text field for my attached image. I installed tiny-mce, changed the input rows to "7" which then gives the field a tiny-mce editor that you can use along with imageassist module which allows you to float images left or right. Hope that helps.

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

I just thought of this: you could also add two cck image fields, 'left-image' and 'right-image', and set up your css so that one is aligned left and the other is aligned right. Then you can choose the alignment of your image by choosing the image field.

ha5bro’s picture

ha5bro commented

Yeah, that would work and you could also set up a CCK field to insert some inline css to tell the image to float right or left. The Contemplate themeing extension for CCK makes that pretty simple.

dagorian’s picture

dagorian commented

Thanks for the ideas - I actually just made 2 content types, one for left and one right. Then I added two classes to style.css called field-item-left and field-item right. So in my contemplate teaser code I use:

div class="field-item-left" followed by the php code to add the image

My question now is, The title is always above the image and it doesn't seem like there's any way to control this. I'd like to have the image at the top and the title aligned at the same level, either to the left or the right. I'm confused whether I need to do this in page.tpl.php or in the teaser section of contemplate?

I want it to be (for the left aligned one)

IMAGE--Title
--------Subheader
--------Content
--------Content Continued etc...

demon326@drupal.org’s picture

demon326@drupal.org commented

do you mean something like this:
http://ashladan.be/review/legion-of-damned-feel-blade
(scroll down untill you see the + and - :)

the code for that:

/** review sterke punten **/
 .sterke-punten{
 /*h3*/
 padding-top: 6px;
 padding-left: 40px;
 padding-bottom: 8px;
 background:url(icons/plus.png)  no-repeat;
 }
 
 /** review zwakke punten **/
 /*H3*/
.zwakke-punten{
padding-top: 6px;
padding-left: 40px;
padding-bottom: 8px;
background:url(icons/min.png)  no-repeat;
 }

note: like you see i'm using the image next to the title cause of the H3...

dagorian’s picture

dagorian commented

not really demon326 (nice site though)

what I mean is that the 'title' field seems to be put in automatically at the top, then everything else afterwards. The variable in question is $node->title ** (the 2 stars indicate that i need to wrap in something but I've tried that and nothing seems to change.)

What I really need is to be able to place $node->title anywhere I want so that my image, which floats left will be flush with the top of the div, and everything else, title, subheader, content, links etc.. will be on the right. As it is now, the title is always flush on the top/left - after that everything behaves as per the layout.

slight variation of what i want, showing top of div:

<--top of div-->
IMAGE--Title (these 2 are on the same 'line') (repeated IMAGE is same image showing flow)
IMAGE--Subheader
IMAGE--Content
--------Content Continued etc.
<--bottom of div-->

omnyx’s picture

omnyx commented

yeah...I also want the top part of the image to align with the title. I think the issue is in node.tpl.php. Title and other things are printed before the $body and your cck image is part of the $body so it would naturally align with everything within the $body but not the title, taxonomies, etc...
i tried with this code here but it didn't work for me: www.drupal.org/node/114430

ilyushkin’s picture

ilyushkin commented

I have installed CCK and Vote up/down Package which has Storylink module in it. For some reason I cannot manage existing fields in Storylink . The weight is fixed in it. I'm trying to align images on the left side next to the each node (right after the voting widget).
Here how I added to the storylink.tpl
---------------------------------------------------------------

print $node->nid; " class="node storylink clear-block print ($sticky) ? ' sticky' : ''; print (!$status) ? ' node-unpublished' : ''; ">

print $picture

print $storylink_url "> print ($seqid) ? $seqid .'. ' : '' print $title

print $vote_storylink_via
print $vote_up_down_widget

// MY IMAGE

print content_format('field_first_name', $field_first_name[0]);

print $content
print $submitted
if ($terms):
| print t('Tags') : print $terms
endif;

if ($links):

» print $links

endif;

----------------------------------------------------

However the image still not on the left :(
Even after I put it inside div like this:

// MY IMAGE

print content_format('field_first_name', $field_first_name[0]);

Still not right :(