Hi,

I use:
CCK 6.x-2.1
ImageCache 6.x-2.0-beta2
Views 6.x-2.1

When image uploaded, the thumbnails appeared in the nodes, but sorted vertically..

I want it to be appeared horizontally
(The thumbnails filling the top left, followed on the right)

I have tried the Views module. There is available the option, but still not works.

Anyone can help how to do that?

(You can see the "Additional Images" in the attachment)

Thanks in advance

CommentFileSizeAuthor
10101010.jpg21.76 KBapasaja

Comments

sphoenixee’s picture

sphoenixee commented

I am interested in this as well. It seems to make more sense to have thumbs sorted out horizontally than vertically. Is there some way to do this without Contemplate or editing the tpls?

gallamine’s picture

gallamine commented

I've just been messing with this using CSS, but I can't get it to work (mostly because I'm CSS clueless). I think it has to do with the fact that each image is enclosed by its on < div > tag.

twod’s picture

twod
Primary language Swedish
Location Sweden
commented

A quick test seems to suggest that using float: left in Views on the classes field-item and views-field-title might be a starting point.

Anonymous’s picture

Anonymous (not verified) commented

Use the following CSS to make the images go on the same line next to each other:

div.view-[view-name] div.views-row-odd,
div.view-[view-name] div.views-row-even {
  float: left;
}

(Substitute [view-name] for the name of your view)

You'll might also want to either add 'clear: both;' to an element that comes after the images (to stop the floats), or add the class 'clear-block' to one of the divs surrounding the images.

green monkey’s picture

green monkey commented

hi gang I'm trying to do the same --- but not in a view

I've tried below - neither works

div.field_ssimage {
display: inline;
float: left;
overflow: hidden;
margin:10px 10px 10px 10px;
border:1px none #ffffff;
}

div.field-field_ssimage {
display: inline;
float: left;
overflow: hidden;
margin:10px 10px 10px 10px;
border:1px none #ffffff;
}

thanks

Anonymous’s picture

Anonymous (not verified) commented

Are you able to post links to the site(s) in question so we can assist you better?

green monkey’s picture

green monkey commented

Thank you so very much - but I finally got it ! :-)

took me all day to finally understand that I needed to adress the actual image along wiht the fieldname

The below is working great

div.field-field-ssimage img {
display: inline;
padding: 3px;
background-color: #ccc;
border: 1px solid #ccc;
float: left;
margin: 5px;
text-align: left;
}

note for ref: ssimage is my CCK field or machine = field_ssimage - not sure why it is field-ssimage in CSS and field_ssimage in CCK

blackdog’s picture

blackdog commented
Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

dan.crouthamel’s picture

dan.crouthamel commented
Version: 6.x-3.0-alpha2 » 6.x-3.0-rc1
Status: Closed (fixed) » Active

Is it just me, or did this css image tweak to layout the photos horizontally stop working after 3.0-rc1? :)

Anonymous’s picture

Anonymous (not verified) commented
Status: Active » Fixed

The ImageField module possibly renamed some classes in the later releases, which would cause the above code to stop working.
Simply change the code to reflect the current class names and it should work again.

dan.crouthamel’s picture

dan.crouthamel commented

No change to class names that I saw. I moved the css override code to filefield.css and it works fine now :)

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

ElvinJones’s picture

ElvinJones commented

Hi,

im also trying to fix this. Which CCS file did you edit to make this work and where did you find it ?

dan.crouthamel’s picture

dan.crouthamel commented

I made the change in filefield.css, which is in the filefield module, not imagefield.

Dreher’s picture

Dreher commented

I cannot make this work and have tried applying the above code to both the filefield.css and imagefield.css. Can anyone help me? I have replaced ssimage with image (my field name)

Thanks.

Dreher’s picture

Dreher commented
Status: Closed (fixed) » Active
Dreher’s picture

Dreher commented
Version: 6.x-3.0-rc1 » 6.x-3.2
quicksketch’s picture

quicksketch
he/him
commented
Status: Active » Closed (fixed)

Support for theming isn't provided in the ImageField queue. You shouldn't be modifying the CSS file that comes with a module, ever. Make you changes in your theme's style.css file, make sure you adjust it to actually match the name of your field.

dan.crouthamel’s picture

dan.crouthamel commented

Dreher - I'm using the Colourise theme and can place css overrides in a custom.css file. Check if you theme allows for something similar.

bmoorefree’s picture

bmoorefree commented

Worked like a charm. Thank you, I was on the right track, but you made it so simple. :)

tpainton’s picture

tpainton commented

Thank you so much. Spent the last hour trying to find the right selector for this. Firebug was deceptive.

summit’s picture

summit commented
Status: Closed (fixed) » Active

Hi, Tried it but still can't get horizontal images using views and imageviews.
Couldn't there be an option in imagefield to select horizontal,
if not could someone please show by 1 by 1 steps how to get this working?
Which file to change, what to change there. I am using Ubercart products with imagefield.
Thanks a lot in advance!
Greetings, Martijn

quicksketch’s picture

quicksketch
he/him
commented
Status: Active » Closed (fixed)

See #19.

Anonymous’s picture

Anonymous (not verified) commented

Regardless of how the images are displayed (in a multi-valued imagefield in a node, in a view, etc.), you can easily display them side-by-side with CSS.

Firstly you need to see what the CSS class of the images is. I use Firebug to do this: simply look for a collection of tags (usually divs) that all have the same class name (see attached screenshot for an example). In my example, I can see that all my images have a class of 'field-item', so I can use that to refer to all the images at once. You'll know when you find it as hovering over one of the tags in Firebug will highlight the image on the page.

Once you know the class name, the rest is easy. Simply add some CSS to your theme (the .css file you edit will depend on what theme you're using) as per the following:

div.field-item {
    float: left;
    margin: 0 0.5em 1em 0;
}

The margin can be whatever you like, I just like to space the images out somewhat.
You will also probably want the CSS to be more specific (as the above CSS will affect all field items site-wide).

That's it; find the CSS class of your images, then add some CSS you your theme that floats those images left, easy! :)

coffeenmusic’s picture

coffeenmusic commented

When I do this, it works, but my images fall into the comment section and no amount of padding or margin seems to prevent this. Does anyone have an idea of why my images would fall out of the body into the comment section?

coffeenmusic’s picture

coffeenmusic commented

I decided to just go with a view and then filter by the images on the current page. If you want to do the same thing in D7, in views go to contextual filters and select "Content: NID" and then select "provide default value" and then select from the drop down type "Content ID from URL". That will filter to whatever is on the current page. Then I just made the original page images hidden under Content Types - Manage Display - Format (Hidden). Then I added the view as a block to the page. Hope this helps someone else although it is a little off topic.