Jump to content

Responsive Image Workflow In ProcessWire


Recommended Posts

Hi there,

After using a number of image services that have very nicely taken care of responsive image handling for me, I have now put together code that will output image elements in a variety of ways dependent on their definition in the back-end of the PW system. So, things like Viewport width,  DPR and Art Direction (Picture) based representations.

In the past, I just loaded the largest, highest quality image to the image service provider and the client-side JS decided, based on runtime condition, what size and pixel density image version were required.

I haven't used ProcessWire's image handling capabilities, other than just loading images into the "images" field which has provided the original path used by the responsive image services.

Here is the nub of the gist. If I start with the same source image provided by the photographer, as referred to earlier, is there anything in ProcessWire that will either automatically or manually, help me to create the various versions of the images that I want to include in my image element's srcset attribute? Or, does this have to be done outside of ProcessWire, say, in Photoshop or Lightroom?

I really appreciate your thoughts, ideas and comments around best practice in this regard, within the context of ProcessWire.

Cheers! :)

  • Like 1
Link to comment
Share on other sites

is there anything in ProcessWire that will either automatically or manually, help me to create the various versions of the images that I want to include in my image element's srcset attribute?

For images in an images field, you can create any sizes you need via PW's native resizing methods.

For images inside an RTE field you can use a textformatter module. The idea would be to detect images in the RTE block and replace them with your own custom srcset markup. The Image Interceptor module is a good one to look at if you want to get ideas for a custom module.

But there is already the TextformatterImageSRCSET module ready to go. :)

And also check out the ImageToPicture module.

  • Like 4
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

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By DaveP
      Background - I came across http://www.responsivebreakpoints.com/ the other day and thought it was a nice idea, but that could be done in PW using the API. In a nutshell, what it does is create an image width breakpoint at roughly every 20kb of file size between a minimum and maximum pixel size.
      According to this article on CSS-Tricks, "If you’re just changing resolutions, use srcset", so the markup is as suggested there.
      There is already the excellent Srcset Image Textformatter which works on images in RTE fields, but if you want responsive images elsewhere in your templates, you need to do the markup and decide on breakpoint sizes yourself. However, Field Templates have got you covered!
      Just save this as a field template file in /site/templates/fields/my_image.php as described above.
      <?php $maxWidth = 1000; //largest breakpoint $minWidth = 200; //smallest breakpoint $srcQuality = 40; //jpeg quality of the 'src' image $srcsetQuality = 80; //jpeg quality of the 'srcset' images $breakpointStepFileSize = 20; //i.e. 20kb $class = ""; //change this if you want to add eg "class='responsive'" $horizAspect = $value->width / $value->height; $minSizeArea = round($minWidth * ($minWidth / $horizAspect)); $maxSizeArea = round($maxWidth * ($maxWidth / $horizAspect)); $areaDiff = $maxSizeArea - $minSizeArea; $minFile = $value->width($minWidth, array('quality' => $srcsetQuality)); $maxFile = $value->width($maxWidth, array('quality' => $srcsetQuality)); $minFileSize = $minFile->filesize; $maxFileSize = $maxFile->filesize; $fileSizeDiff = $maxFileSize - $minFileSize; if($fileSizeDiff > ($breakpointStepFileSize * 1024)){   $numBreakpoints = round($fileSizeDiff / ($breakpointStepFileSize * 1024));   for($s = 1; $s < $numBreakpoints; $s++){     $breakpointStepArea = $minSizeArea + (($areaDiff / $numBreakpoints) * $s);     $breakpointWidth = round(sqrt($breakpointStepArea * $horizAspect));     $breakpoints[] = $breakpointWidth;   } } $src = $value->width($maxWidth, array('quality' => $srcQuality))->url; $min = "$minFile->url {$minWidth}w, "; $out = "<img src='$src' srcset='$min"; foreach($breakpoints as $breakpoint){   $bp = $value->width($breakpoint, array('quality' => $srcsetQuality))->url;   $out .= "$bp {$breakpoint}w, "; } $out .= "$maxFile->url {$maxWidth}w"; $out .= "' alt='$value->description' $class>"; echo $out; Then use something like 
      echo $page->render->my_image; in your page template and you'll get something like
      <img src='/site/assets/files/1/photo.1000x0.jpg' srcset='/site/assets/files/1/photo.200x0.jpg 200w, /site/assets/files/1/photo.482x0.jpg 482w, /site/assets/files/1/photo.651x0.jpg 651w, /site/assets/files/1/photo.785x0.jpg 785w, /site/assets/files/1/photo.899x0.jpg 899w, /site/assets/files/1/photo.1000x0.jpg 1000w' alt='pic' > (Bear in mind that PW has to create all these image variations on first page load, so it will take a moment.)
      Give it a try and see what you think!
  • Create New...