CODEWITHSUNDEEP
phpopencart
Arslan Khan
Arslan Khan

Reputation: 95

How to increase product image size in grid view in Opencart?

I cannot increase product gridview image size. Though I have increased list view image size by going to Admin->Extensions->Extensions->Themes and thereby editing default store theme. Here I can edit Product Image List Size. But here is no mention of Product Image Grid Size.

I do not know where to edit product image grid size. The List size has been increased but of no use because when someone opens the product, the default view is Grid View which is not increased. Though the List Size is increased but someone cannot see bigger image unless one does not click the List size because the default view when someone opens a product is grid view.

How can I increase image size in grid view? I am using default theme with OC 3.0.2.0.

Upvotes: 2

Views: 1268

Answers (2)

Mujahid Bhoraniya
Mujahid Bhoraniya

Reputation: 1584

Well, but an opencart doesn't provide any other image settings.

You could find out by looking into your stylesheet.css file, and possibly find different layout settings for product-list and product-grid Sections.

Then, you could add some min- or max-height/width or then a 'fixed' height/width image size Values to the individual Sections in the right places, to find out if it works. Still the responsive Function might still resize the images to a smaller Value, if no min-value has been set, but not to a larger one, and only, if a screen resolution gets smaller.

That's all I can do for you, and the time invested only depends on how complicated the Theme Coder worked. And depending on how it's been coded, it might not be possible either, without a fundamental rewrite of the sections involved. Don't forget to make a backup copy of the stylesheet first! But don't worry, you cannot ruin anything. And make sure, to always first RESET your entire Cache Systems, as well as the browser Cache, before testing for results.

Sample of such a Stylesheet section:

/* product list */
.product-thumb {
    border: 1px solid #ddd;
    margin-bottom: 20px;
    overflow: auto;
}
.product-thumb .image {
    text-align: center;
    margin: 10px;
}

.product-thumb .image a:hover {
    opacity: 0.8;
}
.product-thumb .image img {
    margin-left: auto;
    margin-right: auto;
}
.product-grid .product-thumb .image {
    float: none;
}
@media (min-width: 767px) {
.product-list .product-thumb .image {
    float: left;
    padding: 0 15px;
}
}
.product-thumb h4 {
    font-weight: bold;
}
.product-thumb .caption {
    padding: 0 20px;
    min-height: 60px;
}
.product-list .product-thumb .caption {
    margin-left: 230px;
}
@media (max-width: 1200px) {
.product-grid .product-thumb .caption {
    min-height: 210px;
    padding: 0 10px;
}
}
@media (max-width: 767px) {
.product-list .product-thumb .caption {
    min-height: 0;
    margin-left: 0;
    padding: 0 10px;
}
.product-grid .product-thumb .caption {
    min-height: 0;
}
}

Upvotes: 1

DigitCart
DigitCart

Reputation: 3000

Please note that there is this CSS property (from bootstrap) that does not allow the images to be larger than the product box: max-width: 100%;

The product box in the grid view has some col class like this:

<div class="product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12">

You can remove those classes from the twig file, like this:

<div class="product-layout product-grid">

Or you can add this CSS code:

.product-grid {
  width: auto;
  float: none;
  clear: none;
}

At the bottom of stylesheet.css to override the bootstrap column width:

catalog/view/theme/default/stylesheet/stylesheet.css

Then you may need to clear the theme caches and the browser caches to see the change.

Upvotes: 1

Related Questions