Welcome, Guest
Username: Password: Remember me
Use this Category for your support questions about Responsive Joomla Virtuemart Template - CoolMart (SKU# FLEX-00014)

TOPIC: Thumbnail display as per Blowout deals

Thumbnail display as per Blowout deals 9 years 8 months ago #10463

Hi

Have art as part of my product range. Art does not come in consistent sizes. Have set thumbnails 214 x 215, but I still get sw tooth effect when thumbnails display. See www.studiodart.co.za/index.php?option=com_virtuemart&view=category&virtuemart_category_id=94&Itemid=674

Blow deal module has some nifty ways to keep the size constant, irrespective of the size if the item. Can I use this for thumbnail display of products?
The topic has been locked.

Thumbnail display as per Blowout deals 9 years 8 months ago #10475

Hi,

open this CSS file:
www.studiodart.co.za/templates/flexible_coolmart/css/virtuemart.css

find this CSS rule:
.FlexibleThumbBrowseV1Pic img {
	max-width: 100%;
	max-height: 100%;
}

and replace it with this:
.FlexibleThumbBrowseV1Pic img {
	width: 100%;
	max-height: 100%;
}

The above CSS rules means: all the product thumbnails will manually be sized to cover 100% horizontally (100% of the product box)

if you apply the above CSS rule, you will get this look:

Attachment ScreenShot2014-07-27at9.42.19PM.png not found

Last Edit: 9 years 7 months ago by Support.
The topic has been locked.

Thumbnail display as per Blowout deals 9 years 8 months ago #10482

Hi

Tx for feedback. Updated on

www.studiodart.co.za/index.php?option=com_virtuemart&view=category&virtuemart_category_id=94&Itemid=674

Have applied. As per your picture I still get the saw tooth affect *Call for Price not aligned @ bottom). Landscape 03 on the left hand side of your illustration, should be stretched to fill whole height dimensions. This will show only portion of the horinzontal picture - in essence a centred view of what is available

Another question. Instead of having manufacturer picture, can I get name of manufacturer
The topic has been locked.

Thumbnail display as per Blowout deals 9 years 7 months ago #10512

Hi,

Then you can try this CSS rule:
#GridView .FlexibleBrowseThumbProductInner2 { min-height:345px;}
#MultiView .FlexibleBrowseThumbProductInner2 { min-height:315px;}

you can play around with the pixel values as you wish

so the boxes will have the same height. But it still won't look good and won't be professional solution though, because your thumbnail resolutions are so irrelevant.

About your 2nd inquiry. Actually this is a customization inquiry and we don't provide free support for customizations, but this one is easy, so here what you need to do:

Open PHP file:
/templates/flexible_coolmart/html/com_virtuemart/category/default.php

and look for this line:
 <div class="FlexibleCategoryManufacturerLogoList"> <a title="<?php echo $ManufacturerName; ?>"  rev="iframe|430|800"  rel="facebox" href="<?php echo $ManufacturerLink ?>"><img src="<?php echo $product->mf_images[0]->file_url_thumb; ?>" alt="<?php echo $ManufacturerName; ?>" /></a> </div>

NOTE: You will find this line in 3 different places (within the same default.php -- because there are 3 views: ListView, GridView, MultiGridView)

and modify that line as you wish, something like:
div class="FlexibleCategoryManufacturerLogoList"><?php echo $ManufacturerName; ?></div>

So, only the name will be printed. (instead of the picture)

If you like CoolMart and satisfied with the support you have received, please "write a review" on:
www.flexiblewebdesign.com/Joomla-Virtuemart-Templates/CoolMart

Rate CoolMart and write a couple of sentences to share your experience with the support team.
It won't take more than 2 minutes from you but it is extremely important for us.

Thanks in advance!

Regards,
Support
Last Edit: 9 years 7 months ago by Support.
The topic has been locked.

Thumbnail display as per Blowout deals 9 years 7 months ago #10544

Hi

Tx for feedback. Had look @ cleanmart size. The thumnail populate in consistant pattern, In the second row "flash" and "Frantic Tails" have different size thumbs, but writing @ bottom is aligned. The display is consistent with out jaged affect. How do they do it?

Attachment thumnails.png not found

The topic has been locked.

Thumbnail display as per Blowout deals 9 years 7 months ago #10551

hi,

Unfortunately you can do nothing about it. The fronted will be different from browser to browser.

having this CSS rule:
.pictureElement {display:table-cell; vertical-align:bottom;}

will position the category picture at the bottom in Firefox, but in Safari, Chrome and IE, the picture will keep staying at the top. Because those browsers don't support display:table-cell; rule and doesn't support vertically alignment css rules.

More info: stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div

the more professional way is to use;
.pictureElement {
   position:absolute;
   top:50%;
   margin-top:-100px // the half height size of the category picture -- which is not fixed in your case, so this method also wont work you.
}   

But this also won't for you, because the last rule (margin-top) is different for each category picture. You may do some further research about it, but as far as i know, there is no way to do what you are asking. You can't vertically centralized or positioned the elements.

I recommend you to use Photoshop and add extra white spaces at the bottom and top of the category pictures and make them all have the same aspect ratio 1:1 or 2:3, so all pictures will be vertically leveled.

Regards,
Support
Last Edit: 9 years 7 months ago by Support.
The topic has been locked.

Thumbnail display as per Blowout deals 9 years 7 months ago #10658

Hi

Tx for help - you guys are great.

You can close this item

Please include link where I can post some accolades

John
The topic has been locked.

Thumbnail display as per Blowout deals 9 years 7 months ago #10666

Hi,

Case solved, topic is closed.


If you like CoolMart and satisfied with the support you have received, please "write a review" on:
www.flexiblewebdesign.com/Joomla-Virtuemart-Templates/CoolMart

Rate CoolMart and write a couple of sentences to share your experience with the support team.
It won't take more than 2 minutes from you but it is extremely important for us.

Thanks in advance!

Regards,
Support
The topic has been locked.
Time to create page: 0.149 seconds

MaterialMart

for Virtuemart 3

Google's Material Design has finally arrived to Virtuemart

Virtumart Template - MaterialMart Virtumart Template - CleanMart Virtumart Template - CleanMart Virtumart Template - CleanMart

Fully responsive!

Buy Now   |   Live Demo