Jump to content

using css to create printable graphics


kmkoop

Recommended Posts

I have done it before, but I can't remember how i did it. I feel so stupid! I remember having to create a saved graphic as a jpeg and as a pdf. The really sad part is I also remember writing it down so I could do it again and I lost the directions. Can anybody point me in the direction of some really helpful hints on how to save a jpeg on my website and make it printable.

Link to comment
Share on other sites

What code are you currently using to display the image? Using a standard image tag:

 

<img src="yourimage.jpg" />

 

Should print fine? You shouldn't need to do anything fancy to make it print, and CSS isn't necessary.

 

I am creating a "coupon" as a graphic and want the coupon to be the only thing that prints. As I has said I have performed this before. I have a sample of what the old CSS code looked like:

 

<a href="http://www.sound-offpromotions.com/wp-content/uploads/2010/08/sop-coupon.jpg"><img'>http://www.sound-offpromotions.com/wp-content/uploads/2010/08/sop-coupon.jpg"><img class="alignnone size-full wp-image-1008" title="sop coupon" src="http://www.sound-offpromotions.com/wp-content/uploads/2010/08/sop-coupon.jpg" alt="" width="322" height="313" /></a>.

 

For what every reason I swear I remember having to save the graphic (coupon) as a pdf as well. The problem is I can't remember why.

.

Link to comment
Share on other sites

Did you perhaps have the <a> link to the PDF, and when the link was clicked, the user downloaded the PDF and printed it? Or, alternately, you just linked out the the coupon image and the user printed that?

Actually that is what I believe I did. I think it was possibly linked to a pdf and when the user clicked on the image the pdf was downloaded then they could print it. Is their a better & easier way? I know bits & pieces about html. I can't just whip it out like a 2nd language but I know enough that usually I can figure it out.

Link to comment
Share on other sites

  • 2 weeks later...

If you want to hide all the text that appears on the page and just print one image, you can attach a separate CSS sheet to your document, you just need to set the "media" attribute on the <link> tags.

 

for example:

 

<link rel="stylesheet" type="text/css" media="screen" href="normal.css" />

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

 

So on the print.css file you can "display:none" all things except the image that needs to be printed. (Perhaps setting an ID on the image that's to be printed is a good idea).

 

However, without looking at your page HTML structure, I can't really give you specifics on the print.css :) But hope this helps.

 

Also you can use Javascript to switch between 2 css files. That way the user can view the page in the "print view" before printing. But it may be too advanced, if you're interested here's a page I made: http://www.cafelaruche.com/menu.html (click on Print View and Normal View)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...