Logo size and quality on PDF documents

[prosiaq]

Where can I set quality of image displayed on pdf documents. On Theme selection page there is a Invoice Logo to upload. When I upload a file with resolution ex. from 500x 350 to 1100 x 770 image quality in pdf is ok but logo is too large (left size on uploaded image). When I change logo to smaller resolution logo on pdf become smaller but resolution is very bad.

Can any one help to resolve this problem? Thanks.

[IDRsolutions]

Hi Prosiaq,

 

I had a similar problem. By trial and error I discovered that the 'ideal' logo size seems to be about 415X95 pixels. Any other dimension is scaled to fit and the scaling of a jpeg (if you are using jpeg) is usually pretty terrible.

 

Additionally I discovered that the default display mode of the created PDF is 'Fit to Width'. This may be fine if the PDF reader window is opened smaller than your invoice, but if not, it will scale the PDF and the images inside it look awful (at least mine did). I have the JPEG quality in my image settings at 100%.

 

There was no obvious way to change this so I edited the raw tcpdf,php file (in /STORENAME/tools/tcpdf/tcpdf.php

CAUTION: Editing this file will mean changes won't be retained (possibly) when you next upgrade.

changing line 2044 (its a big file) FROM $this->SetDisplayMode('fullwidth')

TO $this->SetDisplayMode('real')

changes the default view to 100%. So when your customer opens your PDF invoice he will see your artwork as you would like it.

 

Hope this helps

[zAy]

Ok, i've been working on this issue also since 2 days... and i'm really upset with the PDF logo Quality..

 

I have turned the ground over and over again with Illustrator, Photoshop, EPS, AI, PNG, JPG, 8 bits, 32 bits.. tcpdf.php

 

In tcpdf.php, i found jpeg_quality set to 90, turned it to 100, NOTHING.

found dpi set to 72, turned it to 300, pdf invoice became 5 pages.. (why 300dpi ?? because PDF itself is like a printer, and all prints should be 300 dpi which seems to be missed by prestashop developpers )

Even if we upload a 600dpi logo for the invoice that is still under 292 KB (Max limit).. the logo still ugly... Microsoft word can print it better, the tcpdf file needs check up, i thought it was the uploader when we upload the invoice logo from BO, as even PNG logos seems to turn to JPG.. but i tried to manually FTP the logo, and still when generated into pdf.. UGLY..

 

I have tried and tried for 2 days, disabled resizing and forced resizing in tcpdf.php... tried higher resolution logo file (500px wide) with empty space and the logo on the top left corner (150px wide).. and it was a little bit better but still not acceptable.

 

What is the solution ? Invoice logo should be uploaded as 300 dpi and whatever resolution (as user wants) and the pdf generated should respect that logo.. HOW ? i'm not in a position to fix this.. i'm tired..

[yoyou0107]

I am a new freshman on Prtestashop,and I had bought a template of domain and web server,after installing Prestashop, I got a default website module,and try to use it firstly. But from the back office,I couldn't find the way to upload the logo file. Could you show me how to uploading the logo file? And what's the best format and size of logo file?

 

Also I would like to cancel the options of "SUPPLIERS" and "MANUFACTURERS".How to cancel them from the back office?

 

Thanks in advance.

[zAy]

yoyou,

 

Go to preferences > themes, to upload your logos, (jpg, png and gif are the formats) as for the size it depends how big you want it.

I suggest not more than 200px or 250px wide.. it depends on the shape of your logo if rectangular.. if if is square.. maybe around 100 x100 px

 

You may cancel suppliers and manufacturers from Preferences > General

I also suggest that you go to Preferences > SEO & URLS and delete the suppliers and manufactures pages so they won't be retreived manually or in sitemap...

 

Check also the sitemap.tpl file, (you need FTP to edit it) as i don't really remember if you should comment the code that displays suppliers and manufacturers links, or if they will be disabled automatically when you turn off from Generals menu.

 

 

Hope this answers you..

[yoyou0107]

Hi zAy,

 

Thanks a lot for your kind help.I have solved the logo.

 

But still couldn't cancel the supplier and manufacturer,as I have done by following your adivces.

Preferences > General choose "NO"

 

Preferences > SEO & URLS delete both.

 

 

But I didn't find where I can manage the sitemap,can you show me?

[yoyou0107]

I meet another problem,with the images displaying on the home page,I think its Image mapping,and try to upload image with dimension 535x300mm in back office, but whatever,couldn't be changed.

[zAy]

Hi yoyou,

 

Did they disappear from your website ? (manufacturers and suppliers) ?

If not, goto Modules > Modules and search for Manufacturers Block and Suppliers Block and disable them or uninstall them.

 

About sitemap, when you go to your website.com for example.. if you have a link above for sitemap click it, or add in address bar /sitemap

See if you still have the links for manufacturers and suppliers, if so, you need to comment the links code from sitemap.tpl file located under Themes>(your theme folder) if the default theme then it is in your themes/default/sitemap.tpl

For this as i said you need to edit the file from a FTP software.

 

Cheers

[yoyou0107]

Hi zAy,

 

Thanks for your help,you are a very kind man.I'm from China,if need any information from China,just tell me.

 

Now I meet another problem,with the images displaying on the home page,total 5pcs,can be changed by clicked,I think its Image mapping,and try to upload image with dimension 535x300mm thru back office, but whatever,couldn't be changed.

 

Can you show me where I can change for it?

 

I have the same problem with "contact us",just couldn't find the right place to update.

[IDRsolutions]

Hi zAy,

Did you fix your image problem? I also found this very frustrating. What I found was that jpeg files don't resize well if they contain fancy graphics (lots of curves), so this can really impact your output. When the PDF is created there is always some re-scaling involved and this appears to be where the quality problem is appearing.

 

While not particularly scientific, get out a pixel ruler and work out the rough dimensions of your output, and then play with the graphic sizes until your output is acceptable.

 

Also (as per previous post) change the default display of your PDF to actual size (rather than the fit-to-width default). The page only needs to be scaled slightly (103%) to really reduce the quality of the output, and again particularly using jpegs.

[zAy]

Hi Yoyou,

 

You are welcome buddy,

About the homepage images, I can't help as i have different template, I don't really remember the sizes of the default template,

but as a rule of thumb, either upload same size images as in demo when you installed the default theme (or prestashop) or play with the Css files to adjust the size of the image slider module.

 

Unless you meant the images you are uploading for the home page are not displaying.. or you don't know from where to do this, then i'm wondering where were you uploading these images from your back office as you said.... these can be found in Module > modules .. search for image slider and click on Configure.. (try uploading same size images as the module shows you by default)..

 

What do you mean about the contact us page ?

 

I strongly recommend that you read the guides or search the forum for each specific question..

 

Cheers.

[yoyou0107]

Hi zAy,

 

Thanks,I have solved all problems by configuring each module.

 

Cheers,

[zAy]

Hi IDR,

 

Well displaying the pdf in actual size is just a visual trick on screen.. as you said once you zoom it shows bad image.

The real result we are looking for is also when you print the pdf.. (on paper, is the real result no matter what zoom you have on screen)

 

I tricked this for now as a temp solution..

I have created a White JPEG (600x200 pixels) (300 dpi) and imported my logo into the upper left corner and scaled it according to the size i want on my invoice header... (of course your logo should not fit the whole image size, maybe 2/3rd of the width, make sure to put it on the top and the left).. save this jpeg normally with highest quality (NOT for web and mobile devices).. then upload and test.

 

make sure also the JPEG quality in tcpdf.php is 100 not 90 (search "quality" in the file and whenever you find jpeg quality = 90 change it to 100)

 

This is a better result than before (not crystal clear though).. let me know if it works for you.

 

Cheers.

[recthor]

If you wanna save these complicated steps and find a easy way, you can google imaging sdk and you will find many useful tools, or google how toresize image to get instructive articles. Good luck:) I think image processing programmes can enable to quickly resize pictures . i have use imaging sdk which can original layouts hyperlinks, Images and tables retained in word ,text, image, Epub, html.but i forgot download the wedsite ,go to google. By the way , pay attention to your system platform, select the suitable one . I use an imaging sdk driver found on the internet . Install it and it becomes a selectable processing option.Then you can resize your image in any program at all, including Adobe Acrobat .zoom in or zoom out on your own will. Just open the images, select resize ,and follow the setps given in the sdk, the task will be finished in several seconds. if you haven't found a good choice , you can have a try. best wishes.

[Nihi]

I had this exact same problem as well and maybe it helps somebody if I post it here.

First, you need your Logo in a Vector Format. I used svg. If you don't have your logo in a Vector Format, do it now. You will need it someday anyway.

Next, put your svg file into the /img folder (where the other logos are).

Next, modify the header.tpl File inside the themes/THEMENAME/pdf folder. If you do not have this folder, copy the complete pdf Folder from the root directory in there, so your changes wont be overwritting in the next update.

Now in the header.tpl file, change

<img src="{$logo_path}" style="width:{$width_logo}px; height:{$height_logo}px;" />

to

<img src="{$img_ps_dir}Name_of_your_Logo.svg" style="width:{$width_logo}px; height:{$height_logo}px;" />

 

Now your SVG File is properly linked. You can now use the Style Attribute to change the size.

Thats it, the logo in my pdfs are now in perfect quality.

 

I am using Prestashop 1.5.4.1

 

Greetings Nihi

Edited July 14, 2013 by Nihi (see edit history)

[tuk66]

First, you need your Logo in a Vector Format. I used svg.

.

I am not sure. I have a success with common images. Your eyes can't view pixels for resolution more than 300 dpi. So 300 px for every inch (25.4 mm) on the invoice is sufficient.

[Nihi]

Well maybe you are right, but according to zAy its not crystal clear even with his 300dpi image.

I don't know why you even replied to my post, i was just sharing the way it worked best for me. I did not test it myself with a 300dpi picture, but I know that using a Vector graph is the best and most professional solution.

I do not want to be offensive, but posts like yours just look like advertisment (your signature) to me, especially when the thread is related to the service you are offering.

Greetings Nihi

[sannie]

Thanks Nihi! I tried your solution with svg format and my pdf invoices look great now !

[zAy]

Very good Nihi !

 

I was waiting for such solution, I didn't thought of changing the image extension and modifying the header.tpl, my thoughts were stuck on the JPEG, GIF and PNG formats as said in the BO.. and tried to get the best out of them.

 

Your solution is amazing, not only when printing, also on screen when zooming the pdf file, the logo is just like any text font, always CRYSTAL CLEAR !!!!

 

I guess this thread should be marked as SOLVED !

 

Cheers Nihi !!

[brm]

works perfect, cheers !

[ilan316]

works perfect

[MissLili]

Hi guys, this solution looks amazing! Sadly I just tried it with PS1.6.0.6 and get this error:

 

TCPDF ERROR: Can't open image file: /home/shop/public_html/cache/tcpdf/mska_b1c4i423bkijb234uij443b

 

Could it be that they change the TCPDF so it doesn't accept svg images anymore? That would be very sad... :/

[tuk66]

Just convert the image to JPG format.

[MissLili]

Ok it's working just fine now Thanks for you help!

[misu3108]

This worked for me with logo Invoice displaying in high quality:

 

http://www.prestashop.com/forums/topic/288310-solved-invoice-and-delivery-pdf-logo-not-displaying-correctly/

[Nick Lappage]

Works great for me at last. Had to find an online svg convertor first though (I used vectormagic.com in case you wanted to know)

Using PS 1.5.6.2

[vapforum]

I had this exact same problem as well and maybe it helps somebody if I post it here.

First, you need your Logo in a Vector Format. I used svg. If you don't have your logo in a Vector Format, do it now. You will need it someday anyway.

Next, put your svg file into the /img folder (where the other logos are).

Next, modify the header.tpl File inside the themes/THEMENAME/pdf folder. If you do not have this folder, copy the complete pdf Folder from the root directory in there, so your changes wont be overwritting in the next update.

Now in the header.tpl file, change

<img src="{$logo_path}" style="width:{$width_logo}px; height:{$height_logo}px;" />

to

<img src="{$img_ps_dir}Name_of_your_Logo.svg" style="width:{$width_logo}px; height:{$height_logo}px;" />

Now your SVG File is properly linked. You can now use the Style Attribute to change the size.

Thats it, the logo in my pdfs are now in perfect quality.

 

I am using Prestashop 1.5.4.1

 

Greetings Nihi

 

 

Thank you it's perfect !

 

Here is my 2cents 

http://vectormagic.com/online/ -> the best site i found to do the conversion JPG to SVG. 

 

For me i had to change the file in /www/pdf because in /THEMENAME/pdf folder its empty. 

 

I made the same on supply-order-header.tpl and it worked. 

Edited February 26, 2016 by tjsop (see edit history)

[BoKr]

tjsop

 

you should copy the files in mind from /pdf to themes/THEMENAME/pdf

 

This way you make sure that your edits remain even when updating.