In the category page my css styles are being overridden by inline styles generated by the platform. In the admin area under settings > system - images [tab] you get the option to resize your images. For example, I resized Product Image List Size to 400 x 400, to gain the same affect but this makes it impossible to style for responsiveness because it generates a url like so:
http://localhost/THEME/image/cache/data/demo/w1-**400x400.jpg**
The code that is generating this is in the root/catelog/view/theme/template/product/category.tpl
<img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" class="" /></a>
How do I stop Opencart from generating this size? Any ideas?
Thanks in advance for you help!
The problem you are facing is not the inline styles overriding the css rules because, by default, OpenCart css files don't set css properties for the width and height of the images in the category page.
OpenCart automatically resizes the images according to what you set in the Admin (in your case 400x400). Since there are no css rules, the displayed dimensions will be the image size.
To fix it you can try either of the following:
.product-list .image img and add width and height tags with a percentage value. Since you mentioned that you are trying to get a responsive site, you may need to have separate css files for different screen sizes. The problem that you may face is that if you are resizing the images to 400x400 pixels but your css definitions are scaling up the image to a bigger size (let's say 600x600 pixels), you will get a pixelated image that will look like low resolution. To fix it, look at the 2nd option.OpenCart resizes the images in order to enhance performance and save on bandwidth. In the controller file, catalog/controller/product/category.php, around line 213 you will see the following line:
$image = $this->model_tool_image->resize($result['image'], $this->config->get('config_image_product_width'),
$this->config->get('config_image_product_height'));
This is the code that tells OpenCart to resize the image to the dimensions you defined in your Admin settings. If you wanted a responsive width and height, you can detect the user's device (with an opensource package like MobileDetect http://mobiledetect.net/) and adjust the resize dimensions according to the device used.
Hope this helps!