Jump to content
prosiaq

Logo size and quality on PDF documents

Recommended Posts

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.

post-116120-0-84866200-1367329460_thumb.png

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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.. <_<

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.. :)

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Hi zAy,

 

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

 

Cheers,

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by Nihi (see edit history)
  • Like 5

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 !!!! :wub:

 

I guess this thread should be marked as SOLVED !

 

Cheers Nihi !!

Share this post


Link to post
Share on other sites

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... :/

Share this post


Link to post
Share on other sites

Just convert the image to JPG format.

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by tjsop (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

×
×
  • Create New...

Important Information

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