Jump to content

Serve Image variation only for print


louisstephens
 Share

Recommended Posts

I have been scratching my head on this one for a while, so I thought maybe someone could shed some light on this issue. I am using a grid layout (that I have created over the years) with a class for responsive images (very similar to bootstrap, but very stripped down). Using this, I created a gallery using a foreach loop, and included a "print button" to print each image. I got the classes and everything worked out, but I ran into a small problem with the print functionality. My images (which are around 2400px wide to fill the space) are just fine in the grid and on resize, but when I print, they "run off" the page. I understand that they are just too big to be printed in portrait mode, which led to me think that I could use $image->size(); to print a scaled down version of the image (which adds a bit more load time as now the site needs to load the image large scale and the scaled down version). However, I can't seem to wrap my head around serving just the scaled down version for print only (obviously display:none; doesn't do the trick). Has anyone tackled this before, or does anyone know of a more elegant solution to the conundrum that I have found myself in?

The Foreachloop:

$printclass = 1;
	foreach($page->galleries as $gallery) {
		$printclass++;
		$printimage = $gallery->gallery_image->width(600)->url;
		$out = "";
		$out .= "<div class=\"row\">";
		$out .= "<div class=\"grid-12\">";
		$out .= "<img src=\"{$gallery->gallery_image->url}\" class=\"reimage\"/>";
		$out .= "</div>";
		$out .= "</div>";
					
		$out .= "<div class=\"row\">";
		$out .= "<div class=\"grid-12\">";
		$out .= "<a href=\"#\" onClick=\"printCoupon('printable{$printclass}');\">Print</a>";
		$out .= "</div> ";
		$out .= "</div> ";

		$out .="<div id=\"printable{$printclass}\"><img src=\"{$printimage}\"/></div>";
		echo $out;
	}

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...