Best webshop logo size

[jpeters]

Hello,
What is the best format and resolution for the webshop logo?

Online and pdf its okay and scaled. But the email html format is to big..
No matter what resolution i use , the image to large .. or with smal resolution the logo on the invoice pdf does not look scharp.
I cannot find the best resolution and format..
Currently using png because of transparent background

[dmlwebal]

Hi

Not strictly a Phoca Cart issue of course, more CSS really.

Depending on the template/framework you use there will probably be a logo 'size' in place in the CSS and this is where you need to start.
So, make a logo the same size as you wish it to display on the largest screen size viewed.
PNG is fine and you can optimise this using tiny-png (https://tinypng.com/)
Insert your new optimised logo into your template
Now use Chrome Web Tools Inspector to use CSS and position/size the logo as you require, then paste the CSS into your custom css

I'm guessing you're ok with CSS and familiar with your browser web dev tools - personally I use the built in Chrome tools

I would strongly recommend Jan's Phoca Premiere template (https://www.phoca.cz/phocacartdemo/premiere/) as a base. This makes use of Gantry5 which is by far the fastest and cleanest Joomla template builder about, but it does require competent HTML and CSS to achieve the best outcome.

To further your image optimisation, you can use this extension to convert your site images to webp (Phoca already handles the product images).
https://dj-extensions.com/downloads/cat ... 54-dj-webp

And, smart use of JCH optimise will make a positive difference to your site speed too.
https://www.jch-optimize.net/downloads.html

Hope that this helps

David

[jpeters]

Hello dmlwebal,
it's not about the size of the image .. for that i already us a plugin to optimize the images (PXL compressor).
my question is about the optimal resolution of the image used for invoicing.
PDF invoicing does a nice job resize it correctly so it fits on the invoice.
but the html invoice (online / mail) does not resize it / resize it correctly..

[dmlwebal]

Yes, I did speed read the original post!

I think it will still be a similar issue of CSS or inline styles within the email template setup. I shall take a look at the files tomorrow and get back to you.

Regards
David

[Jan]

Hi, where do you set the logo? If the store logo in options, there is no specific setting for email.

The logo is set in layout order.php

components\com_phocacart\layouts\order.php

It has class so it can be changed in HTML output in browser:

Code: Select all

if ($store_logo != '') {
	$o[] = '<div><img class="ph-idnr-header-img" src="'.JURI::root(false). ''.$store_logo.'" /></div>';
}

but there is no inline style e.g. for using in email, so the logo stays unchanged there and the best method is to set a logo with 100% size (in email it will be displayed as 100% size, in other parts, it can be somehow influenced by class.

The last option is to make own override for order.php file.

If such case you can define specific rule for email only with following condition:

Code: Select all

if ($d['format'] == 'mail') {
  // only email output
}

Jan