louisstephens

Serve Image variation only for print

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

 

 

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 louisstephens
      I have been using the wiresmtpmail module in a few installs for sending out automated emails etc etc, and it works flawlessly. However, I now need to send an email when a user submits a form, and for the life of me I can not figure out how to get the form to submit.
      if(isset($_POST['Submit'])) { $mail = wireMail(); // calling an empty wireMail() returns a wireMail object $toName = $sanitizer->text($input->post->fullname); $toEmail = $sanitizer->email($input->post->email); $phone = $sanitizer->text($input->post->phone); $comments = $sanitizer->text($input->post->comments); $subject = $page->store_name . $page->title; $numSent = wireMail($toName, '', $subject, $textBody, $options); } If I remove the if statement, the form submits just fine, however you can just refresh the page (without adding anything to the fields), and it will submit a blank email every refresh. Has anyone gotten this working with a submit button?
    • By Clément Lambelet
      Hi all,
       
      I'm really new to ProcessWire, maybe I missed the solution in the documentation.
      I'm working on a site which involves a lot of image upload fields, and I'm always getting many timeout errors. I'm pretty sure it's because I generate too many variations on a single page load (around 20 images with 7 different sizes, for them to be responsive).
      I can't use ImageSizerEngineIMagick to help (my host doesn't support it).
       
      I was wondering if there was a way to hook to the process of client-side image resizing (https://processwire.com/blog/posts/processwire-3.0.63-adds-client-side-image-resizing/) to generate the different variations (as it seems really faster). If not, is there a way to generate the different variations on upload and not on page load ?
       
      Any ideas and suggestions are welcome!
    • By theo
      Here is my first processwire module (beta).
      https://github.com/theo222/ImagePickerField
      A lot of "first times". First time Github, Markdown and of course PW Modules.
      So be gentle please.
      I hope it works.

    • By nickngqs
      I'm trying to create a form that does a post to a php file, getting the values before posting to a database.

      For example a form with an action /controller/add_client.php.
      My current workaround is create a page with the add_client template. But is it possible to do that without creating a page? I.E i do not want it to show on the CMS side.
    • By Robin S
      Inspired by the "max megapixels" option for the client-side image resizer, I made a simple module that adds target megapixel resizing for Pageimages.
      Image Megapixels
      Adds a method for Pageimages that resizes to a target megapixel value.
      Example use
      You are creating a lightbox gallery of images with different aspect ratios. For the enlargements, rather than setting a fixed maximum width or height you want all the enlargements have the same size in terms of area, allowing a panoramic image to be wider than a square image, for instance.
      The effect of resizing three different aspect ratios by the same megapixel target value can be seen in the screenshot below:

      Installation
      Install the Image Megapixels module.
      API
      // basic usage $pageimage = $pageimage->megapixels(float $megapixels); // usage with all arguments $pageimage = $pageimage->megapixels(float $megapixels, array $options = []); Example:
      foreach($page->images as $image) { echo "<img src='$image->megapixels(0.8)->url' alt='$image->description'>" } If needed you can supply an array of options for Pageimage::size() as a second argument.
       
      https://github.com/Toutouwai/ImageMegapixels