louisstephens

Serve Image variation only for print

3 posts in this topic

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;
	}

 

 

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Cody Connor
      I am currently working on a website in process wire.  I created an image field and added svg as a valid file extension and could upload a png image and a jpg image but when I try to upload a svg image it is stuck loading at 100%.  I figured out that the image field does not take the extension svg even if I add it as an extension. and I was wondering if their is any way to upload a svg image to an image field in processwire?
      I am working with processwire version 3.0.61

    • By franciccio-ITALIANO
      Hi, I know the the templates in processwire are html files.
      I search it into foleder "site" of standard installation of processwire standard theme (blanck and that blue) but I don't find any html file to modify it by html code.
      So, I must modify it only by php code?
      Can I traduct php pages templates in html page?
    • By psy
      I've configured my PW site to use regions and mostly it's fabulous. However I encountered a strange problem when appending scripts to the body tag of a template. The body tag id is "bodyTag" (duh!).
      There are 3 scripts - two external and one inline. My first attempt was to append each script individually thinking they'd appear in the same order on the output:
      <script id="googlemapskey" type="text/javascript" src="https://maps.google.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXX" pw-append="bodyTag"></script> <script id="localMapsJS" type="text/javascript" src="<?=$bootstrap?>js/jquery.gmap.js" pw-append="bodyTag"></script> <script type="text/javascript" pw-append="bodyTag"> jQuery(document).ready(function($){ ... }); </script> Not so! Got lots of js errors and discovered the output had placed the scripts in the incorrect order, ie:
      <script type="text/javascript" pw-append="bodyTag"> jQuery(document).ready(function($){ ... }); </script> <script id="localMapsJS" type="text/javascript" src="/site/assets/mytheme/js/jquery.gmap.js"></script> <script id="googlemapskey" type="text/javascript" src="https://maps.google.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXX"></script> In other places I've appended multiple HTML regions to the same tag and it's worked fine. It only happens with scripts.
      After trying a few things, I discovered a workaround which was to wrap all the scripts into one div which is then appended to the body tag. This is OK but not ideal. I think (?), the partial is rendered in its entirety before being appended to the body tag:
      <div pw-append="bodyTag"> <script id="googlemapskey" type="text/javascript" src="https://maps.google.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXX"></script> <script id="localMapsJS" type="text/javascript" src="<?=$bootstrap?>js/jquery.gmap.js"></script> <script type="text/javascript" pw-append="bodyTag"> jQuery(document).ready(function($){ ... }); </script> </div> Curious to know where I went wrong in the first example with each script appended individually or is this behaviour with scripts an undocumented feature of regions?
      Using PW 3.0.61 with both Chrome and Firefox
    • By ridgedale
      Hi,
      I need to separate the header, footer and sidebar from the _main.php file.
      I've tried all of the following without success:
      <?php include ("header.php"); ?> <?php include ("/_header.php"); ?> <?php include ("./header.inc"); ?> <?php $header = pages()->get('/rcl-header.php'); // include header echo $header; ?> Any guidance would be appreciated.
    • By cosmicsafari
      Hi All,
      I was playing around with the settings for various templates as I had created a new role and have inadvertantly locked myself out.
      I changed some of the settings on the Admin template, so I assume this is what has caused the lock out.
      I have direct access to the database but I have no idea what I would need to change in it to regain access.
      Probably also worth mentioning that all the existing pages are still accessible, but /processwire throws a 404.