Hi,
On my personal website I post photos to share with family and friends. The images are displayed at a size/resolution that fits the screen nicely.
I would like to put a 'print hi quality' button underneath the images, which would allow Grandma to print using a higher-quality version of the image. I want Grandma to be able to stick a piece of photo paper in the printer and get a photo out (and avoid having to Download the high-quality jpeg file, finding where she saved it, opening it up in the local viewer app, and then printing it.)
I think using CSS alternate media tags must be the right way to do this (my audience will using up-to-date browsers, mostly IE) but I haven't quite got it right yet. I have come up with a jscript that derives the right filename at browser-load time and inserts <link rel=alternate media=print href=http://www.webdeveloper.com/forum/archive/index.php/originalimages/[filename].jpg> into the page on load. The alternate image IS loaded when I print, but the result still looks like it was printed from a browser (i.e. it says "http://www.beallfamily.net/events/album1/filename.jpg Page 1 of 1" etc at the top, and it is printed at screen resolution, not printer resolution.
Is what I want to do possible? If not, is anyone aware of a plugin that would support this?
Any ideas or help sincerely appreciated!I'm not shure if this can be done in CSS but, if you'd like another alternative try this:
1) Open the image in new window using the window.open() method.
2) Apply the print() function to that wondow and then it will print as usual
Hi Sciguyryan, thanks for your reply, however I've tried that approach, opening up a high-quality (3 megapixel) version of the desired image in a new window and using window.print().
You can see my sandbox attempt at it here: (<!-- m --><a class="postlink" href="http://www.beallfamily.net/travels/album4/test2.html">http://www.beallfamily.net/travels/album4/test2.html</a><!-- m -->)
An example of the disappointing output is here (PDF of output, big file!): (<!-- m --><a class="postlink" href="http://www.beallfamily.net/travels/album4/test2.pdf">http://www.beallfamily.net/travels/album4/test2.pdf</a><!-- m -->)
The mechanics work, but the output is not what I'm after:
it just prints the upper left part of the image, not scaled to fit the page, and
it prints the URL, date, page 1 of x, etc in the printable area, meaning the result is not something you'd want to stick in a picture frame.
Maybe I'm overlooking something obvious? At least I'm encouraged by having someone else think about the challenge with me!
Cheers,
Ben
<!-- w --><a class="postlink" href="http://www.beallfamily.net">www.beallfamily.net</a><!-- w --> (<!-- m --><a class="postlink" href="http://www.beallfamily.net">http://www.beallfamily.net</a><!-- m -->)Originally posted by diver864
... it just prints the upper left part of the image, not scaled to fit the page, and
That's based on user preferences. You could try changing the image dimensions using CSS to something like 7.5in wide by whatever tall. You'd have to know the image width to height proportion. That way the printer will print the picture the size you specify in CSS. I've never tried it, but the printer might automatically increase the resolution of the image if there are more pixels present. Rather, if the image is in reality larger than 7.5in wide, the printer will print every pixel, each pixel will be smaller in size. Kind of like increasing the resolution of the picture as you shrink it.Hmmm, thanks Toicontien. Could you please be a bit more specific? I'll give it a try, but I really know nothing about CSS, I'm just good with Google and 'cut and paste'. I did try an alternative (see original post) using <link rel=alternate media=print href=http://www.webdeveloper.com/forum/archive/index.php/originalimages/[filename].jpg>. Should there be something about the size in there? The mechanics of that worked before, too, but the header/footer stuff was still in the printout.
As a different line of thought (way off topic for CSS, I realize), is it possible to invoke write some sort of script that saves the file and then invokes the XP print mechanism if the user pushes a button and gives permission? XP has a good photo printing wizard that is automatically invoked when one hits 'print' on a jpeg file.
On my personal website I post photos to share with family and friends. The images are displayed at a size/resolution that fits the screen nicely.
I would like to put a 'print hi quality' button underneath the images, which would allow Grandma to print using a higher-quality version of the image. I want Grandma to be able to stick a piece of photo paper in the printer and get a photo out (and avoid having to Download the high-quality jpeg file, finding where she saved it, opening it up in the local viewer app, and then printing it.)
I think using CSS alternate media tags must be the right way to do this (my audience will using up-to-date browsers, mostly IE) but I haven't quite got it right yet. I have come up with a jscript that derives the right filename at browser-load time and inserts <link rel=alternate media=print href=http://www.webdeveloper.com/forum/archive/index.php/originalimages/[filename].jpg> into the page on load. The alternate image IS loaded when I print, but the result still looks like it was printed from a browser (i.e. it says "http://www.beallfamily.net/events/album1/filename.jpg Page 1 of 1" etc at the top, and it is printed at screen resolution, not printer resolution.
Is what I want to do possible? If not, is anyone aware of a plugin that would support this?
Any ideas or help sincerely appreciated!I'm not shure if this can be done in CSS but, if you'd like another alternative try this:
1) Open the image in new window using the window.open() method.
2) Apply the print() function to that wondow and then it will print as usual
Hi Sciguyryan, thanks for your reply, however I've tried that approach, opening up a high-quality (3 megapixel) version of the desired image in a new window and using window.print(). You can see my sandbox attempt at it here: (<!-- m --><a class="postlink" href="http://www.beallfamily.net/travels/album4/test2.html">http://www.beallfamily.net/travels/album4/test2.html</a><!-- m -->)
An example of the disappointing output is here (PDF of output, big file!): (<!-- m --><a class="postlink" href="http://www.beallfamily.net/travels/album4/test2.pdf">http://www.beallfamily.net/travels/album4/test2.pdf</a><!-- m -->)
The mechanics work, but the output is not what I'm after:
it just prints the upper left part of the image, not scaled to fit the page, and it prints the URL, date, page 1 of x, etc in the printable area, meaning the result is not something you'd want to stick in a picture frame.Maybe I'm overlooking something obvious? At least I'm encouraged by having someone else think about the challenge with me!
Cheers,
Ben
<!-- w --><a class="postlink" href="http://www.beallfamily.net">www.beallfamily.net</a><!-- w --> (<!-- m --><a class="postlink" href="http://www.beallfamily.net">http://www.beallfamily.net</a><!-- m -->)Originally posted by diver864
... it just prints the upper left part of the image, not scaled to fit the page, and
That's based on user preferences. You could try changing the image dimensions using CSS to something like 7.5in wide by whatever tall. You'd have to know the image width to height proportion. That way the printer will print the picture the size you specify in CSS. I've never tried it, but the printer might automatically increase the resolution of the image if there are more pixels present. Rather, if the image is in reality larger than 7.5in wide, the printer will print every pixel, each pixel will be smaller in size. Kind of like increasing the resolution of the picture as you shrink it.Hmmm, thanks Toicontien. Could you please be a bit more specific? I'll give it a try, but I really know nothing about CSS, I'm just good with Google and 'cut and paste'. I did try an alternative (see original post) using <link rel=alternate media=print href=http://www.webdeveloper.com/forum/archive/index.php/originalimages/[filename].jpg>. Should there be something about the size in there? The mechanics of that worked before, too, but the header/footer stuff was still in the printout.
As a different line of thought (way off topic for CSS, I realize), is it possible to invoke write some sort of script that saves the file and then invokes the XP print mechanism if the user pushes a button and gives permission? XP has a good photo printing wizard that is automatically invoked when one hits 'print' on a jpeg file.