Page 1 of 1
Category images won't enlarge on OC2.0.1.1
Posted: Fri Jan 08, 2016 9:45 pm
by Khal
My product images won't resize on the category page, when I change the image size in Admin> Settings > Image
After searching in the forum, I found that other people have also had this issue, I think because the image is responsive. I have tried the fix given on this thread:
viewtopic.php?f=191&t=138166
This fix changes the column width of the image thumb to 12 instead of 2 in
Code: Select all
catalog/view/theme/default/template/product/category.tpl:
<div class="col-sm-2">
to
<div class="col-sm-12">
I have tried this and it doesn't work for me.
I noticed that my category images are using: <
Code: Select all
img class="img-responsive" width="228" height="228"
So I found the line:
and removed it in the file
Code: Select all
catalog/view/javascript/bootstrap/css/bootstrap.min.css
but still not change.
Does anyone know how to solve this issue and make the images resize on OC2?
Thank you
Re: Category images won't enlarge
Posted: Sat Jan 09, 2016 5:07 am
by IP_CAM
if you remove the entire CSS-based Routine, just to get rid of cat-images beeing responsive,
then, just don't wonder, if you have no longer responsive images anywhere, where
bootstrapping is part of the game. it would be more efficient, to just remove
class="img-responsive"
out of the category.tpl, to make it look like:
... img width="228" height="228" ....
But it will possibly break your visual 'Frame-Content', just be aware of such
Ernie
jti.li/shop/
Re: Category images won't enlarge
Posted: Sat Jan 09, 2016 6:05 pm
by Khal
Hi Ernie
Thanks for getting back to me. I want to keep the responsive class to keep the same visual layout, but just increase the image size. I have a clothing site and the images on the category page look silly this default small size. Surely there must be a way to make them bigger whilst keeping the responsive class? Other websites must do it some way?
Re: Category images won't enlarge on OC2.0.1.1
Posted: Sun Jan 10, 2016 1:39 pm
by IP_CAM
You should probably better contact VIETHEMES, a CSS-Pro around OC V-2. Modifications of existing Source is possibly not just a 'free' matter, on OC2. It's too much involved, possibly, and without testing your Site, and looking into a possibly Custom Theme, it usually just turns out into plainly wasted time.
Would you, just for the fun of it? But OC 2 is not longer as easy, as most of the responsive Themes are, by nature of things. So, don't take it personally, it would no help you anyway...
I am not in OC2, so, I cannot assist, when it comes to change CSS Values.
Good Luck
Ernie
openshop.li/cart/
Re: Category images won't enlarge on OC2.0.1.1
Posted: Sun Jan 10, 2016 5:58 pm
by Khal
Hi Ernie
Thank you for your honesty and for giving the suggestion to contact Viethemes.
I have the default theme so I don't understand why lots of other people aren't also having this issue?
Thank you anyway for your time. Hopefully someone else can help, please?
Re: Category images won't enlarge on OC2.0.1.1
Posted: Mon Jan 11, 2016 3:43 pm
by agatha65
First put the original files.
Next check your code - there is not such thing in the original template
img class="img-responsive" width="228" height="228"
width="228" height="228" are added form an extension or manually.
the original code looks like this:
Code: Select all
<img src="image-url-/imagefile-228x228.jpg" alt="product name" title="product name" class="img-responsive">
The image is re-sized according to the admin settings to the size from the admin only if it is displayed in a big screen.
If it is displayed in a mobile device is re-sized by bootstrap and for the smaller devices as phones is full width.
The image is positioned in a div that is set with bootstrap
Code: Select all
<div class="product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12">
If you want bigger images you need to change this line to display not 3 but 2 products per row.
Code: Select all
<div class="product-layout product-grid col-lg-6 col-md-6 col-sm-6 col-xs-12">
Than go to admin and change the image size to 456x456 or if your product images are not square to what is your image ratio - 456xcalculated height.
Re: Category images won't enlarge on OC2.0.1.1
Posted: Mon Jan 11, 2016 5:16 pm
by Khal
Hi agatha65
Thank you for your reply and for providing an informative response!
I can't find the line
Code: Select all
<div class="product-layout product-grid col-lg-6 col-md-6 col-sm-6 col-xs-12">
in my category.tpl file. I only have
Code: Select all
<div class="product-layout product-list col-xs-12">
I have tried to attach my category.tpl file to this message, but it won't let me, so I have added it below.
I haven't manually made any changes to my category.tpl file, but I did have an extension that turns off responsive view on tablets. However, I disabled that extension because it wasn't working properly. Maybe this is causing the issue?
Do you have an original category.tpl file for v2.0.1.1 please, so I can do a fresh install.
I really appreciate your help
Code: Select all
<?php echo $header; ?>
<div class="container">
<ul class="breadcrumb">
<?php foreach ($breadcrumbs as $breadcrumb) { ?>
<li><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a></li>
<?php } ?>
</ul>
<div class="row"><?php echo $column_left; ?>
<?php if ($column_left && $column_right) { ?>
<?php $class = 'col-sm-6'; ?>
<?php } elseif ($column_left || $column_right) { ?>
<?php $class = 'col-sm-9'; ?>
<?php } else { ?>
<?php $class = 'col-sm-12'; ?>
<?php } ?>
<div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?>
<h2><?php echo $heading_title; ?></h2>
<?php if ($thumb || $description) { ?>
<div class="row">
<?php if ($thumb) { ?>
<div class="col-sm-12"><img src="<?php echo $thumb; ?>" alt="<?php echo $heading_title; ?>" title="<?php echo $heading_title; ?>" class="img-thumbnail" /></div>
<?php } ?>
<?php if ($description) { ?>
<div class="col-sm-10"> <!--<?php echo $description; ?>--></div>
<?php } ?>
</div>
<hr>
<?php } ?>
<?php if ($categories) { ?>
<h3><?php echo $text_refine; ?></h3>
<?php if (count($categories) <= 5) { ?>
<div class="row">
<div class="col-sm-3">
<ul>
<?php foreach ($categories as $category) { ?>
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
<?php } ?>
</ul>
</div>
</div>
<?php } else { ?>
<div class="row">
<?php foreach (array_chunk($categories, ceil(count($categories) / 4)) as $categories) { ?>
<div class="col-sm-3">
<ul>
<?php foreach ($categories as $category) { ?>
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
<?php } ?>
</ul>
</div>
<?php } ?>
</div>
<?php } ?>
<?php } ?>
<?php if ($products) { ?>
<p><a href="<?php echo $compare; ?>" id="compare-total"><?php echo $text_compare; ?></a></p>
<div class="row">
<div class="col-md-4">
<div class="btn-group hidden-xs">
<button type="button" id="list-view" class="btn btn-default" data-toggle="tooltip" title="<?php echo $button_list; ?>"><i class="fa fa-th-list"></i></button>
<button type="button" id="grid-view" class="btn btn-default" data-toggle="tooltip" title="<?php echo $button_grid; ?>"><i class="fa fa-th"></i></button>
</div>
</div>
<div class="col-md-2 text-right">
<label class="control-label" for="input-sort"><?php echo $text_sort; ?></label>
</div>
<div class="col-md-3 text-right">
<select id="input-sort" class="form-control" onchange="location = this.value;">
<?php foreach ($sorts as $sorts) { ?>
<?php if ($sorts['value'] == $sort . '-' . $order) { ?>
<option value="<?php echo $sorts['href']; ?>" selected="selected"><?php echo $sorts['text']; ?></option>
<?php } else { ?>
<option value="<?php echo $sorts['href']; ?>"><?php echo $sorts['text']; ?></option>
<?php } ?>
<?php } ?>
</select>
</div>
<div class="col-md-1 text-right">
<label class="control-label" for="input-limit"><?php echo $text_limit; ?></label>
</div>
<div class="col-md-2 text-right">
<select id="input-limit" class="form-control" onchange="location = this.value;">
<?php foreach ($limits as $limits) { ?>
<?php if ($limits['value'] == $limit) { ?>
<option value="<?php echo $limits['href']; ?>" selected="selected"><?php echo $limits['text']; ?></option>
<?php } else { ?>
<option value="<?php echo $limits['href']; ?>"><?php echo $limits['text']; ?></option>
<?php } ?>
<?php } ?>
</select>
</div>
</div>
<br />
<div class="row">
<?php foreach ($products as $product) { ?>
<div class="product-layout product-list col-xs-12">
<div class="product-thumb">
<div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive" /></a></div>
<div>
<div class="caption">
<h4><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></h4>
<p><!--<?php echo $product['description']; ?>--></p>
<!-- <?php if ($product['rating']) { ?>
<div class="rating">
<?php for ($i = 1; $i <= 5; $i++) { ?>
<?php if ($product['rating'] < $i) { ?>
<span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
<?php } else { ?>
<span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
<?php } ?>
<?php } ?>
</div>
<?php } ?>-->
<?php if ($product['price']) { ?>
<p class="price">
<?php if (!$product['special']) { ?>
<?php echo $product['price']; ?>
<?php } else { ?>
<span class="price-new"><?php echo $product['special']; ?></span> <span class="price-old"><?php echo $product['price']; ?></span>
<?php } ?>
<?php if ($product['tax']) { ?>
<span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
<?php } ?>
</p>
<?php } ?>
</div>
<!-- <div class="button-group">
<button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $button_cart; ?></span></button>
<button type="button" data-toggle="tooltip" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-exchange"></i></button>
</div> -->
</div>
</div>
</div>
<?php } ?>
</div>
<div class="row">
<div class="col-sm-6 text-left"><?php echo $pagination; ?></div>
<div class="col-sm-6 text-right"><?php echo $results; ?></div>
</div>
<?php } ?>
<?php if (!$categories && !$products) { ?>
<p><?php echo $text_empty; ?></p>
<div class="buttons">
<div class="pull-right"><a href="<?php echo $continue; ?>" class="btn btn-primary"><?php echo $button_continue; ?></a></div>
</div>
<?php } ?>
<?php echo $content_bottom; ?></div>
<?php echo $column_right; ?></div>
</div>
<?php echo $footer; ?>