Creating a list of image thumbnails without padding
2 posts by 2 authors in: Forums > CMS Builder
Last Post: March 24, 2009 (RSS)
By Kittybiccy - March 24, 2009
I'm about to start building my second CMS Builder site and I was wondering if someone could help me with the gallery section.
The client wants thumbnails that will link to Lightbox (that bit's fine, have done before). There will be several rows and columns of thumbnails but I want them to be laid out evenly across a cell. If I were to build in HTML, I'd create a table with spacer cells inbetween but I need the client to be able to add images to the gallery via CMS Builder.
In this site I built in CMS builder I used padding to create the space but it just wasn't right and the images didn't line up to the edge of the cell correctly, it also made the navigation move down slightly and not line up with the navigation on other pages because I had to use padding to the bottom of the images!
http://www.donyland.org.uk/lightbox/gallery.php
Is there a way of not using padding around the images and the client being able to add to an individual cell in a table or something similar where I have more control?
Thanks!
The client wants thumbnails that will link to Lightbox (that bit's fine, have done before). There will be several rows and columns of thumbnails but I want them to be laid out evenly across a cell. If I were to build in HTML, I'd create a table with spacer cells inbetween but I need the client to be able to add images to the gallery via CMS Builder.
In this site I built in CMS builder I used padding to create the space but it just wasn't right and the images didn't line up to the edge of the cell correctly, it also made the navigation move down slightly and not line up with the navigation on other pages because I had to use padding to the bottom of the images!
http://www.donyland.org.uk/lightbox/gallery.php
Is there a way of not using padding around the images and the client being able to add to an individual cell in a table or something similar where I have more control?
Thanks!
Re: [Kittybiccy] Creating a list of image thumbnails without padding
By Dave - March 24, 2009
Hi Kittybiccy,
So the issue is you want the images edges to line up, but you don't know in advance what size or shape the images will be. Is that right?
It's generally a bit of a tricky one and an HTML challenge. You could have a table with a fixed width and allow the columns to adjust to fit. You could also use the thumbnail sizes in the field editor to force images to a certain size.
I'd start by creating a few mockups in HTML of designs that look good even if they have a mix of landscape and portrait oriented images in them.
You could have a look at Google Images and Flickr and sites like that to see how they do it as it's a common challenge.
Anyway, the first step is creating a good html mockup that works without custom adjusted padding and then we can figure out how to replicate it with CMS.
Hope that helps!
So the issue is you want the images edges to line up, but you don't know in advance what size or shape the images will be. Is that right?
It's generally a bit of a tricky one and an HTML challenge. You could have a table with a fixed width and allow the columns to adjust to fit. You could also use the thumbnail sizes in the field editor to force images to a certain size.
I'd start by creating a few mockups in HTML of designs that look good even if they have a mix of landscape and portrait oriented images in them.
You could have a look at Google Images and Flickr and sites like that to see how they do it as it's a common challenge.
Anyway, the first step is creating a good html mockup that works without custom adjusted padding and then we can figure out how to replicate it with CMS.
Hope that helps!
Dave Edis - Senior Developer
interactivetools.com
interactivetools.com