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 mcwhitey
      Hi,
      How can I display, on every page of my site, what roles can view that pages template, based on what is checked in settings>templates>template-name>ACCESS TAB?
      I've only gotten as far as displaying the name of the current template: echo $page->template->get('name'); But I'm stuck here. Tried things like $page->template->get('permissions'); but I guess it's a bit more complicated than that.
      Hope someone van point me in the right direction.
      Cheers.
    • By ryanC
      Hi, I have php includes in my template file that are working fine....however I need to have some additional includes within a text area field, where I enter my HTML content.
      For example, this code at the top of my template file:
      <?php $myPath = $config->urls->templates;?> Allows me to have something like this on every page:
      <?php include("includes/footer.inc.php"); ?> So far so good, but I have a text area field named page_content, where I would like to manually enter additional includes. 
      If I enter this in that text area field, I get a photo:
      <img src="images/photo.jpg" />
      But if I enter this in that same field, nothing happens at all:
      <?php include("includes/phone.inc.php"); ?> Any thoughts? I have reviewed this thread https://processwire.com/api/ref/files/include/ but I don't think it gets at what I'm looking for.
      Thanks!
    • By louisstephens
      So maybe has already figured this out, but I am stumped. I have a field (test_field) that is set to pdfs, and I was trying to get a count of the number of pdfs in that field so I could add it to a status bubble on the front end. I tried:
      function testPDF() { $a = $page->test_field->count(); echo "<span class=\"bubble\">" . $a . "</span>"; } but it is returning "NULL" . I currently have 3 added to the field. I also tried putting this function in _func.php, though I need to use wire('pages'), but I only need to get the count for that specific page, so I am sort of at a loss of how to proceed.
    • By EyeDentify
      Simple example for loading template specific CSS file.
      This example asumes that you have your CSS file in a directory relative to template root.
      Like:
      templates/css/my_template_specific.css
      Also i use in the template a simple text field to hold the name of the CSS file i want to load.
      I call this field 'css_file'
      Use what you feel comfortable with.
      So in your header section of the DOM notice the "page specific CSS" part?
      Thats were the magic happens. What happens is that we check to see if the file exists in the CSS dir relative to template root.
      And if it does we load it. Simple and effective.
      I load all other CSS that is used all over the site in global_styles.css first.
      And make sure you load template specific last, because then you can easily override CSS in global.
       
      DOM header example:
      <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title><?PHP echo($page->title); ?></title> <!-- main CSS --> <link rel="stylesheet" href="<?PHP echo($config->urls->templates); ?>css/global_styles.css"> <!-- page specific CSS --> <?PHP /* Use relative path in file_exists() */ if(file_exists('css/' . $page->css_file)) { echo("<link rel=\"stylesheet\" href=\"{$config->urls->templates}css/{$page->css_file}\">"); } ?> </head> <body> Thats my way of doing it. I am sure there is plenty of more ways to do it. This is for the newbies or anyone that wants more options.
      Good luck with your CSS out there in Cyberspace.
      Cheers from EyeDentify