1.0.0

README.md

@@ -1,2 +1,84 @@
 # evo-srcset
 Simple img srcset generator snippet for Evolution CMS
+
+## Call
+
+```
+[[srcset? 
+&input=`[*article_img*]` 
+&sizes=`(min-width: 1200px) 1140px, 
+        (min-width: 992px) 940px, 
+        (min-width: 768px) 720px, 
+        calc(100vw - 30px)` 
+&srcset=`330,546,720,940,1140,1440,1880`
+&defaultSize=`1140`
+&quality=`80`
+&attrAlt=`Image alt text`
+&attrClass=`image-class`
+&attrStyle=`display: inline-block`
+&attrCustom=`data-test="success"`
+]]
+```
+
+## Result
+
+```
+<img sizes="(min-width: 1200px) 1140px,
+            (min-width: 992px) 940px,
+            (min-width: 768px) 720px,
+            calc(100vw - 30px)" 
+srcset="assets/cache/images/150944-330x-70e.jpg 330w,
+        assets/cache/images/150944-546x-b43.jpg 546w,
+        assets/cache/images/150944-720x-33b.jpg 720w,
+        assets/cache/images/150944-940x-70d.jpg 940w,
+        assets/cache/images/150944-1140x-6d1.jpg 1140w,
+        assets/cache/images/150944-1440x-e5d.jpg 1440w,
+        assets/cache/images/150944-1880x-ef3.jpg 1880w" 
+src="assets/cache/images/150944-1140x-6d1.jpg" 
+class="image-class" 
+style="display: inline-block" 
+alt="Image alt text" 
+data-test="success">
+```
+
+## Parameters
+
+**input**
+
+Image source.
+
+**sizes**
+
+CSS rules that specifies image sizes for different page layouts.
+
+**srcset**
+
+Dimensions separated by comma, eg. "360,720,1280". From smallest to largest. If you need to crop your image, use WxH eg. "360x200,720x400,1280x400".
+
+**defaultSize** (optional) 
+
+Size used for fallback in src="" attribute. If not used, last dimension from srcset is used.
+
+**quality** (optional) 
+
+Quality of generated JPG files. Default: 80.
+
+**attrAlt** (optional) 
+
+Value of alt="" attribute.
+
+**attrClass** (optional) 
+
+Value of class="" attribute.
+
+**attrStyle** (optional) 
+
+Value of style="" attribute.
+
+**attrCustom** (optional) 
+
+Any additional attributes you may need. Eg. data-test="success"
+
+## Dependency
+
+EVO phpthumb snippet.

assets/snippets/srcset/snippet.srcset.php

@@ -0,0 +1,150 @@
+<?php
+/**
+ * srcset
+ * 
+ * Simple img srcset generator snippet for Evolution CMS
+ *
+ * @version      1.0.0
+ * @author       Piotr Matysiak (pmfx)
+ * @category     snippet
+ * @internal     @properties 
+ * @internal     @modx_category Content
+ * @internal     @installset base,sample
+ * @lastupdate   06/03/2018
+ * @link         https://github.com/pmfx/evo-srcset
+ * @reportissues https://github.com/pmfx/evo-srcset/issues
+ */
+
+/*
+ * example
+ *
+ * [[srcset? 
+ * &input=`[*article_img*]` 
+ * &sizes=`(min-width: 1200px) 1140px, 
+ *         (min-width: 992px) 940px, 
+ *         (min-width: 768px) 720px, 
+ *         calc(100vw - 30px)` 
+ * &srcset=`330,546,720,940,1140,1440,1880`
+ * &defaultSize=`1140`
+ * &quality=`80`
+ * &attrAlt=`Image alt text`
+ * &attrClass=`image-class`
+ * &attrStyle=`display: inline-block`
+ * &attrCustom=`data-test="success"`
+ * ]]
+*/
+
+if(!defined('MODX_BASE_PATH')) {die('What are you doing? Get out of here!');}
+
+/*
+ * format sizes
+ */
+
+$sizes      = str_replace(array("\r\n", "\r"), "\n", $sizes);
+$sizesLines = explode("\n", $sizes);
+$sizesNew   = array();
+
+foreach ($sizesLines as $i => $sizesLine) {
+  if(!empty($sizesLine)) {
+    $sizesNew[] = trim($sizesLine);
+  }
+}
+
+$sizes = implode($sizesNew);
+
+/*
+ * generate srcset images
+ */
+
+$quality = (empty($quality) ? '80' : $quality);
+
+$srcset    = explode(",", $srcset);
+$srcsetNew = array();
+
+foreach ($srcset as $i => $srcsetItem) {
+
+  // check if both dimensions are set
+
+  $bothDimensions = strpos($srcsetItem, 'x');
+
+  if ($bothDimensions !== false) {
+    $dimensions = explode("x", $srcsetItem);
+    $imgWidth   = $dimensions[0];
+    $imgHeight  = $dimensions[1];
+    $options    = 'w='.$imgWidth.',h='.$imgHeight.',zc=1,f=jpg,q='.$quality;
+  }
+
+  else {
+    $imgWidth = $srcsetItem;
+    $options  = 'w='.$imgWidth.',f=jpg,q='.$quality;
+  }
+
+  // last srcset item
+
+  if ($srcsetItem === end($srcset)) {
+    $src = $modx->runSnippet('phpthumb', [
+      'input'   => $input,
+      'options' => $options
+    ]);
+    $srcsetNew[] = $src.' '.$imgWidth.'w';
+  } 
+
+  else {
+    $srcsetNew[] = $modx->runSnippet('phpthumb', [
+      'input'   => $input,
+      'options' => $options
+    ]).' '.$imgWidth.'w,';
+  }
+
+}
+
+$srcset = implode($srcsetNew);
+
+/*
+ * generate default image
+ */
+
+if (empty($defaultSize)) {
+  $src = $src;
+}
+
+else {
+
+  // check if both dimensions are set
+
+  $bothDimensions = strpos($defaultSize, 'x');
+
+  if ($bothDimensions !== false) {
+    $dimensions = explode("x", $defaultSize);
+    $imgWidth   = $dimensions[0];
+    $imgHeight  = $dimensions[1];
+    $src        = $modx->runSnippet('phpthumb', [
+      'input'   => $input,
+      'options' => 'w='.$imgWidth.',h='.$imgHeight.',zc=1,f=jpg,q='.$quality
+    ]);
+  }
+
+  else {
+    $imgWidth = $defaultSize;
+    $src      = $modx->runSnippet('phpthumb', [
+      'input'   => $input,
+      'options' => 'w='.$imgWidth.',f=jpg,q='.$quality
+    ]);
+  }
+}
+
+/*
+ * output
+ */
+
+$output  = '<img ';
+$output .= 'sizes="'. $sizes.'" ';
+$output .= 'srcset="'.$srcset.'" ';
+$output .= 'src="'.   $src.'" ';
+$output .= 'class="'. $attrClass.'" ';
+$output .= 'style="'. $attrStyle.'" ';
+$output .= 'alt="'.   $attrAlt.'" ';
+$output .=            $attrCustom;
+$output .= '>';
+
+return $output;

install/assets/snippets/srcset.tpl

@@ -0,0 +1,18 @@
+//<?php
+/**
+ * srcset
+ * 
+ * Simple img srcset generator snippet for Evolution CMS
+ *
+ * @version      1.0.0
+ * @author       Piotr Matysiak (pmfx)
+ * @category     snippet
+ * @internal     @properties 
+ * @internal     @modx_category Content
+ * @internal     @installset base,sample
+ * @lastupdate   06/03/2018
+ * @link         https://github.com/pmfx/evo-srcset
+ * @reportissues https://github.com/pmfx/evo-srcset/issues
+ */
+
+return require MODX_BASE_PATH.'assets/snippets/srcset/snippet.srcset.php';