Recently I've written about correct HTML and how to avoid <table>s in your layout. One could argue, that the WebYep ImageGallery violates the principles discussed there, but when you want to display your content tabularly, this is the way to go. It also is quite practical, since floating many Images might lead to problems with the layout. After all, floated content takes no actual space in the parent container and when there is a variable amount of pictures, you'd need additional markup to ensure correct layout.
Sometimes you'll have a long description for your images, which will result in irregular text blocks beneath each image. Leaving the description field blank would solve this problem in the overview, but then you'd have no descriptions at all. There is of course a better way to do this, thanks to CSS.
Each layout element of the WebYep ImageGallery has its CSS class assigned. In case of the image caption, this is WebYepGalleryText
1 so a rule like the following will do the trick:
.WebYepGalleryText { display: none; }
The captions are gone now, but how do we know now where we've entered text? Clearly that's inconvenient as well, so we'll need another rule, that will show us the captions in edit mode:
.WebYepGalleryImage + div + .WebYepGalleryText { display: block; }
The trick is that in edit mode WebYep adds an additional <div>
for the controls between the image and it's caption, so we can use the adjacent sibling selector to address the caption in edit mode only.
As long as all your images are the same size and have the same aspect ratio, you'll be fine without special styles for the gallery. But when you (or more likely, your customer) want to add images both portrait and landscape, you should do something about the alignment, or it will look weird.
Let's look at an example. We want to style the following WebYep ImageGallery element:
<?php webyep_gallery("Gallery", false, 90, 90, 5, 600, 700, 120); ?>
Nothing special so far: a gallery with 5 rows, thumbnails that are max. 90×90, 120 pixels per column and the images shall be zoomed to max. 600×700 pixels. When finished, it shall look like a bunch of square slides.
The first thing we want to do, is center the images horizontally and vertically. For this we add the following rule to our stylesheet:
.WebYepGalleryContainer td { vertical-align: middle; text-align: center; }
The images are now centered, but the first thing we note is that each table row now shrinks to the size of the tallest picture in this row. The problem becomes visible, when we add a border to the cells:
.WebYepGalleryContainer td { border: solid 1px #aaa; vertical-align: middle; text-align: center; }
Clearly this is not what we want, so we might be tempted to add a padding to the cells. However, this would be a bad idea, because some browsers won't calculate the height correctly. That's why we make sure, padding
is set to zero:
.WebYepGalleryContainer td { border: solid 1px #aaa; padding: 0; vertical-align: middle; text-align: center; }
The tall images still touch the surrounding cell and the table rows are not the same height. To correct this, we have to add another rule, that forces the table cells to appear equally tall:
.WebYepGalleryContainer td { border: solid 1px #aaa; padding: 0; height: 120px; vertical-align: middle; text-align: center; }
Now that's more like it. All cells now have the same height and we can move on to our last task.
Now that our cells are nice squares, we just want them to have some space between them. The margin
property won't work, but there is a solution for this: border-spacing
applied to the table
element will do the trick2.
.WebYepGalleryContainer { border-spacing: 20px; }
One last thing is irritating and that's the empty cells (in case you haven't added a multiple of 5 images). CSS of course has a solution for this:
.WebYepGalleryContainer { border-spacing: 20px; empty-cells: hide; }
And that's it for today. You can download an example WebYep page and try different stylings. In the example I've used some of the new CSS3 features like box-shadow
. Not every browser will understand this and so the page will look slightly different. However, in modern browsers this will produce a nice effect. Create & have fun.