Elements under Attribute images IN-LINE

[ktomas]

I have multiple options for each product set up in rows of 3. Each image is a slightly different height, but I'd like the elements underneath them to all line up in a row.

Check out my site here

If you look at the first option (Band Style) you'll see that "Balls" have a larger image than "Daisies." I want the radio buttons underneath the be at the same height instead of directly under the image.

This seems difficult since the label elements are a child of the .attribImg class and not a sibling.

Any thoughts on how to achieve this?

[gjh42]

I think the only way to achieve this is to give the image a wrapper, or the like. This will require editing /includes/modules/your_template/attributes.php.
For your case, with option image style 4, look around line 352:

                      case '4':
                      $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;
                      }

                      if ($products_options->fields['attributes_image'] != '') {
                        $tmp_attributes_image .= '<div class="attribImg">' . '<label class="attribsCheckbox" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? '<br />' . $products_options->fields['products_options_values_name'] : '') . ($products_options_details_noname != '' ? '<br />' . $products_options_details_noname : '') . '</label><br />' . zen_draw_checkbox_field('id[' . $products_options_names->fields['products_options_id'] . ']['.$products_options_value_id.']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '</div>' . "\n";
                      } else {
                        $tmp_attributes_image .= '<div class="attribImg">' . '<label class="attribsCheckbox" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . $products_options->fields['products_options_values_name'] . ($products_options_details_noname != '' ? '<br />' . $products_options_details_noname : '') . '</label><br />' . zen_draw_checkbox_field('id[' . $products_options_names->fields['products_options_id'] . ']['.$products_options_value_id.']',$products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '</div>' . "\n";
                      }
                      break; 

This outputs the image:

                      if ($products_options->fields['attributes_image'] != '') {
                        $tmp_attributes_image .= '<div class="attribImg">' . '<label class="attribsCheckbox" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? ... 

so add a span around it:

                      if ($products_options->fields['attributes_image'] != '') {
                        $tmp_attributes_image .= '<div class="attribImg">' . '<label class="attribsCheckbox" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . <span class="imgHeightFix"> . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . '</span>' . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? ...

[ktomas]

so add a span around it:

                      if ($products_options->fields['attributes_image'] != '') {
                        $tmp_attributes_image .= '<div class="attribImg">' . '<label class="attribsCheckbox" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . <span class="imgHeightFix"> . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . '</span>' . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? ...

I can't seem to get the new <span> to show up. I'm not sure if there's a problem with my code

if ($products_options->fields['attributes_image'] != '') {
                        $tmp_attributes_image .= '<div class="attribImg">' . '<label class="attribsCheckbox" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . '<span class="imageHeightFix">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . '</span>' . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? '<br />' 

[ktomas]

We were on the wrong line of code -- it starts on 252 (we had checkboxes instead of radio buttons).

I still can't get that to change anything however. What were you thinking about for the CSS?

The attached image shows how I want it to look. I'm also wondering how I'm going to get the description to the right of the radio button.

This is making my head start to hurt.

[gjh42]

You have option style 0 now, so you would have to apply the edit to the corresponding case for anything to be able to happen.

Look at view source after you make the edit and see if there is a span there. When you get that, you can style it with
.imageHeightFix {height: 150px;}
or whatever you want. You might add a
border: 1px dotted red;
to make sure you are having an effect.

[ktomas]

Look at view source after you make the edit and see if there is a span there. When you get that, you can style it with
.imageHeightFix {height: 150px;}

Changing the height has no effect. I've also tried wrapping the span around the <label> tag one level up with no effect either.

How about any ideas as to how to get the description to the right of the buttons rather than above?

[gjh42]

Remove the '<br />' . from yhe code in

. (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? '<br />' . $products_options->fields['products_options_values_name'] : '') .

Giving the span display: block; will allow it to have independent height.

[ktomas]

We're getting closer. The buttons are in line, but the labels do not go with them -- they're stuck with the images.

The attachment shows the span area with a border. The current CSS is

{display: block
height: 150px
border: 1px solid}

It looks like we'll have to rearrange some markup to get that to work, but with it being in php, I'm not comfortable poking around. Any ideas?

I know "display 0" puts the buttons and labels together, but also includes the labels under the images. I'm not sure if we'll have to start with this, manually move the button/label combo underneath the images and hide the second labels, or if there's a better way within "display 4."