Jump to content
shoulders

images.inc.php made to use PNG

Recommended Posts

Hello

A long shot but has anyone rewrote the images.inc.php to output PNG files (with transparency) instead of Jpeg?

I would even settle for a resized JPEG with out the white background.

I have learned the basics of PHP but really I am lost.

Any help would be appreciated.

shoulders

Share this post


Link to post
Share on other sites

I just took a quick look. There are several functions on that page that have parameters that are either $imagetype ='jpg' or $filetype = 'jpg'. I believe if you changed those to $imagetype = 'png' and $filtetype = 'png' that will solve your problem.

Excuse me if I'm wrong as I didn't test it, but that seems to be what you want to do.

Share this post


Link to post
Share on other sites
I just took a quick look. There are several functions on that page that have parameters that are either $imagetype ='jpg' or $filetype = 'jpg'. I believe if you changed those to $imagetype = 'png' and $filtetype = 'png' that will solve your problem.

Excuse me if I'm wrong as I didn't test it, but that seems to be what you want to do.


hello,

i have tried altering just these to png but only JPEGs still get produced. no matter what i change in this script JPEGs still get made.

If anybody is interested, i am learning PHP basics from this amazing tutorial.
http://devzone.zend.com/node/view/id/627

Thanks for the suggestion

Share this post


Link to post
Share on other sites

update:

changing 'jpg' to 'png' does work, the reason i couldnt see it working is that the files/pictures created still have a .jpg ending and the stupid white background. I have manged to get rid of the white background and keep the resized pictures resized, but with transparent background.

I am now working on making it output proper pictures with .png extensions and another little problem, is if the picture is to small it still ends up with the white background and outputted as a jpg.

Share this post


Link to post
Share on other sites

With a few changes I now believe i have succeeded in allowing the use of PNG and therefore transparent backgrounds instead of the white background issue. However the outputted files still have the .jpg extension, anythoughts on how to fix this one would be helpful. jpg might be hardcoded in to prestashop so it could be helpful having the file extension left as .jpg.

I have included my images.inc.php for people to have a try.

DO NOT USE ON LIVE WEBSITE - i have not tested this a lot and i am very new to php programming.

Please can people try this new images.inc.php and let me know the results. on my small test site category and product images seem to reesize and look fine.

I can rewrite the script a couple of ways i think:

1- when a jpeg is used it is resized and a white background is added as now, gif is porcessed normally but pngs and processed to have a transparent background

2- both png and jpegs are processed to have transparent backgrouns (both will be produced as png with a .jpg extension), gifs i have not touched, this is the script i have uploaded and probably prefer.

I got a few errors when i edited a category with a png as a picture saying it was not a valid png. this might be donw to line 16 i have changed. i might change imagecreatefrompng($image)) back to imagecreatefromjpeg($image))

images.inc.php

Share this post


Link to post
Share on other sites

Sorry, did i get you right? You managed to get PNG with JPG extension and therefore with transparent background?
I would settle for this!

Share this post


Link to post
Share on other sites
Sorry, did i get you right? You managed to get PNG with JPG extension and therefore with transparent background?
I would settle for this!


yes this is correct.

Share this post


Link to post
Share on other sites

I haven't had any success with this idea.
If it's worked for you - can you describe step by step the process you have made it succeed and post links to any examples you have online.

Share this post


Link to post
Share on other sites

this might sound like a dumb question, why is it not working? can you be more descriptive.

is the white background present, is the picture getting resized and so on.

i assume you have replaced the file in question, have you regenerated the thumbnails.

The way it works on mine is. you upload any picture style, it is converted in to an image in memory, then it is outputed as a png but with a transparent background and a .jpg extension.

Share this post


Link to post
Share on other sites

Ok, having replaced the images.inc.php file with the one you included, I attempted to upload a PNG with .png and (faked) .jpg file extension. Both times an error occured and it was refused by the upload process - so I couldn't even get to the next step.

I have succeeded in doing it manually - i.e. overwrite an existing JPEG in the IMG/C/ folder (for category images) with a PNG renamed as a .JPG.
One category now displays the PNG without any border colour - which, whilst convoluted and slow, still achieves the desired cosmetic effect.

EG. www.twofeathers.co.uk/store/category.php?id_category=15

I could imagine someone writing a nice little module to make this hack much easier - providing an interface that allows you to browse an existing image on the server, crop the borders away (for category images at least), re-save as PNG then change the file extension to JPEG.

Otherwise, it's a Photoshop automation on a folder of images once you've finished creating your catalogue (or simply do it as you go - which wasn't an option for me really as I already have all the cat./prod. images pre-prepared).

Good luck with the endless mission to use PNG's though via the upload script.

Someone will tackle this issue seriously at some point.

T.x

Share this post


Link to post
Share on other sites
The way it works on mine is. you upload any picture style, it is converted in to an image in memory, then it is outputed as a png but with a transparent background and a .jpg extension.


Sorry, is this means that i can uplad any .jpg to mine site and regenerate and after that it is automaticaly converted to .png (named .jpg) with transparency?
If so, what colour uses for transparency? white?

Share this post


Link to post
Share on other sites

firstly, png's use alpha transparency not a defined colour.

1) in the script what happens is the image is loaded in to memory via imagegd, wheather this be a jpeg, png or gif.

2) if the picture is to big to fit in a defined size ($size or setting in the admin section for image resize), it is resized appropiately in memory

3) an image is now 'additionally' made in memory matching the $size/'admin image settings', it is then filled in with white, the white colour is then made transparent (in memory)

4) the two images are merged togther in memory and an image with the exact sizes required is produced and outputted as a file for prestashop.

my change were to make the outputted file png and to make the resized background exactly the same size as the resized outputted image therefore no white would be seen. file outputted .jpg but is actually a png.

i am not a programmer so this is what i think is happening. i can upload png/gif/jpg and maintain transparency. all files are outputted with .jpg extensions.

so in conlusion. use the file i have made. upload your files. transparency now seems to work. for old images regenerate thumbnails and the white background will dissapear. images that have already been converted in to .jpg will not revert to transparency as it has been removed.

not sure if you upload a jpg it will change to png. i think so. try it and let me know.

Share this post


Link to post
Share on other sites
With a few changes I now believe i have succeeded in allowing the use of PNG and therefore transparent backgrounds instead of the white background issue. However the outputted files still have the .jpg extension, anythoughts on how to fix this one would be helpful. jpg might be hardcoded in to prestashop so it could be helpful having the file extension left as .jpg.

I have included my images.inc.php for people to have a try.

DO NOT USE ON LIVE WEBSITE - i have not tested this a lot and i am very new to php programming.

Please can people try this new images.inc.php and let me know the results. on my small test site category and product images seem to reesize and look fine.

I can rewrite the script a couple of ways i think:

1- when a jpeg is used it is resized and a white background is added as now, gif is porcessed normally but pngs and processed to have a transparent background

2- both png and jpegs are processed to have transparent backgrouns (both will be produced as png with a .jpg extension), gifs i have not touched, this is the script i have uploaded and probably prefer.

I got a few errors when i edited a category with a png as a picture saying it was not a valid png. this might be donw to line 16 i have changed. i might change imagecreatefrompng($image)) back to imagecreatefromjpeg($image))


Works like a charm!!! Thank you for your contribution.

Share this post


Link to post
Share on other sites

You need to have imagecreatefrompng($image)) otherwise thumbnails won't be created for the back office product list. The full size immages will show and break the table.

Share this post


Link to post
Share on other sites
You need to have imagecreatefrompng($image)) otherwise thumbnails won't be created for the back office product list. The full size immages will show and break the table.


can you see any errors in the file i have uploaded. It all seems to work.

thanks

Share this post


Link to post
Share on other sites

hi shoulders, sorry i didn't use the file, i changed my file myself then spent ages searching for the cause of the problem. I posted this in case anyone edits the file themselves. You're file is fine.

I've just switched to the latest version of ps and only got the problem with this version.

Cheers

Share this post


Link to post
Share on other sites

Hi guys,

I'm also using another version of the images.inc.php to allow the transparency on png.
If you want to have a look to compare with yours, it's here : http://www.prestashop.com/forums/viewthread/15988/general_discussion/black_background_solved/

But it is also using file with a '.jpg' extension (even if they allow transparency) Does anyone know how to use '.png' files?

I've also found this one if anybody wants to have a look: http://secure.prestabase.com/knowledgebase/20/Unable-to-upload-png-to-product-images.html
but it's not working with me...

Cheers

Share this post


Link to post
Share on other sites

@sass thanks, i am only running 1.2.4 so when i have upgraded i will have a look.

@ GouMs, I will also revisit the other links posted here, thanks for those

Share this post


Link to post
Share on other sites

I guys,

I was actually still having some truble with the last file I sent you so I decided to create my own new one, and I obtained a very nice png image management, with good quality resizing, no border, transparency and progressive transparency.

Here is the file if anybody wants to deal with it.

Note: I haven't test it with jpg and gif...

Cheers

images.inc.php

Share this post


Link to post
Share on other sites

@ GousMs

Hello, your files works better than mine wine transparency but i would like a feature adding.

The original images.inc.php and mine both maintain the picture ratio and keep the size set in the preferences by putting the picture on top of a background and then remaking the picture, this allows me to keep my site looking good. your version does not do this process but seems just to resize the actual picture. is it possible for you to add this extra step back in to your file?

If you look at the pictures i have included where there is a white background i would like this transparent and this keeps everything neat and tidy.

*solved*
My images in the backoffices (Products in this Category) are full size and not the resized smaller image. Sass touched on this earlier, is this the causes. If this works on yours it could be an issue with my site. The location of the image is in the ../img/tmp/ folder, not in ..img/p/

*update - GousMs works correctely, some image files had not been removed from my last import.
Thanks

shoulders

15462_YlwtPT4iYc1SdUFNVPn8_t

15463_pe0yOIHofiROsGRC6Nny_t

Share this post


Link to post
Share on other sites
You need to have imagecreatefrompng($image)) otherwise thumbnails won't be created for the back office product list. The full size immages will show and break the table.


I can confirm this problem. GousMs works correctely. The admin product list images are created on the fly when view them in the backoffice not when you regenerate thumbnails)

thanks

shoulders

Share this post


Link to post
Share on other sites

Hi Shoulders,

I've actually been using only square images (same width and height) so I didn't think about your problem. But that's for sure definitely something we should consider. I will see what I can do, but I'm currently really busy as my shop is due to go online tomorrow ;)

I'll try to update the file next week.

Cheers,

Share this post


Link to post
Share on other sites
Hi Shoulders,

I've actually been using only square images (same width and height) so I didn't think about your problem. But that's for sure definitely something we should consider. I will see what I can do, but I'm currently really busy as my shop is due to go online tomorrow ;)

I'll try to update the file next week.

Cheers,


I have managed to change the standard one to use pngs and correctely size pictures in the BO. sass gave me the solution.

But after a week of trying to get my head around your file to do the file ratio thing i know it would be a better script to use. (maybe addition of filters to reduce size)

Good luck with the shop, i am just about to do the same.

Share this post


Link to post
Share on other sites

Sorry guys, a real novice with this....

Do I replace an existing images.inc.php with the new images.inc.php file on this thread?

If so, where is images.inc.php located - have been through all the folders and can't find it anywhere!

Sorry if this is a stupid question but I have been searching through threads for 2 days now trying to find a solution to why my .png files are not showing up as transparent once uploaded.

If I've got this right, the code in this .php file here will solve this automatically?

Can someone be kind enough to take me through the steps of what I need to do to get this working.

Here's a screenshot of my site currently. I'm looking to make the block headers, wiznav bar menu and backgrounds semi transparent. Have created the .pngs but they still show up as solid.

17184_Zs0UwsERBT4mPBo6XARU_t

Share this post


Link to post
Share on other sites

Hi shoulders,
Your images.inc.php is a big help. I got rid of the coloured backgrounds. Thanks a lot !

Share this post


Link to post
Share on other sites

I've tried all of the files on here and they completely break my prestashop (i.e. the admin panel won't load at all). I expect that it's because I have the latest version and things have changed.

Can anyone a) post all the changes they made, so that I can alter the most recent file accordingly, or B) post a more current version of images.inc.php?

Alternatively, could prestashop get rid of this JPG conversion? JPGs really suck because they look completely terrible for any graphic; they're optimized for photographs. PNGs are a lot better because there's no information loss, you can have transparencies, and even photos look great. I don't understand why prestashop would make this choice.

Share this post


Link to post
Share on other sites

Hello Aranae,

This is what I did on my current website : I have only replaced the original images.inc.php by the one given by Shoulders. I have just noticed one problem : in back-office, the images of the products in each category are big ones, instead of miniatures. But no big crash.

I use prestashop 1.2.5.

Maybe you could replace your images.inc.php by the original one, given when you download prestashop.

If you use Prestashop 1.3 alpha, then I can't be of any help.

Sincerely,

LT
ps : sorry if bad English...

Share this post


Link to post
Share on other sites

Ok, for some reason it isn't crashing now. I'm using prestashop 1.2.5.

Now, it uploads stuff, but it still converts .png to jpegs. !!!. I tried both people's images.inc.php

Share this post


Link to post
Share on other sites

In the img/p folder, images show a .jpg extension. Still, they behave like .png but the result is not always good.
I mean : I've juste made a test and noticed that when I upload a complex shape with transparency, it isn't well rendered. There are some white areas in the image.
Nevertheless, if you upload only square or rectangle shapes, transparency is ok. I guess the problem comes from the management of the alpha layers.

Someone started to develop a module. Here is the link :
http://www.prestashop.com/forums/viewthread/35820/modules_tiers/image_transparency_patch_a_tester
It is still uncomplete but can help.

Share this post


Link to post
Share on other sites

They don't behave like .png, at least not for me.

PNGs have lossless data compression. That means that what you put in should come out. It's very obviously still .JPG, because the PNGs I put in have gross compression artifacts.

I don't care about transparency, but I do care about the fact that it completely perverts my designs.

I have attached my input/output images to show you what I mean. Input is ladybug.png. Output is 6-52-large.jpg

JPEGs and GIFs were important in the days when the internet was slow. They allowed photos and graphics to load quickly while still allowing fairly good image quality, respectively. (GIFs suck for photos, JPGs suck for graphics)

But now we watch [spam-filter] video online. We don't need to conserve file space and bandwidth the way we used to. Why don't we use lossless image compression across the board? I mean, the difference between my lossless png and the compressed, ugly jpg is 4kb. 4 KILOBYTES. IT'S SO SMALL.

Ok, I'm done complaining now :D

20099_EK85yJCnXBL1Qd6VRbQY_t

20100_uWCMx3yBQYAB7w6HU6xg_t

Share this post


Link to post
Share on other sites

OK. I understand your problem better :-) Indeed, both images are very different.
In the images.inc.php, on line 40, it is possible to change the quality of the compression. It is originaly set to 86, which is usually enough.

I had a problem of compression when uploading the logo of the website I'm working on. As I didn't know (and still don't) where to change this precise parameter, I directly put my logo in the good folder, whithout using the back-office.

I hope that next versions of Prestashop will have better images management....

Share this post


Link to post
Share on other sites

Thanks for the line quote ^-^ That will definitely help, although it's not a perfect solution. And yeah, for my other graphics I do just manually replace the images. That will be too labor intensive when I start adding items, though :/.

Share this post


Link to post
Share on other sites

Thanks for the mod.

The only issue I seems to be having with the mod is that it seems to be ignoring the transparency color and converting all white to transparency, some images I have white within the image that I would like to keep.

have any one else experienced this?

Share this post


Link to post
Share on other sites

I just read through the code, it just seems that it always assumes that the color white ( 255,255,255 ) will be the transparent color.

Share this post


Link to post
Share on other sites

Hi,

Can anyone help me on this?
I am having the same problem as mentioned by sass, back office product list images displaying full size.
But I just can't get the solution to work.
Have tried out the image.inc.php files provided by both shoulders and GouMs but it leads to no where.

Can someone post a more detailed instructions on how to modify the coding?

Thanks in advance.

Share this post


Link to post
Share on other sites

Thanks everyone for your contributions.

For me, I wasn't trying to get transparencies issue solved like everyone else. I have been having issues with the php function imagejpeg() making the colours of the compressed images lighter than what was input. I couldn't stand this discrepancy in colours, so this solution, which uses imagepng() function solved the problem!

I used the file provided by GouMs. I found that no compression made the images too big, so I set the compression variable to a value that was not 0 (no compression). These changes were made on lines 70, 213 and 291.

for example, on line 70, from

$flag = imagepng($tmp, _PS_TMP_IMG_DIR_.$cacheImage, 0); // no compression


to

 $flag = imagepng($tmp, _PS_TMP_IMG_DIR_.$cacheImage, 8); // with compression!



Thanks again!

Share this post


Link to post
Share on other sites

Dear shoulders or whoever is able and willing to help

Thank you for your time. I am trying to use your file, so I can use images with transpanency, but I does not work for me,

When I upload your file, then I add a png picture to a product, still treats it as a jpg. Even, when I click on the new small icon, then the image is rewritten as jpg,

any suggestions? thank you again for your kind support

Regards,

Uyuco

Share this post


Link to post
Share on other sites

Hi all,

GouMs, your solution doesnt keep the aspect of the pictures, they get deforme. I also discovered that the option 'Regenerate thumbnails' plus it doesnt create them at all...

do you have a fix for this?

thanks!
Jose

Share this post


Link to post
Share on other sites

Hi all,

I am using the solution from shoulders with my transparent PNG and it seems to work fine. the files extensions are JPG but no side effects.
my problem is the size of the thumbnails... from the origianl PNG 600x600... 50Kb... I get a JPG 300x300 of 350 Kb!!
I tried the idea from Tommy of seting the compresion to 8 but nothing changes...

someone found the solution for this? otherwise my whole homepage is around 3Mb...

thanks a lot !

Jose

Share this post


Link to post
Share on other sites

Hi everyone,

I recently work on thoses matters, and I came up with a (hopefully) definitive solution :

- Correct Aspect ratio (transparent borders added if needed)

- Produce regular png file size

- Image regeneration works as expected.


The newly images.inc.php file is part of a module that you can find here : http://www.configurateurvisuel.fr/341-module-colorisation-automatique.html

It's a commercial module, and on top of correct png handling, you get product colorization as well !

Give it a try ... (more demos here and here)

Share this post


Link to post
Share on other sites
With a few changes I now believe i have succeeded in allowing the use of PNG and therefore transparent backgrounds instead of the white background issue. However the outputted files still have the .jpg extension, anythoughts on how to fix this one would be helpful. jpg might be hardcoded in to prestashop so it could be helpful having the file extension left as .jpg.

I have included my images.inc.php for people to have a try.

DO NOT USE ON LIVE WEBSITE - i have not tested this a lot and i am very new to php programming.

Please can people try this new images.inc.php and let me know the results. on my small test site category and product images seem to reesize and look fine.

I can rewrite the script a couple of ways i think:

1- when a jpeg is used it is resized and a white background is added as now, gif is porcessed normally but pngs and processed to have a transparent background

2- both png and jpegs are processed to have transparent backgrouns (both will be produced as png with a .jpg extension), gifs i have not touched, this is the script i have uploaded and probably prefer.

I got a few errors when i edited a category with a png as a picture saying it was not a valid png. this might be donw to line 16 i have changed. i might change imagecreatefrompng($image)) back to imagecreatefromjpeg($image))


Hi i just wanted to say thanks for your file upload. I tried this with the new 1.3.3 prestashop version and it works for me. Still doesn't accept pngs but works with GIF's. It maintaince the transparent background. Output is still in jpeg. Thanks again.

edit:

Just noticed one problem. Ini the back end the table in the catalog breaks up. The thumbnail of the image is wierdly elongated. Any solution to this shoulder

Share this post


Link to post
Share on other sites

Ini the back end the table in the catalog breaks up.

this is probably you are using images.inc.php that was designed for an older version of prestashop. If i get time before christmas i will look in to getting a revised version of this file working.

i think if you swap imagefromjpeg to imagefrompng in images.inc.php it should work. the files names still are jpeg even thought they are png.

shoulders

Share this post


Link to post
Share on other sites

Friends

I found no good solution about that...

I'd like to have .PNG files for all images, but thickbox... Couldn't get it right.

Until there is an official solution for .PNG manipulation in PrestaShop Core, I prefer adapting the images.inc.php file changing the White RGB (255,255,255) to match the store's main bgcolor, at:

$white = imagecolorallocate($newImage, 255, 255, 255);



Good luck for all.

DGV

Share this post


Link to post
Share on other sites

hi my friend

i tried two ways to create png instead of png

in the first i changed all "jpg" to "png" in some files like images.inc.php it was good but we should change lot of file and changing some jpg cause some bug

but the safest way is, you should always create png and jpg together for this work you should change this function in images.inc.php

function returnDestImage($type, $ressource, $filename)
{
  $pngpath=str_replace(array(".jpg"), array(".png"), $filename);
   $flag = false;
   switch ($type)
   {
       case 'gif':
           $flag = imagegif($ressource, $filename);
           break;
       case 'png':
           $flag = imagepng($ressource, $filename, 7);
           break;
       case 'jpeg':
       default:
                   imagepng($ressource, $pngpath, 7);
           $flag = imagejpeg($ressource, $filename, 90);
           break;
   }
   imagedestroy($ressource);
   return $flag;
}



and to display png images you should go to link class Link.php and change these functions

public function getImageLink($name, $ids, $type = NULL)
   {
       global $protocol_content;
       if ($this->allow == 1)
           $uri_path = __PS_BASE_URI__.'img/p/'.$ids.($type ? '-'.$type : '').'.png';
       else
           $uri_path = _THEME_PROD_DIR_.'img/p/'.$ids.($type ? '-'.$type : '').'.png';
       return $protocol_content.Tools::getMediaServer($uri_path).$uri_path;
   }    



   public function getCatImageLink($name, $id_category, $type = null)
   {
       return ($this->allow == 1) ? (__PS_BASE_URI__.'img/c/'.$id_category.($type ? '-'.$type : '').'.png') : (_THEME_CAT_DIR_.$id_category.($type ? '-'.$type : '').'.png');
   }



i tested it in prestshop 1.4 i hope

Share this post


Link to post
Share on other sites

So if i wanted a gif what would need changing
Can someone put all files that need changing for png or gif to be allowed, this should then answer all possible queries in future
one post showing all file modifications to allow gif png or jpg images

Share this post


Link to post
Share on other sites

In case anyone's still looking for solutions for this on PS 1.4, here's a step-by-step:

a) In your theme's "header.tpl" change "logo.jpg" to "logo.png";

B) In /tabs/AdminThemes.php change all instances of "logo.jpg" to "logo.png";

c) In /tabs/AdminPreferences, at around line 225, change:

elseif (!@imageResize($tmpName, _PS_IMG_DIR_.'logo.jpg'))

to

elseif (!@imageResize($tmpName, _PS_IMG_DIR_.'logo.png',NULL,NULL,'png'))

This avoids messing about with the image manipulation functions and is how 'imageResize' expects to be told that it should treat the image as a png. Hope this saves someone a headache. :-)

Share this post


Link to post
Share on other sites

Hi guys,

 

I also just fell about the problem that prestashop does NOT support PNG files for product images. :-/

 

It would be cool if one of you guys could tell me how to make the latest prestashop support transparent PNG images. Do I have to modify the core? Bad stuff... :-/

 

I would be really thankful for some tips.

Rassy

Share this post


Link to post
Share on other sites

How does any of this relate to the latest (1.5.3.1) version? I will need to begin adding a bunch of products to a new site and would rather have all the groundwork done and tested before I have to change 200 products by hand...

 

Also, why is it such a big deal for PS to handle .png files properly - yes, I understand that it converts everything to .jpg - but why?

Share this post


Link to post
Share on other sites

i think in ps 1.5.x it does now handle pngs and can leave the transparancy. if not somewhere i have some code a guy made that works better than mine did.

Share this post


Link to post
Share on other sites

Yo vi esta solucion en otro foro, tengo la versión 1.5.4.1

 

Hi!

Try to do this in admin and see if it helps:

preferences-->images--> scroll down to "images" set to: Use PNG only if the base image is in PNG format

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More