High-Resolution logo.gif?

28 Jan 2007, 08:31

#1

Zen Follower

Join Date:: Oct 2006
Posts:: 107
Plugin Contributions:: 0

High-Resolution logo.gif?

I replaced the Zencart logo (admin/images/logo.gif) with my own. The trouble is, this logo is also used on the invoice and packing slips. When I print these out on a laser printer, the logo looks terrible at 72dpi. To print the logo at 600 dpi requires a logo.gif file that is over 1500 pixels wide, far too big for use on a monitor.

How can I use a high-resolution logo.gif but force it down to the proper sizing to view on a screen? I know how to do this in HTML, but this is obviously more complicated.

Is this a configuration setting? A stylesheet hack? A code hack?

28 Jan 2007, 08:51

#2

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: High-Resolution logo.gif?

The files used for emails > invoices etc are different than those used for screen/web presentation.....

Look in the /email folder for header.jpg and alter this file

28 Jan 2007, 20:59

#3

absoluteblock

Zen Follower

Join Date:: Oct 2006
Posts:: 107
Plugin Contributions:: 0

Re: High-Resolution logo.gif?

kobra:
The files used for emails > invoices etc are different than those used for screen/web presentation.....

Look in the /email folder for header.jpg and alter this file

I'm not so sure about this...logo.gif is the Zencart logo. It appears in lots of places, including the page header in the admin console. The same file is used on the packing slips.

28 Jan 2007, 23:35

#4

ryk

Totally Zenned

Join Date:: Oct 2004
Posts:: 3,644
Plugin Contributions:: 6

Re: High-Resolution logo.gif?

kobra=3506 posts; absoluteblock=9 ...listen to the advice! :laugh:

28 Jan 2007, 23:56

#5

absoluteblock

Zen Follower

Join Date:: Oct 2006
Posts:: 107
Plugin Contributions:: 0

Re: High-Resolution logo.gif?

Ryk:
kobra=3506 posts; absoluteblock=9 ...listen to the advice! :laugh:

He gave me advice for something that doesn't apply to my situation. I don't blame Kobra for that, I probably didn't explain the problem very well. admin/images/logo.gif is used in headers, invoices, and packing slips. If you don't believe me, do a search and you'll see for yourself.

How about trying to understand my question instead of casting me off as an idiot?

29 Jan 2007, 00:18

#6

stagebrace

Totally Zenned

Join Date:: Jan 2005
Posts:: 985
Plugin Contributions:: 0

Re: High-Resolution logo.gif?

The dpi of a graphic is defined within the graphic when the image is saved. You will need a good graphic program to modify the print dpi settings.

29 Jan 2007, 00:32

#7

absoluteblock

Zen Follower

Join Date:: Oct 2006
Posts:: 107
Plugin Contributions:: 0

Re: High-Resolution logo.gif?

stagebrace:
The dpi of a graphic is defined within the graphic when the image is saved. You will need a good graphic program to modify the print dpi settings.

I saved the graphic at 600dpi in Photoshop. This made a gif image that was over 1500 pixels wide - obviously too big for a monitor.

What I am looking for is a way to force the image down to smaller screen dimensions by using code.

29 Jan 2007, 00:41

#8

stagebrace

Totally Zenned

Join Date:: Jan 2005
Posts:: 985
Plugin Contributions:: 0

Re: High-Resolution logo.gif?

Here is a link to some info on the use of HTML and image sizing.

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_adj

29 Jan 2007, 00:53

#9

absoluteblock

Zen Follower

Join Date:: Oct 2006
Posts:: 107
Plugin Contributions:: 0

Re: High-Resolution logo.gif?

stagebrace:
Here is a link to some info on the use of HTML and image sizing.

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_adj

As I mentioned in my first post, I already know how to do this in HTML.

Zen Cart uses a different method of specifying the dimensions using PHP. That's what is hanging me up.

29 Jan 2007, 00:58

#10

absoluteblock

Zen Follower

Join Date:: Oct 2006
Posts:: 107
Plugin Contributions:: 0

Re: High-Resolution logo.gif?

I think I may be in the right location.

admin/includes/languages/english.php has the following:

 
// added defines for header alt and text
define('HEADER_ALT_TEXT', 'Admin Powered by Zen Cart :: The Art of E-Commerce');
define('HEADER_LOGO_WIDTH', '200px');
define('HEADER_LOGO_HEIGHT', '70px');
define('HEADER_LOGO_IMAGE', 'logo.gif');

I can change the HEADER_ALT_TEXT successfully, but anything I do to the width and height has no effect. In fact, the current width and height have no effect.

29 Jan 2007, 01:20

#11

stagebrace

Totally Zenned

Join Date:: Jan 2005
Posts:: 985
Plugin Contributions:: 0

Re: High-Resolution logo.gif?

Back to Photoshop. Are you saying you cant independent change the screen pixels and print pixels?
If this is true then I would circle your question above "Code Hack?", and use your HTML knowledge. But it really would not be a hack since it would be on a template file.

29 Jan 2007, 02:14

#12

absoluteblock

Zen Follower

Join Date:: Oct 2006
Posts:: 107
Plugin Contributions:: 0

Re: High-Resolution logo.gif?

stagebrace:
Back to Photoshop. Are you saying you cant independent change the screen pixels and print pixels?
If this is true then I would circle your question above "Code Hack?", and use your HTML knowledge. But it really would not be a hack since it would be on a template file.

I can change the document size and dpi resolution or the screen pixel dimensions. The higher dpi resolution I specify, the more pixels the image will be on the screen.

What I would like to know is why the dimensions in the code I posted earlier are ignored.

29 Jan 2007, 02:36

#13

stagebrace

Totally Zenned

Join Date:: Jan 2005
Posts:: 985
Plugin Contributions:: 0

Re: High-Resolution logo.gif?

Would you mind letting me try and adjust the picture with paint shop pro?

29 Jan 2007, 04:45

#14

absoluteblock

Zen Follower

Join Date:: Oct 2006
Posts:: 107
Plugin Contributions:: 0

Re: High-Resolution logo.gif?

Let me play around with the image file a little bit more, then I will let you have a look at it. It's good Photoshop experience for me.

To be honest, I am more bothered by the code being ignored than the lower resolution of the logo on paper.

 
// added defines for header alt and text
define('HEADER_ALT_TEXT', 'Admin Powered by Zen Cart :: The Art of E-Commerce');
define('HEADER_LOGO_WIDTH', '200px');
define('HEADER_LOGO_HEIGHT', '70px');
define('HEADER_LOGO_IMAGE', 'logo.gif');

29 Jan 2007, 05:32

#15

stagebrace

Totally Zenned

Join Date:: Jan 2005
Posts:: 985
Plugin Contributions:: 0

Re: High-Resolution logo.gif?

From what I see the default template as designed by the crew, no longer supports those variables. Its function was or can be moved over to CSS and the actual picture properties.

But keep in mind, if you don't like the default template, change it. Thats the Zen Cart magic.

29 Jan 2007, 10:36

#16

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: High-Resolution logo.gif?

To print the logo at 600 dpi requires a logo.gif file that is over 1500 pixels wide, far too big for use on a monitor.

Not sure that I am understanding what your issue here is.

The dpi is just that - dots per inch - and does not increase the width or height of the image as you suggest.

If I have a 1x1 inch image @ 72 dpi I can also have a 1x1 inch image at 600 dpi with only an increase in the file size Not the image dimensions.

Being this is on the admin side and you have located the admin image dir, these images are not used for the store front (screen) and you could use a high res (large file size) image and then only you suffer the loading lag but this would be the image printed

29 Jan 2007, 22:39

#17

absoluteblock

Zen Follower

Join Date:: Oct 2006
Posts:: 107
Plugin Contributions:: 0

Re: High-Resolution logo.gif?

kobra:

If I have a 1x1 inch image @ 72 dpi I can also have a 1x1 inch image at 600 dpi with only an increase in the file size Not the image dimensions.

I've tried different dpi resolutions with the same screen dimensions. When printed, 72 dpi looks really bad and 600 dpi looks bad too.

However, if I specify 600 dpi and large screen dimensions (1500 pixels wide or bigger) and then use HTML to force it down to 700 pixels wide, the image looks awesome on a laser printer.

On the packing slip, here is what appears in the browser source file:

 
<img src="images/logo.gif" border="0" alt="logo" title=" logo"></td>

The PHP code to create this looks like the following:

<?php echo zen_image(DIR_WS_IMAGES . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT); ?></td>

The problem is I don't know how to specify image widths in PHP. Is this done in the PHP code above, in a stylesheet, or in a template file?

29 Jan 2007, 23:09

#18

kuroi

Totally Zenned

Join Date:: Apr 2006
Posts:: 10,475
Plugin Contributions:: 9

Re: High-Resolution logo.gif?

Kobra's earlier advice was heading in the right direction. There are three logo files, two of them similarly named. You're not being specific about which you are altering but everything that you've described would fit with you concentrating all your changes to the includes/templates/YOUR_TEMPLATE_NAME?images/logo.gif file.

That file is used for screen display in the catalog section of your store and it's resolution is determined by the values set in the header.php file that you discussed earlier. It don't matter how many pixels you cram into this file, it's still gonna get crushed right down to those dimensions by browsers, so all them extra pixels is just wasted bandwidth for your visitors.

The image used on invoices and other paperwork is held in admin/images/logo.gif file. This is where you can go wild and cram in as many extra pixels as your printer can stand.

Finally, emails use the email/header.jpg file. No real constraints on resolution for this. But no point in adding too many either as you'll only blow the excess off the side of your customers' screens.

The names and formats of any and all of these files can be changed. You just need to root out all the places that they're referenced. There aren't too many, so it's not too difficult.

30 Jan 2007, 01:20

#19

absoluteblock

Zen Follower

Join Date:: Oct 2006
Posts:: 107
Plugin Contributions:: 0

Re: High-Resolution logo.gif?

kuroi:
Kobra's earlier advice was heading in the right direction. There are three logo files, two of them similarly named. You're not being specific about which you are altering but everything that you've described would fit with you concentrating all your changes to the includes/templates/YOUR_TEMPLATE_NAME?images/logo.gif file.

Re-read my original post. I specified that it was the admin/images/logo.gif file.

kuroi:

That file is used for screen display in the catalog section of your store and it's resolution is determined by the values set in the header.php file that you discussed earlier. It don't matter how many pixels you cram into this file, it's still gonna get crushed right down to those dimensions by browsers, so all them extra pixels is just wasted bandwidth for your visitors.

Several posts back, I mentioned that the image dimensions for the admin/images/logo.gif file are ignored. I can change the image's ALT text, but the numbers have no effect on the sizing.

kuroi:

The image used on invoices and other paperwork is held in admin/images/logo.gif file. This is where you can go wild and cram in as many extra pixels as your printer can stand.

This is precisely what I'm trying to do. I just need to know how to force the browser to size it properly on the screen. I don't know how to do it in PHP.

30 Jan 2007, 01:37

#20

absoluteblock

Zen Follower

Join Date:: Oct 2006
Posts:: 107
Plugin Contributions:: 0

Re: High-Resolution logo.gif?

Just to be clear where my problem is, here is the code.

This is in /admin/includes/languages/english.php

// added defines for header alt and text
define('HEADER_ALT_TEXT', 'Admin Home');
define('HEADER_LOGO_WIDTH', '800');
define('HEADER_LOGO_HEIGHT', '20');
define('HEADER_LOGO_IMAGE', 'logo.jpg');

I can specify any HEADER_ALT_TEXT that I want and it changes accordingly like it should. But the WIDTH and HEIGHT numbers have no effect on the displayed image size.

If logo.jpg is 1600x800, it displays as 1600x800, not 800x20.

Why is this happening, and how can it be fixed?