How to display a Node Gallery in a grid?

Here you are, that should display images in gallery nicely:

.gallery-images-list {

  overflow: hidden; /* clear floats */

}

.gallery-images-list li {

  float: left;

  width: 24%; /* you can adjust this to your theme */

  min-height: 190px; /* if you use long titles which will be displayed under pictures some pictures may 'stuck' and not go to left, try lower value and you will see what I mean */

}

.gallery-images-list .image-thumbnail a {

  display: block;

  text-align: center;

}

.gallery-images-list .image-thumbnail img {

  margin: 5px;

}

Cheers

Hi

Could anyone explain where to put this code excacly and make it all work.

Thanks m8.

This is only css, so you have to put it in style.css or whatever is your file called.
If you have custom theme then you should have also css file, you can stick it at the bottom.

If you use Garland theme which is default you can hack 'themes/garland/style.css' file, but better practise is to copy whole 'garland' folder to 'sites/all/themes/' and then make necessary changes to style.css file.

I hope that helped :)

Thats perfect :)

Thanks for the lesson.

Thanks for the code. It works also with version 2 of this module.

I recently stumbled upon interesting article how to display images in a grid using css (compatible with all browsers) ->here it is <-

I'm opening this in hope anu css guru will help:
I can add anything to ".gallery-images-list ul li" , but not all changes have influence on display.
In my theme (acquia marina) there is one more container below, which overwrites bullets behaviour.
example page source looks like:

<div class="gallery-images-list">
  <div class="item list">
    <ul>
      <li>
     .... (and so on)

"item_list" comes from theme and provides image as a bullet. The result is like in screenshot - neither "list-style-type: none;" nor "list-style-image: none;" in "gallery-images-list" class works:-(
(of course I don't want those green bullets on the gallery images)

any advice?..

That should work:

.gallery-images-list .item list li {
  list-style: none !important;
}

..but, unfortunately, it does not work:-(
my item_list class uses background to set bullet, I've checked in Firebug that adding "background:none;" inline to specific "li" element removes bullet, but if I enter it in css file in the way you proposed, nothing changes

There is a mistake, sorry @cycu!

.gallery-images-list .item li {
  background: none !important;
}

There shouldn't be "list" as it's a separate class.

@Plazmus:

item_list is a separate class, there's no item class, but...
finally got it, after adding "background: none !important;" to ".gallery-images-list .item li" from your #2 comment above:

.gallery-images-list li {
  float: left;
  width: 14%; 
  min-height: 190px; 
  background: none !important; 

works in latest Chrome, FF, Opera, IE
Great!

now you could use views to display gallery in grid style...

Dear Wilson,

I used views with node_gallery to display in grid view. However, I found that all of my gallery images from all galleries would be displayed. I would like to filter accordingly to galleryid. But it seems this is not yet supported?

Regards,

Warren.

Hi,

I wanted to display a list of galleries using views - however, I could not make it work.

Is views integration working for this module?

I can make the galleries appear using node teasers - but I wanted to use fields and display only the first image for each gallery. What fields do I use?

- Also, how do I theme a node gallery? which template file to use?

Thanks

using gallery id as argument or filter to display only images within one gallery.

the view is a list of galleries. However I don't want to use the teaser view. I needed to use fields instead of the node view. I tried using the Node Gallery Image as fields for the view, but what I get is an empty view.

I have attached a screenshot of the problem.

there's two view type in node_gallery views integration, the "gallery view" and the "image view", if you want to display galleries, use the "Node Gallery Gallery" group's fields, arguments and filters, if you want to display images, use the "Node Gallery Image" group's fields, arguments and filters.

I understand you h300 (#17), because I had the same issue.
Please, take a look to attached file.
Good luck!

Do I have to load this default views can not find this views

@Plazmus: Thx! Your css works just fine!
@all: By installing and enabling the CSS module (http://drupal.org/project/css), authorized users can alter the appearance of the webpage of each gallery and/ or image by inserting some additional CSS (which will be stored in the db).

Dear Wilson,

I am using Node Gallery 6.x-2.0-alpha10. Gallery id does not appear as a filter in views.

Regards,

Warren.

Warren,
Please open need tickets for unrelated issues.

#9
no
.gallery-images-list .item list li {
list-style: none !important;
}
but
#9
.gallery-images-list .item-list li {
list-style: none !important;
}

just to add a note for people that view this thread:
this is in the handbook at
http://drupal.org/node/544748#cssgrid

Is anyone else having trouble with this in Alpha 11? I have changed three different CSS files hoping one would help, but I have not had any success. Any thoughts?

Actually, looking at the source code, it looks like it may have something to do with the imagecache settings...any help would be great,

@frank0051, can you provide more details please.
what theme are you using and which css files are you changing?

Sure, I changed style.css in my theme, and I also changed a color css file for my theme (it has a red.css), and the node_gallery.css file.

You can go to the photo gallery here: http://www.croomsalumni.com/node/100

I am going to play with the caching settings a little bit, but I am not sure that is it.

I am using Alpha 11 and I have Drupal 6.15

Interesting, it actually seems to be related to the Optimize CSS feature in the Drupal performance settings. I am going to clear my site cache; that should solve the problems.

Alright I think I got it; should have realized this problem last night; always reset the cache.

@frank0051, Looks great.
Some more cool settings are in lightbox2.
administration > Site Configuration > Lightbox2 > General
In the advanced section > Overlay settings
Overlay opacity and Overlay color. I have my test site set to 0.5 opacity and color #852A3B(a sort of red)
It looks cool.. check it out, davebeall.com/node-gallery-gallery2/old-buckeye-lake-park

Hey guys, the grid was working pretty well up until the last month or so. Now, the teaser doesn't seem to be working correctly anymore. For some reason the test just runs right along side the images rather than being below the test. Any ideas?

see http://www.croomsalumni.com - it should be the top news post.

For any one having problems with the CSS from Plazmus, I had to copy and paste it into the CSS file in the Node Gallery module folder - it finally worked.