Hello,
Some images on my site are very big. How can i better scale the image on the product page and featured product on the homepage?
Thanks Jr
Hello David,
Thanks for your reply. I'm using the new template. Is it the same then?
Greetings JR
Hello Jr,
For the latest template (Responsive HTML), images should be scaled appropriately by Foundation by virtue of the containing elements of the grid layout, however you can fine tune this manually through the template's own CSS. for Featured Products in html/default.css look for the following markup beginning at line 32:
.pt_fp_image {
border: 0;
height:100px;
max-width:none;
}...and replace with, for example:
.pt_fp_image {
border: 0;
height:100px;
max-width:100px;
max-height:100px;
}Similarly for the main product image, to keep everything contained look for the following markup beginning at line 166:
.pt_p { /* product */
}...and REPLACE with:
.pt_p { /* product */
}
.pt_t img {
max-width:200px;
max-height:200px;
}...or as required. Don't forget to do a hard refresh (normally CTRL+F5) in your browser after modifying CSS to ensure that it is reloaded by the browser.
Hope this helps!
Cheers,
David.
--
PriceTapestry.com
Thank.
And how can i scal the pics on the category pages? for example see {link saved}
Hello Jan,
The images on the category result pages (and similarly merchant / brand result pages) are generated by the search results HTML module, so in html/default.css look for the following class definition beginning at line 126:
.pt_sr_image {
border: 0;
}...and insert any width / height / max-width / max-height attributes as required. By default Foundation will scale the images to 100% of the containing DIV width.
Cheers,
David.
--
PriceTapestry.com
Hello Jr,
I know you've been using the script for some time now so assuming that you're running the default template from the 13/03 distribution you can control the Featured Products image size by way of the .featured img class definition in html/default.css. In that file, look for the following code at line 97:
.featured img {border: 0;
}
...and REPLACE with:
.featured img {border: 0;
max-height: 100px;
max-width: 100px;
}
You may need to co-ordinate this with any height / width attributes in the <img> tag in html/featured.php - the easiest thing to do is probably to remove any that are in place there and size the image entirely through the CSS.
The main product image also has a width attribute (180 by default) in the <img> tag in html/product.php, so again, what I would suggest is removing this and sizing the image entirely through your default.css file, using the .product_img img selector .e.g
.product_img img {max-width: 200px;
max-height: 200px;
}
Hope this helps!
Cheers,
David.
--
PriceTapestry.com