The new Views based gallery view is completely different from the previous display. The previous display is list items, there's enough space added around the images to ensure they don't overlap, and the class names are different.
The Views based gallery doesn't enable white space between the items, and the class names are view-based rather than anything specific to the Gallery. The titles are different, and photos are overlapping each other. We could use CSS, but the module hard codes width and heights and there's no way to override these, to ensure there's enough space between. The values are more or less hard coded to exactly the thumbnail size, but not allowing for white space. The images don't align well, either.
| Comment | File | Size | Author |
|---|---|---|---|
| #9 | 564488-image_gallery-add-item-size-setting.patch | 6.9 KB | joachim |
| #8 | 564488-image-views-li-classes.patch | 2.08 KB | joachim |
Comments
Comment #1
joachim commented> The Views based gallery doesn't enable white space between the items,
Could you explain what you mean?
> the class names are view-based rather than anything specific to the Gallery.
That we're stuck with I'm afraid. It's the price of the power of views. But the view name is in the main DIV so you can select on that.
> The titles are different
Same again -- no more H3s unfortunately.
> the module hard codes width and heights and there's no way to override these
Could you explain please? If this is in image_gallery then we can do something about it.
Comment #2
shelleyp commentedIf you update to the newest module, the gallery display is different. Longer images tend to overlap those below.
I changed the view display type from Gallery to Grid, and this seemed to eliminate the overlap problem. Perhaps it needs to be set to Grid display, by default. This could be a Views change along the other bug I submitted, to turn on Paging by default.
PS Here's a page where the problem had occurred.
http://missourigreen.burningbird.net/image-galleries/missouri-botanical-...
The longer, vertical photos were overlapped by the photos in the row below when I updated the Image module. It was only after I changed to Grid that I prevented this overlapping.
Comment #3
joachim commentedThe intention is that gallery display type is an improved version of the old hardcoded gallery layout.
Grid display is table-based, so I don't recommend it.
Depending on your image size you will have to use css to get the layout right.
Comment #4
joachim commentedI had a look last night, and yeah, the hardcoded 150px should definitely be killed.
That should make things better at least -- can you give it a try with your images please?
Furthermore, I reckon we can get the actual dimensions of the image derivative in use into the views template -- they'd be in the LI elements as style properties.
Comment #5
joachim commentedThis will probably not make it into the 1.0 release as fixing it properly will require a new views handler where you can set the size yourself.
You should override the CSS in your theme.
Comment #6
shelleyp commentedI just updated to the newest release and switched to Gallery view. The overlap problem was back.
The real problem that I can see is that the li element you're using to wrap both the image thumbnail and the title is not being given a class name, so you can't style the element, easily. You'll have to use a variation of child selectors to access the element for styling. It seems like you had intended to provide a class name, because the display shows:
< li class="">
I'm assuming not providing a class name is a bug. I'll leave the description here, though, rather than start a new issue. In the meantime, the following CSS seems to fix the problem for me:
.view .image-gallery-nodes ul li
{
width: auto;
height: auto;
}
I use the height and width set to auto to override the hard coded 150 pixel height and width in the image.css. This allows the element to size according to the image. People could also add specific sizes, too.
Once that's set then I can add padding to bring back white space. So this seems to be the key element for styling and the display looks good now with the mods.
Thanks.
Comment #7
shelleyp commentedComment #8
joachim commentedGood catch!
I'd forgotten to get the variables for the template.
This patch fixes that at least -- your LIs now have interesting classes.
Leaving this open as I plan to have the width and height options settable in the Views UI.
Edit: Oops. That patch is slightly wrong, was working on image attach at the same time. Committed that patch without the image attach change!
Comment #9
joachim commentedThis patch adds an option in the Views UI to set width and height on the LIs made by the Gallery style plugin.
It injects them as element style properties in the resulting gallery list.
This is less than ideal CSS as you can't very easily override it in the stylesheet -- only with !important rules. However, since you're presumably also the theme CSS author, you can balance this out.
The alternative approach I considered was writing a CSS file to the files directory when the options are saved, in the same manner as color.module.
I would definitely like this patch to get some testing done before I commit it -- see http://drupal.org/patch for help getting started with patching.
Note: your views cache will need clearing after applying this patch.
Comment #10
joachim commentedJust to say that markus_petrux has taken this code forward and released it separately as http://drupal.org/project/views_fluid_grid.
Try the release there! :)
Comment #11
sunGiven that (a different) Image module is in Drupal 7 core, the contrib Image module remains minimally maintained now. It won't see any new features. Instead, we're trying hard to make upgrades to D7 work. See project page for details. Thanks!