News:

You may pay someone to create your store, or you visit our seminar and become a professional yourself with the silver certification

Main Menu

Custom field images display

Started by cas, November 04, 2011, 05:17:25 AM

Previous topic - Next topic

cas

Maybe Banquet has an easier solution than I do, but resizing your thumbnail images to the size I used (80px w x 90px h) will definitely work at width 17%.  What size are your thumbnail images?  I have another website where the thumbnails are 90px x 90px and the width is 17.7% and it works.

PRO

thats the problem with this css , templates will be different widths,and images will be different widths.

You will just have to work it out for your own template.

You can also do exact widths.

You can instead of 20%, do 100px; etc.


scoody

All is ok now with the images 90px , Thanks for your clear help , hope it will survive updates ...

cas

That's great you got it to work!  As far as updates, you will find when the new version of VM comes out, that the default.php for product view now has all the changes included in the base.  You might need to add a line break for the tooltip so it does not mess up the alignment of your images.  At least that's all I needed to change based on the SVN as of a few weeks ago.   Plus you will probably need to keep the css changes you did.   

Banquet, were you able to add the line break for the tooltip in the base so it doesn't mess up the images alignment?   Also, were you able to include the css changes in the base?     

ronyashka

CAS

if it is not very difficult can you explain how you made this inscriptions below the images?

cas

Hi ronyashka,

The image descriptions are entered by going to:  VM > Shop > Media Files, and then enter the description in the field: Displayed Image Title.
FYI, the 'Unique Filename' is the name that will appear in the admin dropdown to select the image. 

Cheers,
Chuck

cas

Hi Banquet,

All was working great with the custom field images. Thanks for making the changes.  But I just upgraded to VM 2.0.1.F and the custom field images do align properly again.  Someone modified the vmsite-ltr.css at line 201:  .product-fields .product-field input {width:5%;float:left;position:relative;left:33px;} they removed the width:5%.  Can you please add back the width:5%. 

Also, the custom fields tooltip needs a line break so it doesn't mess up the custom fields alignment.  Can you go to the default_addtocart.php at line 32 and please add a line break.

Otherwise it looks good!

Thanks,
Chuck

RogierBR

Hi,

I have been trying to get this nice display to work, but to no avail.
In multiple folders of my installation I can see default.php files as well as template.css files.

Copying the file to the mytemplate/template/css folder did not lead to any changes on the screen

Thanks,
Roger

cas

Copy the info inside the attached template.css file into your existing yourtemplate/template/css/template.css. 

The default_addtocart.php goes here: yoursite/components/com_virtuemart/views/productdetails/tmpl/default_addtocart.php
It just adds a line break at the end of the tooltip.

Good luck!

lorartemis

Hi Cas, I'm trying to achieve this custom image alignment and can't get the images to line up with the radio buttons. 

Mine are below other custom fields for sizing options and when I change the width to 17% (or make any change) it works on all the fields and not just the image/custom field.
I'm wondering if changing the CSS and adding styling for product-field-type-M might do the trick?






[attachment cleanup by admin]

cas

Hi lorartemis,

Did you make the change to the default_addtocart.php to add a line break after the tooltip on line 32?  It looks like your radio buttons are on the same line as the Fabric Colour - Outer.  Once you add the line break change, then it is just a matter of adjusting your CSS until everything lines up properly. 

Good luck!
Chuck

lorartemis

Hi cas, thanks for the reply.  I made that change, but whatever I do, the radio buttons still sit at the right and push a colour image down a row, this time it's the right hand image rather than the left :-)

cas

#87
Hi lorartemis,

Once you add the line break on line 32, everything else is done with CSS adjustments. I know it's tricky to get just the right sitteings, but it does work. 
Go to my site link and use Firebug in Firefox to see each of the CSS settings:  https://www.hairextensionsfair.com/shop/full-head-clip-in/pp-straight-16-in-detail
Here is a test site I have with larger images for you to see the CSS settings: https://www.designerfurniturecenter.com/furniture/living-room/sofas/sofa-detail

I'm using VM2.0.6.

Chuck



dariete79@gmail.com

Can anyone help me? I tried set the modifications reported in reply #34 but still the result is the one here:
http://scatolarte.it/component/virtuemart/scatole/scatola-semplice-detail?Itemid=0

Tks in advance for the help.
Dario

cas

This is because Milbo decided to change the default product layout page from a 50% / 50% split to a 60% / 40% split after everyone had their website done!  Thanks Milbo.  Milbo, please put it back to 50% / 50% split so every can use this post.