Author Topic: Custom field images display  (Read 36228 times)

cas

  • Jr. Member
  • **
  • Posts: 487
Custom field images display
« on: November 04, 2011, 05:17:25 am »
How can I make custom field images display properly on the website?  Take a look at my site to see the problem:  https://www.hairextensionsfair.com/shop/full-head-clip-in/pp-straight-16-in-detail

The custom fields are displaying in a single vertical column and the radio buttons, price adjustment, and descriptions are not in the proper location in relation to the images.  In my humble opinion the radio buttons should be above the image and the description & price adjustment should be below the image.  Currently the radio button and price adjustment is along the side of the image, which makes it difficult to know which image it relates to.  Also, the images should flow across the page and not in one vertical column.  See the attached image for an idea of how I'm trying to get the custom field images to look.   Also, when there is no price adjustment, it is still displaying the : (colon) even when I removed the word "free" from the language file.  The attached image also shows a clean way to display price adjustments below the description if an adjustment exists, otherwise there is no display.   I tried to copy & modify the default.php in the productdetails view and the vmsite-ltr.css to achieve the desired result, but there doesn't seem to be a way to control the location of the radio button and price adjustment within these two files.  Please let me know what files need to be modified to make it look like the attached image?       

The custom fields images when clicked should open in a modal lightbox to see the full size image. 

Also, additional product images with descriptions display in a singe vertical column and not across the page.  See my site to see the problem:  https://www.hairextensionsfair.com/shop/full-head-clip-in/pp-straight-16-in-detail

UPDATE: See Reply #34 in this topic to download the attached file that makes your product page look much better if you have extra images, custom field images, and related products.  The links above are using the new file, so all looks good now.

Thanks,
Chuck

[attachment cleanup by admin]

cas

  • Jr. Member
  • **
  • Posts: 487
Re: Custom field images display
« Reply #1 on: November 09, 2011, 18:48:56 pm »
Please, can someone help me?   This is the last major problem that is holding back my customer from going live.  I tried to copy and modify the default.php in the productdetails view and the vmsite-ltr.css to achieve the desired result, but it seems to me the problem is deeper in the VM code, so that's why I am asking for help from the VM team. 

Please help!
Thanks,
Chuck

PRO

  • Global Moderator
  • Super Hero
  • *
  • Posts: 10282
  • VirtueMart Version: 3+
Re: Custom field images display
« Reply #2 on: November 09, 2011, 19:12:28 pm »
this is in your template.css AND wrong

a, img {
    border: medium none;
    margin: 0;
    outline: medium none;
    padding: 0;
}

img a:link
I do NOT do development work for hire.

cas

  • Jr. Member
  • **
  • Posts: 487
Re: Custom field images display
« Reply #3 on: November 09, 2011, 19:45:50 pm »
Thanks Banguet Tables Pro,

What should it be to get the results shown in my attachment?   I tried removing the 'a, img' section completely and nothing changed.  I tried changing 'a, img' to 'img a:link' and nothing changed.  What exactly should it be?   I'm not an expert at this, so please explain in detail what to do. 

Thanks,
Chuck

PRO

  • Global Moderator
  • Super Hero
  • *
  • Posts: 10282
  • VirtueMart Version: 3+
Re: Custom field images display
« Reply #4 on: November 09, 2011, 19:48:37 pm »
do this
css

.product-field{width:49%;float:left;}
I do NOT do development work for hire.

cas

  • Jr. Member
  • **
  • Posts: 487
Re: Custom field images display
« Reply #5 on: November 09, 2011, 19:54:38 pm »
Thanks.  I made the change, so now you can see it just moved the 'Add to Cart' button to the top right, but it didn't fix the image display problem.  The images are still not aligned across the page and the radio button and price adjustment is still along the side of the image, which is difficult for customers to understand the alignment when done this way  The radio button should be above the image and the description and price adjustment should be below the image.     

Thanks,
Chuck

PRO

  • Global Moderator
  • Super Hero
  • *
  • Posts: 10282
  • VirtueMart Version: 3+
Re: Custom field images display
« Reply #6 on: November 09, 2011, 20:04:13 pm »
views/productdetails/tpl/default.php

REMOVE THIS at the top
JHTML::_('behavior.tooltip');

IF you dont want tooltips. (you can put it back later) Tooltip is the blue circle box

THEN: here
<?php if ($field->custom_title != $custom_title) { ?>
         <span class="product-fields-title" ><?php echo JText::_($field->custom_title); ?></span>

add <br /> after it


then here
   $custom_title = $field->custom_title;
   } ?>
   </div>

ADD <div class"clear"></div>

THEN here
<div class="product-field product-field-type-<?php echo $field->field_type ?>">

change to
<div style="width:49%;float:left;" class="product-field product-field-type-<?php echo $field->field_type ?>">
I do NOT do development work for hire.

PRO

  • Global Moderator
  • Super Hero
  • *
  • Posts: 10282
  • VirtueMart Version: 3+
Re: Custom field images display
« Reply #7 on: November 09, 2011, 20:07:39 pm »
<br />   WITH the slash /
I do NOT do development work for hire.

PRO

  • Global Moderator
  • Super Hero
  • *
  • Posts: 10282
  • VirtueMart Version: 3+
Re: Custom field images display
« Reply #8 on: November 09, 2011, 20:12:10 pm »
<div class="addtocart-bar">

right above this add

<div class"clear"></div>
I do NOT do development work for hire.

cas

  • Jr. Member
  • **
  • Posts: 487
Re: Custom field images display
« Reply #9 on: November 09, 2011, 20:24:59 pm »
I made all the changes... but still no luck.  Question:  Should <div class"clear"></div>   really be   <div class="clear"></div>

PRO

  • Global Moderator
  • Super Hero
  • *
  • Posts: 10282
  • VirtueMart Version: 3+
Re: Custom field images display
« Reply #10 on: November 09, 2011, 20:31:32 pm »
YES, you could also do a <br />
I do NOT do development work for hire.

PRO

  • Global Moderator
  • Super Hero
  • *
  • Posts: 10282
  • VirtueMart Version: 3+
Re: Custom field images display
« Reply #11 on: November 09, 2011, 20:34:27 pm »
EDIT: no dont do that, hold on brb
I do NOT do development work for hire.

cas

  • Jr. Member
  • **
  • Posts: 487
Re: Custom field images display
« Reply #12 on: November 09, 2011, 20:39:03 pm »
ok, I'll wait ... thanks for all your help!

PRO

  • Global Moderator
  • Super Hero
  • *
  • Posts: 10282
  • VirtueMart Version: 3+
Re: Custom field images display
« Reply #13 on: November 09, 2011, 20:43:53 pm »
CHANGE:::
.product-field {
    float: left;
    width: 100%;
}


EDIT:::: change the above, brb
I do NOT do development work for hire.

cas

  • Jr. Member
  • **
  • Posts: 487
Re: Custom field images display
« Reply #14 on: November 09, 2011, 20:54:50 pm »
I made the change.