Multiple Colums of images for attributes

Hi all.

http://www.showball.com/index.php?main_page=product_info&cPath=3&products_id=6

I'd like the attribute images to be in multiple columns in the image spacing, instead of one straight line. Is this possible?

Thanks
David

Found it.. It's in the options area.. Ok, I'd like to move to another question.. How can I remove the Option name under the image?

:)

Have you tried going to:

Catalog>Option Name Manager

Then, once there, click on the "Edit" button next to the attribute name you want to adjust. On the screen that you come to next, find the section that is titled "Image Styles", and looks like this:

Image Styles:
0= Images Below Option Names
1= Element, Image and Option Value
2= Element, Image and Option Name Below
3= Option Name Below Element and Image
4= Element Below Image and Option Name
5= Element Above Image and Option Name

Choose the option you want to select which items you want to show. You may have to play "trial and error" to figure out which one you want, but I think this may be what you are talking about.

Hope it helps!

Hi econcepts.. It's close.. :)

But none of those options allow me just to display the image without the Option Name.. I'm using a drop down box, and below that the images display along with the Option Names.. I'd like to to lose the Options Names displayed with the images...

Thanks
David

David,

If you wanted to, you could do the following (although you have to get into "code" to do it).

1. Open the file "/includes/modules/attributes.php" in your text editor of choice.

2. Do a search on the following "attribImg" (which is the stylsheet attribute associated with the line of code that prints the attribute images to the screen -- if there are any). You'll find this in a number of lines within that file. If you are not concerned with altering the way attribute images display for Radio Buttons or Checkboxes, then you can skip the first number of them you come to as they won't pertain to your site anyhow (you said you use a "dropdown").

3. SPECIFICALLY Go to around LINE 481 of the module. That line should look like the following:

$tmp_attributes_image .= '<div class="attribImg">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? '<br />' . $products_options->fields['products_options_values_name'] : '') . '</div>' . "\n";

Change that line to the folowing (ALWAYS BACKUP your origianl file first so you can revert back to it in the event you need to):

$tmp_attributes_image .= '<div class="attribImg">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? '<!--<br />' . $products_options->fields['products_options_values_name'] : '') . '--></div>' . "\n";

Notice ... all I did was commented out the line of code that shows the "values name" on the screen using standard HTML comment tags "<!-- -->".

Make sense? If you are going to be using radio buttons or checkboxes, then you will want to comment out the same section of code for each occurance found previously in the file as well.

Let me know if that works for you. In effect, all you are doing it "hiding" that section of HTML code so it doesn't show when rendering the page.

econcepts.. That's great.. Thanks.. I was looking all through tpl_modules_attributes.php and couldn't find it there.. I learned something new, thank you.

BTW, I'll be contacting you shortly to talk marketing :)

Thanks
David

David,

Glad I could be of assistance in getting that item "hidden" on your site. I know how it can be -- running through lines of code looking for the exact spot! I have worked with the cart so long, it is finally becoming second nature. Just now getting around to posting my findings in the forums.

I tried this with 5 images in a row. The images overlap? Is there some place to specify spacing, I don't understand why the images overlap.

econcepts:

Have you tried going to:

Catalog>Option Name Manager

Then, once there, click on the "Edit" button next to the attribute name you want to adjust. On the screen that you come to next, find the section that is titled "Image Styles", and looks like this:

Image Styles:
0= Images Below Option Names
1= Element, Image and Option Value
2= Element, Image and Option Name Below
3= Option Name Below Element and Image
4= Element Below Image and Option Name
5= Element Above Image and Option Name

Choose the option you want to select which items you want to show. You may have to play "trial and error" to figure out which one you want, but I think this may be what you are talking about.

Hope it helps!

note the overlap: http://www.sacredfiremag.com/shop/index.php?main_page=product_info&cPath=4&products_id=1

Possible options:

1 Make smaller images ...

2 Put only 3 per row

3 get rid of the right column and only use the left column so you have more room

:smile:

I already tried 3 per row. I don't understand why that doesn't fit, looks like it should. Even 2-per row has the same overlap.. ..something is wrong. I looked at the resulting code, and it correctly says the images are 100x130 but they are both cropped and overlapped. I could experiment with getting rid of the right column to see if that's messing it up.

Ajeh:

Possible options:

1 Make smaller images ...

2 Put only 3 per row

3 get rid of the right column and only use the left column so you have more room

:smile:

It turns out this must have been a side-effect of experimenting with the classic template. I finally got around to copying the default template and creating my own, ..and voila! No image overlap.

Thanks for the update on what the cause of this issue really was ... :cool:

dwessell:

Found it.. It's in the options area..

Okay could you tell me where these options are :lookaroun

Thank You
Andrew
Zikofski Computing
http://www.zikofski.co.uk

Yes please, I've looked everywhere, can't find where I make my attribute images come up horizontally rather than vertically.

When you have 20 images to show, it's a mighty long page!!

On the Option Names Manager ... there is an Edit button for the Option Name where there are additional settings ...

You're the best Ajeh, thanks.

Thanks for the update that using the Option Names Manager and hitting Edit on the Option Name did give you additional features for use with your Option Name layout of the Option Values ... :smile:

thanx got 2 on one row but i got the overlap as well could you tell me how you fixed it please website is https://www.zikofski.co.uk

Zikofski,

I hope you already got an answer to your question about the attribute images overlapping but I had the same issue and solved it on my store so I thought I'd share this with everyone.

It has to do with your CSS stylesheet. See whatever you set the number of images per a row, you need to modify the percentage value in the CSS style. Just open the stylesheet.css file in your template's CSS directory and look for this:

/*Attributes*/
.attribImg {
	width: 20%;
	margin: 0.3em 0em;
}

Now, I had my store use two images per a row, so I set the percentage to 50%, which solved the overlap issues. For example if you were going to use three images per a row you would do 33%, and so forth.

Hope this helps!