product gallery strategies

mrtunes · 2008-12-19 03:48:15

i’ve searched around, and can’t really find what i need to get rolling.
what would you say the CSS topic is when you’re searching for techniques involving a gallery with images and text underneath it? is it something like grid design?

also can you just use an image gallery plugin to accomplish the task of laying out all the products on a page?

Last edited by mrtunes (2008-12-19 03:48:28)

jakob · 2008-12-19 09:00:46

If each product is an article, which I strongly suspect, you can attach an article image to each product and use txp:article(_custom) with txp:article_image in your form to display them.

There are, of course, lots of different ways of displaying products but one way or the other it would make sense to link product name, image and possibly, excerpt, price or whatever. You could enclose each product in a div, or you could use a dl-list, with dt for the product title, and a series of dd with appropriate classes for the image, price and description. There’s a tutorial along those lines in Dan Cederholm’s Bulletproof web design. If you want a grid arrangement, you can then use CSS to define the size of the bounding element (the dl or the div) and float:left to make them appear next to each other in grid-fashion.

mrtunes · 2008-12-19 09:25:33

jakob wrote:

If each product is an article, which I strongly suspect, you can attach an article image to each product and use txp:article(_custom) with txp:article_image in your form to display them.
There are, of course, lots of different ways of displaying products but one way or the other it would make sense to link product name, image and possibly, excerpt, price or whatever. You could enclose each product in a div, or you could use a dl-list, with dt for the product title, and a series of dd with appropriate classes for the image, price and description. There’s a tutorial along those lines in Dan Cederholm’s Bulletproof web design. If you want a grid arrangement, you can then use CSS to define the size of the bounding element (the dl or the div) and float:left to make them appear next to each other in grid-fashion.

thank you! i found that you can get pretty far without using an image plugin, and in the new 4.0.7 alongside tinymce you can place images into the actual product page fairly nicely. for the main page i can use article-image thumbnail=“1”, and then i followed a float tutorial .

main thing is to make sure you wrap the product form into a div class so you have control over it.

the real test will be if my friend is able to maneuver this system easily cause it’s a bit hectic, but overall not too bad considering that other cart systems are fairly bloated compared to what i’m building.

upload images in the images panel, create thumbs. for each product set the article image in the advanced options, and then tinymce that image into place in the main body. does that seem convuluted? i couldnt get rss_thumbpop working but maybe i dont need it, short of the fact that i just dont have a fancy lightbox at the moment. maybe i need to integrate something into my tinymce step though.

Bloke · 2008-12-19 09:39:24

mrtunes wrote:

thank you! i found that you can get pretty far without using an image plugin

Yeah, 4.0.7 rocks!

One thing to possibly make it less of a hassle for uploading images, try lam_image_uploader which allows you to upload pics directly via the Write tab.

Last edited by Bloke (2008-12-19 09:39:33)

jakob · 2008-12-19 10:58:24

I would attach the product image(s) to the article-image box rather than inserting it into the body of the article text. You can show the first image thumb for the product overview page and show a selection of images (if there is more than one) on the product page itself. You just need to set this up in the relevant article and list page forms.
Previously I have used Patrick’s hak_article_image to make an on-page gallery out of several images in the “article-image” box. You could also use Stef’s smd_gallery in conjunction with galleria or other plugins like wet_for_each_image and so on.

To make it easier for clients to select images for each product-article, you can use something like Jmd_img_selector (forum thread) to visually pick which uploaded images should be added to the article image box.

mrtunes · 2008-12-20 21:59:24

thank you for the helpful replies. i’m going to experiment a bit with some new plugins suggested here.

i guess it should’ve gone in the “How Do I?” forum, but i didn’t expect it to be so easy to make a gallery float style.

mrtunes · 2009-01-20 05:15:41

ok i’m moving along nicely here. making use of hak_article image, and then Jmd Image Selector. I’m about to use smd_gallery, but before i dive in i’m wondering if there’s a way to make multiple thumbnails of the same image? i found a thread that didn’t end up anywhere, and i’m sort of wondering if Stef’s plugin can do it.

Thumbnail for the main page is extra small, thumbnail for product page is larger, and then a final click takes you to whatever size the image actually is in a lightbox.

jakob · 2009-01-20 09:13:30

Elliot, no there isn’t a built-in method. If two of the sizes are not far apart, then it may be simplest to upload the larger of the two and use CSS to downsize (disadvantage: slight picture degradation). From an intermediate to thumb that are not too far apart size-wise, the larger download requirement for a whole page may be okay but from a larger image to small, one requires the user to download more than is necessary. It’s all a matter of how much you think will appear on a page, how much traffic you think you will have etc.

Another way is to use lam_dynamic_image to create the other size “on the fly” (it will cache for a certain amount of time). Shifting Pixel’s Smart Image Resizer is another alternative that uses the same basic principle.

Bloke · 2009-01-20 09:20:40

mrtunes wrote:

i’m wondering if there’s a way to make multiple thumbnails of the same image?

Yes, but it’s not pretty. I’ve helped someone do something like this before. There are a few approaches:

upload Product Page image to Images tab as normal, generate the Main Page thumbnail extra small, then upload the full size one (via FTP) as an identically named file to the ‘images’ directory. Thus your gallery can pull out the product/thumb images using regular tags; the only difference in the markup is that your anchor tag references a URL like: site.com/images/my_cool_picture.jpg instead of site.com/images/12.jpg
Upload the full size image to the Images tab as normal, create the Product Page image as a thumbnail then in your gallery form on the Main Page fix the thumbnail width/height to a smaller value and let the browser scale it down. The results are slightly yuckier, but if you scale the thumbnail most browsers make a reasonable job of it depending on the aspect ratio used. The trade-off in quality is offset by the fact you don’t have to mess with FTP
Use another one of iblastoff’s plugins (I think: forget what it’s called) that allows you to create multiple thumbnails for an image and cache them

EDIT: and jakob was faster :-)

Last edited by Bloke (2009-01-20 09:22:04)

Textpattern CMS

Textpattern CMS support forum

#1 2008-12-19 03:48:15

product gallery strategies

#2 2008-12-19 09:00:46

Re: product gallery strategies

#3 2008-12-19 09:25:33

Re: product gallery strategies

#4 2008-12-19 09:39:24

Re: product gallery strategies

#5 2008-12-19 10:58:24

Re: product gallery strategies

#6 2008-12-20 21:59:24

Re: product gallery strategies

#7 2009-01-20 05:15:41

Re: product gallery strategies

#8 2009-01-20 09:13:30

Re: product gallery strategies

#9 2009-01-20 09:20:40

Re: product gallery strategies

Board footer