How to put Attribute Images into Columns?

This is a slightly different question from my original concerning LOTS of attributes per product.

Refresh: office furniture store, roughly 222 fabrics per product (just not EVERY product in the store, but about 2/3 of the store).

I started adding the attributes to the following product.
The attributes themselves are listed in the drop down.
I am in the process of adding their associated images.

I have added the addon - Attribute Rollover
It just added a line of code to the attributes.php and some CSS.
http://www.zen-cart.com/index.php?main_page=product_contrib_info&products_id=1765

Here's the product I'm currently working on:
http://www.caofficedesign.com/shop/index.php?main_page=product_info&cPath=1_10&products_id=260

Question:
It looks like, as I add the attribute images, that it will all be in one column. I'm thinking they can go at least 4 columns across.

How can I alter the code to achieve this, as I do not see anything anywhere under Configuration to set this.

Here's the code in /modules/attributes.php associated with attribute images:

// collect attribute image if it exists and to be drawn in table below
                  if ($products_options_names->fields['products_options_images_style'] == '0' or ($products_options_names->fields['products_options_type'] == PRODUCTS_OPTIONS_TYPE_FILE or $products_options_names->fields['products_options_type'] == PRODUCTS_OPTIONS_TYPE_TEXT or $products_options_names->fields['products_options_type'] == '0') ) {
                    if ($products_options->fields['attributes_image'] != '') {
                      $tmp_attributes_image_row++;

                      //              if ($tmp_attributes_image_row > PRODUCTS_IMAGES_ATTRIBUTES_PER_ROW) {
                      if ($tmp_attributes_image_row > $products_options_names->fields['products_options_images_per_row']) {
                        $tmp_attributes_image .= '<br class="clearBoth" />' . "\n";
                        $tmp_attributes_image_row = 1;
                      }
// BOF ATTRIBUTE ROLLOVER CODE
                      $tmp_attributes_image .= '<div class="attribImg">' . '<a class="attribRoll" href="" onclick="return false;">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . '<i>' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . '</i>' . '</a>' . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? '<br />' . $products_options->fields['products_options_values_name'] : '') . '</div>' . "\n";
// EOF ATTRIBUTE ROLLOVER CODE                    
					}
                  }

You might be able to style the page just using css. Try adding to your stylesheet.css:

.attribImg+br { display: none; }
.attribImg { float: left; }

You might need to fuss with the settings a bit, but that will get you close.

Ok, now we're getting somewhere.

Check that product page again ...

How come some thumbs are isolated on their own row? Ie: doesn't complete a row and skips down to the next?

This is great progress though ... thoroughly appreciate the help! :bigups:

EDITED: Looks like the problem happens when there is a row where the image name takes up 2 lines ...

Thought you might want to see the whole CSS block for attributes

/*Attributes*/
.attribImg {width:20%;float:left;margin: 0.3em 0em;font-size:11px;}
.attribImg+br {display: none;}
/*default attribute image*/
a.attribRoll img {border:0; cursor:default; width:75px; height: 33px;}
/*link*/
a.attribRoll:hover {text-decoration:none; position:relative; cursor:default;}
/*currently hidden attribute image*/
a.attribRoll i {display:block; position:absolute; left:-9999px; opacity:0;
	-moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
	-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
	 box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	 border-radius: 10px; }
/*revealed attribute image*/
a.attribRoll:hover i {top:-160px; left:30px; padding:10px; border:1px solid #aaa; background:#fff; opacity:1.0;}
a.attribRoll:hover i img {width:250px; height:110px;}

.attributesComments {}

Putting a bottom/top padding on the .attribImage ... while it did space out the rows from each other, it did not help with the above mentioned problem ... still trying though ...

Edited: I ended up changing the attribImage width from 20% to 25% ... changing from 5 across to 4 across.
That fixed the problem.

I would still rather have 5 across though if we could find a way to fix the previous problem.
5 across lessens the page scroll. As of this post, I am about 3/4 of the way through adding images (225 total).

Egads ... after switching to 4 across via changing the width % ... I started getting double lines of text again causing the rows beneath them to mess up.

How can I fix this? I still have about 75 images to add as of this post.

http://www.caofficedesign.com/shop/index.php?main_page=product_info&cPath=1_10&products_id=260

Although I'm waiting on the client's approval, I am sure he will say yes ... but I'm going to shorten the fabrics' names by deleting the GradeA/, GradeB/, etc ... that should do the trick and solve my problem.

Looks good (that's a lot of color swatches!) ...

As a user, I think this number of swatches is quite frightening. It's overkill, and besides... when I finally get to a colour I think I like it takes several scrolls to bet back to the drop-down... by which time I have forgotten what the colour's name is... and then I have to scroll right down again and look for it in that sea of swatches, and then I forget which one it was exactly, and then..

... well then I just go shop elsewhere.

I think it would be far better to separate out your colours into colour waves, and create separate product listing for each colour wave.

Reds
Blues
Greens
Greys
... etc

This creates a bit more admin for you (your client) but at least it won't annoy and frustrate potential customers... I can't see many visitors actually finding the current set-up helpful at all.

I just want to get outta there :no:

Wander what she would look like if you change the Fabric Covering to a Radio button ...

admin panel/ catalog/ option name manager/ Fabric Covering

1. click edit and change to a radio button

haredo:

Wander what she would look like if you change the Fabric Covering to a Radio button ...

admin panel/ catalog/ option name manager/ Fabric Covering

2. click edit and change to a radio button

Good idea :yes:... certainly helps with the dropdown irritation. But still way too many choices on a single product.

How about styling the select statement's options to have their backgrounds based on the color swatches themselves (see http://stackoverflow.com/questions/2965971/how-to-add-a-images-in-select-list)? I agree that it's a lot of options, but at least this way they'd be under "space control".

It's not the "technicalities" of the display that matter. what the OP is not taking into account is how PEOPLE will react when they see this stuff.

I know that the client is probably insisting on having it this way, but it is BAD BUSINESS SENSE. The page is way too busy. The OP would do well to tactfully suggest to the client that splitting the product up into more manageable "chunks" is better from a business point-of-view.

Hi everyone,

I'm sorry I hadn't responded to this thread as I didn't think there would be any additional responses.

I do agree that the sheer number of fabric choices was daunting.

With office chairs, fabrics are divided into Grades (the label varies from vendor to vendor but the concept is the same). Each grade has its own upsell price (extra $20, $50, etc). Some chairs only offer 2 grades of fabric choices, while another chair will offer 4 grades of fabric choices. I've sat and thought about the layout for over a day and I couldn't come up with anything that could condense the choices. The client wanted to have the fabric swatches shown (which is a good idea), but you need to have the thumbnail images just big enough so the customer can see which is which in order to hover over to see a larger view.

I'm now doing the same for another client, but thankfully it is a different vendor with a much shorter list of fabric choices (although she is thinking of also adding in that other vendor OMG! LOL).

http://www.officemasterchairs.net/index.php?main_page=product_info&cPath=1&products_id=1

I did just try to do radio button instead of drop down and that just made things worse ... where the drop down list was (when you extend the list) is the radio button list ... and pushing the thumbs way further down ... wish there was a way to put the radio button next to each thumb. Hmmmm, will ask over in the Attributes Rollover thread [http://www.zen-cart.com/showthread.php?164508-Attribute-Rollovers-By-Nineve/page3&highlight=attribute+rollover]

I'm sorry that I've been gone for these last few months. I had a long respiratory infection illness and then I had to deal with the passing of my Grandmother in New Jersey during the week of Hurricane Sandy aftermath.

My client agrees that the list of fabrics is daunting and saw another way to tightening it up. The solution is actually on another Zencart site that is also a rep for the same vendor, and thus the same fabric choices.

What addon/modification are they using?
Here is one chair as an example ... she loves how the attributes are displayed and wants that.
http://www.officemasterchairs.com/office-master-bc42-p-1556.html

Could really use some help with the above post ... please!

The other website has not responded to my inquiry.