Category images won't enlarge on OC2.0.1.1

Quote

Post by Khal » Fri Jan 08, 2016 9:45 pm

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:

Code: Select all

   img-responsive { max-width:100%
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
Last edited by Khal on Sat Jan 09, 2016 9:41 pm, edited 1 time in total.

OC 2.0.1.1

Khal
Active Member
Posts
304
Joined
Thu May 24, 2012 9:24 pm
Location - Teesside, UK
Top

Re: Category images won't enlarge

Quote

Post by IP_CAM » Sat Jan 09, 2016 5:07 am

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/

My Github OC Site: https://github.com/IP-CAM
5'600 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.

User avatar
IP_CAM
Legendary Member
Posts
13060
Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland
Top

Re: Category images won't enlarge

Quote

Post by Khal » Sat Jan 09, 2016 6:05 pm

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?

OC 2.0.1.1

Khal
Active Member
Posts
304
Joined
Thu May 24, 2012 9:24 pm
Location - Teesside, UK
Top

Re: Category images won't enlarge on OC2.0.1.1

Quote

Post by IP_CAM » Sun Jan 10, 2016 1:39 pm

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/

My Github OC Site: https://github.com/IP-CAM
5'600 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.

User avatar
IP_CAM
Legendary Member
Posts
13060
Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland
Top

Re: Category images won't enlarge on OC2.0.1.1

Quote

Post by Khal » Sun Jan 10, 2016 5:58 pm

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?

OC 2.0.1.1

Khal
Active Member
Posts
304
Joined
Thu May 24, 2012 9:24 pm
Location - Teesside, UK
Top

Re: Category images won't enlarge on OC2.0.1.1

Quote

Post by agatha65 » Mon Jan 11, 2016 3:43 pm

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.

Suppliers Module - XML, CSV, XLS Product Feed Import and Update
Rich Snippets | Facebook Open Graph Meta Tags | WebP Images
Image

User avatar
agatha65
Active Member
Posts
365
Joined
Fri Mar 16, 2012 10:18 am
Location - Canada, QC
Top

Re: Category images won't enlarge on OC2.0.1.1

Quote

Post by Khal » Mon Jan 11, 2016 5:16 pm

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; ?>

OC 2.0.1.1

Khal
Active Member
Posts
304
Joined
Thu May 24, 2012 9:24 pm
Location - Teesside, UK
Top
Post Reply
Return to “Bug Reports”
Who is online

Users browsing this forum: Bing [Bot] and 3 guests