Our site www.viart.com site is operated by latest Viart Shop 5 with default Clear design
Topic Information
arkid
arkid
Hi all
 
A stupid question, as Ive been using the product long enought, but I just wanted to check...
 
is there a way to make the main products list page show in thumbnail mode?
 
My understanding is that this isn't really built in, and that to do it, id have to make a custom theme which may also require some custom coding depending how my theme needs to look.
 
Am i right about this?
 
 
Thanks
 
dani
dani
If your images are all the same size, it's easy to specify a proportionally smaller width in height within the <img> tag in the product list template...
 
arkid
arkid
Hi dani
 
yes i understand that, but the issue is that i need the html to be written out really completely differently. currently the viart html draws tables with a column on the left for an image and then one on the right for all the copy and other elements.
 
what i need is a table that draws lots of small cells, with probably 4 or 5 columns where each displays only the small (thumbnail) size image.
 
I can naturally edit the template to hide the copy and other elements of the current products list that i dont want, but the key part of this is making the html draw in a different loop to display multiple images both horizontally and vertically through a quite differently formatted table.
 
 
Anyone have any experience of this?
 
dani
dani
I have edited my product listing quite a bit but I used divs instead of table cells. Even so, you can provide a set width for the table to limit the display to 5 columns. Just make sure that the product image and any other info you want to display for the image is put into a single <td>. You can experiment with placing your table tags in different places after the <!--Begin item_rows --> comment tags.
 
It's easier to strip out all of the original table tags and start from scratch.
If you're interested in a simpler way to do that, check out this thread: http://www.viart.com/howto_simple_way_to_strip_out_table_tags_in_template_files.html
 
This is part of my product_list code:
 
 
<!-- BEGIN items_rows -->
<div id="style-wrap">
<!-- BEGIN items_cols -->
 
 
<a name="p{form_id}"></a>
<!-- BEGIN item_added --><div class="message" align="center">{added_message}</div><!-- END item_added -->
<!-- BEGIN sc_errors --><div class="error" align="center">{errors_list}</div><!-- END sc_errors -->
<form name="form_{form_id}" method="post" action="{products_href}#p{form_id}">
{hidden_parameters}
<input type="hidden" name="type" value="list">
<input type="hidden" name="rp" value="{rp}">
<input type="hidden" name="rnd" value="{rnd}">
<input type="hidden" name="cart" value="ADD">
<input type="hidden" name="add_id" value="{item_id}">
<input type="hidden" name="saved_type_id" value="">
<input type="hidden" name="tax_percent" value="{tax_percent}">
<input type="hidden" name="product_params" value="{product_params}">
 
<div id="style">
 
 
<!-- begin found_in_category -->
<div class="smallText">{FOUND_IN_MSG}: <!-- BEGIN found_categories --><a class="smallText" href="{products_href}?category_id={ic_id}">{item_category}</a>{ic_separator}<!-- END found_categories --></div>
<!-- end found_in_category -->
 
 
<!-- begin small_image -->
<a href="{product_details_url}"><img class="productImg" name="image_{form_id}" src="{src}" {width} {height} border="0" vspace="10" hspace="10" alt="{alt}"></a><!-- end small_image -->
</div>
 
 
<!-- begin manufacturer_code_block -->
<!-- begin item_code_block -->
<!--begin product_new_image--> <!--end product_new_image-->
<p class="item-code">Item no. {item_code}</p>
<!-- end item_code_block -->
<p class="listprice">As low as <strong class="aslow-price"> ${manufacturer_code} </strong>ea.</p>
<!-- end manufacturer_code_block -->
<!-- begin description -->
<!-- end description -->
 
Last modified: 3 Nov 2008 2:58 PM
 
arkid
arkid
hi dani
can you share your shop address? id love to see what your products page looks like and how close it is to the kind of thing I want to do.
 
dani
dani
Sure - the site isn't quite ready for launch yet but I'll leave it up briefly..
 
http://bargainmugs.com
 
you may need your sunglasses for this site ..lol.
Last modified: 18 Nov 2008 8:59 PM
 
arkid
arkid
hi
 
it seems to be running in offline mode...?
 
dani
dani
try it again..
 
arkid
arkid
it gives a php error now...
 
dani
dani
oops.. try it again Wink
 
arkid
arkid
ah brilliant. yeah thats the kind of thing im after I guess.
 
so your just using ul li and divs to make the thumbnails automatically wrap within the bounds of your formatting, if i understand it correctly.
 
i will have to try this myself on my site that i should soon be building.
 
 
thanks for the help!
 
dani
dani
No problem :)
 
I'm wrapping each product in a <div> that I float left - since I've made both the bl_productlist container and indv. product divs a specific width, there are only 4 images placed on a given row before it continues to the next.
Last modified: 3 Nov 2008 3:32 PM