CMS Website Photo Menu Solution
September 30, 2011 9:42 AM Subscribe
Please help me figure out if a CMS website we would like to do is feasible.
A business I am part of would like to make a website that functions similarly to this site:
http://arteriors.com/modern-house-design-custom-homes.php
The images enlarging on mouse over is not important, and the ability to scroll through images isn't particularly important either. What important is having 16 images in a table that can be clicked on to show the enlarged version of the image alongside the table of images.
I've set up plenty of Joomla and Drupal websites before and could do what I'm asking in HTML, but this website ideally needs to be in a CMS system, and I don't really know much about PHP or the like, so I'm kind of dead in the water.
Is there a simple extension somewhere that I'm missing or anything like that? This extension is almost exactly what we want: http://www.bretteleben.de/lang-en/joomla/css-gallery.html
Except we don't want the thumbnails under the image; they need to be to the left.
We're happy to purchase something, so it doesn't need to be free (or even particularly cheap).
A business I am part of would like to make a website that functions similarly to this site:
http://arteriors.com/modern-house-design-custom-homes.php
The images enlarging on mouse over is not important, and the ability to scroll through images isn't particularly important either. What important is having 16 images in a table that can be clicked on to show the enlarged version of the image alongside the table of images.
I've set up plenty of Joomla and Drupal websites before and could do what I'm asking in HTML, but this website ideally needs to be in a CMS system, and I don't really know much about PHP or the like, so I'm kind of dead in the water.
Is there a simple extension somewhere that I'm missing or anything like that? This extension is almost exactly what we want: http://www.bretteleben.de/lang-en/joomla/css-gallery.html
Except we don't want the thumbnails under the image; they need to be to the left.
We're happy to purchase something, so it doesn't need to be free (or even particularly cheap).
The thumbnail list positioning is typically (or preferably) controlled by CSS, so that might not actually be a dealbreaker on that one.
posted by rhizome at 10:22 AM on September 30, 2011
posted by rhizome at 10:22 AM on September 30, 2011
Does the image gallery need to be controlled by the CMS or would it essentially be static? This would be pretty easy as long as you don't need to swap the images around using the CMS's GUI.
posted by The Lamplighter at 10:36 AM on September 30, 2011
posted by The Lamplighter at 10:36 AM on September 30, 2011
Your reference site is probably using some kind of gallery plugin with a javascript add-on
In this case, they're using flash. Its possible that someone has written a gallery plugin that does exactly what you want but in the time you're going to spend trawling through them all, and testing the promising ones you could just hire a real developer to whip one up in a jiffy. This sort of thing would be fairly simple to do in drupal.
posted by missmagenta at 10:39 AM on September 30, 2011
In this case, they're using flash. Its possible that someone has written a gallery plugin that does exactly what you want but in the time you're going to spend trawling through them all, and testing the promising ones you could just hire a real developer to whip one up in a jiffy. This sort of thing would be fairly simple to do in drupal.
posted by missmagenta at 10:39 AM on September 30, 2011
I've been looking at portfolio themes for Wordpress lately and I'm sure I've seen one similar to this using jQuery - have a look through WooThemes, ThemeForest, etc and some of the "best themes of 2011" type posts (and I'll trawl through my bookmarks when I get home).
posted by humph at 10:52 AM on September 30, 2011
posted by humph at 10:52 AM on September 30, 2011
Best answer: I roll my own CMS galleries like this all the time in Wordpress. Typically, I grab a free jQuery plugin I like, then create a custom template, replacing all the static IMG tags with a Wordpress loop. It's typically very easy, only a few hours work, most of that spent fine-tuning the layout and checking things cross-browser. But it is developer-level work.
The hardest part is usually getting the images in the sizes you want. Many users, when given a CMS for photos, will just plunk in photos directly off the digital camera. That means a horizontal aspect ratio for the most part, no color correction, and no nice cropping.
To combat this (assuming the user refuses to do any image pre-processing and is ok about crops being done programatically), I'll run an image through GD, which is basically a PHP library for server-side on-the-fly image manipulation. If your CMS or client is already smart about getting the images in the correct aspect ratio, then that's one less hassle.
Looking at your sample, your plugin uses GD, so presumably will allow you to have vertical orientation images (Assuming you even need such. Maybe the 16 images are all horizontal? It's mostly important just to keep them consistent.). You could probably hack around in CSS to get the look you want. It looks like the thumbnails and large image containers could be floated next to each other.
The developer in his comments specifically says this isn't possible, but I'd be skeptical; he just may be saying that his code options don't explicitly support it and that you'd have to muck around with CSS to get the result you want. (He does suggest this plugin for built-in support of that kind of layout.)
I'd also be concerned about keeping your number of images to 16. A lot of carousel-like galleries like this will either happily scroll infinitely, or stop at some arbitrary number. Your plugin seems to be capped at a certain limit, but that is probably just a variable somewhere you could easily change.
posted by Wossname at 11:14 AM on September 30, 2011
The hardest part is usually getting the images in the sizes you want. Many users, when given a CMS for photos, will just plunk in photos directly off the digital camera. That means a horizontal aspect ratio for the most part, no color correction, and no nice cropping.
To combat this (assuming the user refuses to do any image pre-processing and is ok about crops being done programatically), I'll run an image through GD, which is basically a PHP library for server-side on-the-fly image manipulation. If your CMS or client is already smart about getting the images in the correct aspect ratio, then that's one less hassle.
Looking at your sample, your plugin uses GD, so presumably will allow you to have vertical orientation images (Assuming you even need such. Maybe the 16 images are all horizontal? It's mostly important just to keep them consistent.). You could probably hack around in CSS to get the look you want. It looks like the thumbnails and large image containers could be floated next to each other.
The developer in his comments specifically says this isn't possible, but I'd be skeptical; he just may be saying that his code options don't explicitly support it and that you'd have to muck around with CSS to get the result you want. (He does suggest this plugin for built-in support of that kind of layout.)
I'd also be concerned about keeping your number of images to 16. A lot of carousel-like galleries like this will either happily scroll infinitely, or stop at some arbitrary number. Your plugin seems to be capped at a certain limit, but that is probably just a variable somewhere you could easily change.
posted by Wossname at 11:14 AM on September 30, 2011
Best answer: This presentation walks through the basic mechanics of building some slideshow style sites with Drupal; the details of what you're looking to accomplish are basically CSS styling details. The image scaling and cropping that Wossname mentions is handled automatically by Drupal using "ImageCache," a module that lets you set up "scaling/cropping presets" for images and creates derivative images automatically.
Traditionally, you'd create a content type called "photo" or something like that, create an imagecache preset that crops and scales the photos to the small size and the large size, then you'd create a View that pulls in the images, then you'd use a "Display plugin" for Views that spits them out in one of the popular jQuery galleries that can be CSS styled to taste.
There's also a plugin module called Galleria that uses the eminently restyle-able jQuery Galleria plugin, and only requires you to create one piece of content for each gallery. (You stick multiple images onto each post, and each post becomes a single gallery.)
If that's too complicated there might be something canned that works that way for Joomla! or WordPress, but we've done very similar things on many projects. Either way you're probably going to need to do some CSS tweaking to make it look "just so" -- Galleria in particular has a page showing off a number of different visual themes, and it's pretty flexible.
posted by verb at 7:42 AM on October 1, 2011
Traditionally, you'd create a content type called "photo" or something like that, create an imagecache preset that crops and scales the photos to the small size and the large size, then you'd create a View that pulls in the images, then you'd use a "Display plugin" for Views that spits them out in one of the popular jQuery galleries that can be CSS styled to taste.
There's also a plugin module called Galleria that uses the eminently restyle-able jQuery Galleria plugin, and only requires you to create one piece of content for each gallery. (You stick multiple images onto each post, and each post becomes a single gallery.)
If that's too complicated there might be something canned that works that way for Joomla! or WordPress, but we've done very similar things on many projects. Either way you're probably going to need to do some CSS tweaking to make it look "just so" -- Galleria in particular has a page showing off a number of different visual themes, and it's pretty flexible.
posted by verb at 7:42 AM on October 1, 2011
« Older School Uniform for an eczema sufferer | I want to eat less meat; how do I make sure that... Newer »
This thread is closed to new comments.
I'm confident that a developer could cobble together something out of existing parts that does what you want. Image placement is mostly a matter of styling, and shouldn't be hard-coded.
posted by adamrice at 10:07 AM on September 30, 2011