CJH Posted September 4, 2014 Share Posted September 4, 2014 When a product .jpg image is uploaded that is not square it is turned into a square by adding a white surround. If I use a .png it has a transparent background and it looks much better, but the files are much larger. I want to find (in css?) the control that makes the background white (ffffff) for jpg product images and change it to the same color as my background (or can I make it transparent?), but I can't find where the css controls this. Can anyone help? Link to comment Share on other sites More sharing options...
Paulito Posted September 4, 2014 Share Posted September 4, 2014 Hello It would be a good idea to give a: url or screenshot and say which PS version you are using, is it default or a bought template Also, which browser/s do you use By right clicking on an element you can easily find which css file and line number the code is on More info makes a quicker answer Paul Link to comment Share on other sites More sharing options...
CJH Posted September 4, 2014 Author Share Posted September 4, 2014 Thanks, I'd assumed it wouldn't matter about version within 1.6; my theme is heavily modified, but this part is the same as in bootstrap. Any jpg product image uploaded is converted to a square (of different sizes) by adding a surround, I think white as default. I'd like to find what controls that color. I seem to be having problems getting a screenshot to show here but any image from any Prestashop site seems to be the same, including the bootstrap demo: a square box with either the background color as the surround (if it is a png, with transparency) or white (created when a jpg is uploaded). Link to comment Share on other sites More sharing options...
duredo Posted September 4, 2014 Share Posted September 4, 2014 oh I see your problem, I hope your problem solved here http://www.prestashop.com/forums/topic/278163-change-generated-product-image-background/ 1 Link to comment Share on other sites More sharing options...
CJH Posted September 4, 2014 Author Share Posted September 4, 2014 Ah, yes, brilliant - thanks. I see that I can achieve the background color by setting to use png for everything, but jpgs give me higher quality at smaller file sizes, just to obtain the background color (that these instructions allow me to change with altering the code). Is there any way to set transparency for the image surround when using a jpg? In effect, put nothing in the 'box' and centre the image (instead of embedding it into a solid graphic)? I'm sure I once saw a module that controlled the color, which at least means it is easy to switch on and off, but I don't find it now. Link to comment Share on other sites More sharing options...
duredo Posted September 4, 2014 Share Posted September 4, 2014 do you mean transparent background when using a jpg? You can't make a jpg image transparent. how about try to using png and edit PNG compression on BO > Preferences > Images Link to comment Share on other sites More sharing options...
CJH Posted September 4, 2014 Author Share Posted September 4, 2014 (edited) Thanks for the thought. I realise jpg itself cannot be made transparent, but yes - I meant a transparent background when using a jpg. Really, Prestashop forces images to conform to a square by adding a surround, but does it have to? If a jpg was simply inserted in the right position, the background would de facto be ... the background (and in comparison with the current model, it would look 'transparent'). It's only equivalent to what happens if you put an inline image into a CMS page (sort of). I work full time with photos and I've tried compressing png more (either before upload or within BO), but the results don't look good. I prepare all images to best effect, including color space, resolution and number of colors. To obtain an equivalent appearance, a jpg is about five to ten times smaller than a png, all to obtain a transparent surround (the jpg obviously giving a faster display). I just tried one both ways - it looked good as jpg at high compression to 35kb size, but required 128 color compression to look equivalent and came in at 270kb as a png. So, I'm trying to find ways of making images smaller but look good, which is easiest by avoiding png. I'm thinking of always making my photos squares, by adding my own surround before uploading, but it adds work. Thanks for your ideas ... Edited September 4, 2014 by CJH (see edit history) Link to comment Share on other sites More sharing options...
Recommended Posts