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 kixe
      As described in this post (https://processwire.com/talk/topic/8551-custom-urls-for-pages/?p=82742) the option 'Name Format Children' under the tab 'Family' in template settings doesn't work properly and also not as expected. I had a look inside the code and made some changes which are working properly, which offers much more options, more consistency and less code too.

      The result is the following. You have 3 Options for generating name and title, which could be combined in endless variations.
      Name is always derived from title, same like creating pages manually.
      type date: if function detects # character anywhere in the string, conversion will be: deletion of # and string will be used as format parameter for PHP date() function type field: if string is a fieldname of the parent page the value of this field will be used type string: if string doesn't fit to the 2 preceeding it will be taken as it is All parts (separated by comma) will be composed in the order of setting. You can use unlimited numbers of parts

      I made a pull request on github: https://github.com/ryancramerdesign/ProcessWire/pull/831

      Example screenshots

      Setting ...


      will result in


       
    • By Peter Knight
      I have a page that's throwing an error because some of the pages in the for each loop don't have an image
      The docs say it's wise to check that an image has content and only then try to output something.
      I thought the following would work with the if($image) below.
       
      $products = $page->children(); foreach ($products as $prod){ $image = $prod->images->first(); echo" <div > <div class='prod-ov-wrapper'>"; if($image) echo " <a href='$prod->url'> <img src='{$image->height(160)->url}' class='prod-preview'> </a>"; echo" <div class='prod-ov-text'> <strong>Part No:</strong>{$prod->title} <br/> {$prod->prod_summary} <a href='$prod->url' class='uk-icon-button' uk-icon='icon: chevron-right'></a> </div> </div> </div> ";} What am I overlooking here? Thanks
    • By Xonox
      Hi,
      I need to add the original image dimensions (width x height) for the images inserted in the body field, in a few data-fields. Something like:
      <a href="/site/assets/files/1092/image-1.jpg"> <img alt="" src="/site/assets/files/1092/image-1.690x0-is.jpg" width="690" data-width="1500" data-height="1000 "> </a> Where data-width and data-height are the image-1.jpg dimensions.
      I tried to do this through a file, to control the field output:
      templates/fields/post/body.php But turns out the body comes already formatted from the DB, so I can't override the image display, unless I use some cumbersome str_replaces. Even with this solution, it's impossible to achieve the desired result.
      Is there any way I can do this through a ProcessWire process?
      I know it can be done through php, reading the file's header to extract the height and width and then do a str_replace on the body string to insert the desired code. However I'm curious if it can be done in any simpler and more effective way, without having to read the files from disk and do the replaces.
      Thanks,
    • By louisstephens
      I was working on a simple "to-do" style template that has a form on a page. Once the form is submitted, I use the API to  create a new subpage under a pre-existing page, but I notice that it does resubmit the form data (as to be expected) if a user were to refresh the page. Is there a way to prevent this behavior so duplicate content will not be posted by using something like exit(), or is this not proper due to usability?  I guess I am curious as to how other developers handle the same hurdle.
    • By cosmicsafari
      Hi all,
      I am creating a page field (field of type FieldtypePage) via the API, however im still trying to find some documentation as to how I would go about setting the Selectable Pages for said field using the API.
      From what I have found it looks like it involves the use of, albeit this looks like a getter rather than a setter:
      $field->getInputfield($page) Which looks like it would make sense if I wanted to specify the selectable pages by a parent page, but what if I wanted to specify it by say a template?