Search the Community
Showing results for tags 'responsive images'.
Found 2 results
-
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!
-
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!
