ukyo

Yes, after installation I opened FieldtypeCroppableImage3 config screen but didn't make any changes on this screen. Do you offer to disable quality selector ? With this settings i don't have error when i open modal cropper.

@horst I used class name from this module page : http://modules.processwire.com/modules/croppable-image3/. Also yesterday i downloaded the module files directly from github repo. I corrected suffix, renamed it "fullwidth" deleted old created files, result not changed (have error). I applied these : if(property_exists($globalOptions, 'manualSelectionDisabled')) if(property_exists($globalOptions, 'useImageEngineDefaults')) to error lines like @adrian advice for my other issue with this module. I don't have error for the moment, but I don't know is this a really solution ? For the moment continue to work just applied quick fixes.

I applied @adrian advice. Also I applied same solution for other issue with CroppableImage3 module. if(property_exists($globalOptions, 'manualSelectionDisabled')) if(property_exists($globalOptions, 'useImageEngineDefaults')) After applied these i don't have error module look like work, but i don't know is this really a true solution? But for the moment its look like ok for continue to work.

I updated TracyDebugger from 3.3.4 to latest version 3.3.8 and enabled Tracy Debugger for backend. And tested to upload images again, everything worked. Upload done, images refreshed after upload, debug result is ok. Also i checked my other CroppableImage3 module issue, don't have this issue, if TracyDebugger enabled for backend. bd($pagefile); bd($suffix); bd($pagefile->getCrop($suffix)->url); If i disabled TracyDebuger again for backend, my problem appeared again. I uninstalled TracyDebugger for make test, i have same problem also witout TracyDebugger.

I understood what you say @horst, but if i use core imagefield, don't have any error with CustomUploadNames module everything working well. When i try to use it with CroppableImage3 module i have this error. With CroppableImage3 module, file upload is ok, but after upload progress javascript callback not working, Because there is an error : Notice: Trying to get property of non-object in /website/site/modules/CroppableImage3/InputfieldCroppableImage3/InputfieldCroppableImage3.module on line 139 like i said if i refresh the page, images uploaded and i can use CroppableImage3 module for resizing.

Here is step by step screenshots. Created new field, added crop settings added this field to custom upload names module settings and tried to upload files result is same on my side. If i remove this field from Custom Upload Names module settings there is no error. Upload is done without error.

Sorry for early post before check console errors. Its look like error causing from Croppable Image 3 module. When i check ajax request there is an error: Notice: Trying to get property of non-object in /website/site/modules/CroppableImage3/InputfieldCroppableImage3/InputfieldCroppableImage3.module on line 139 File: site/modules/CroppableImage3/InputfieldCroppableImage3/InputfieldCroppableImage3.module $attr['data-image'] = $pagefile->getCrop($suffix)->url; I think the module can't get data, because name is changed. Here is custom upload names module filter settings :

@horst also can you check this error : I can't use croppable image 3 module with custom upload names module together.

Hi @adrian can you add support for CROPPABLE IMAGE 3 module. If i add croppable image 3 field to custom upload names filter, when i want to upload file upload progress not finishing. Also i will put this problem link to Croppable Image 3 module post, because i don't know which module causing this error. When i refresh page without save page, i can see these pictures names changed and uploaded.

@horst thanks for your great module. Today i installed your module via module panel by class name and changed my image field with croppableimage field and i setted a size (full-width,1425,434) for this field. After click this size from images field i have below errors on opened modal box, i can see image and preview image. Notice: Undefined property: stdClass::$manualSelectionDisabled in /Users/user/Sites/site-folder/site/modules/CroppableImage3/ProcessCroppableImage3/ProcessCroppableImage3.module on line 47 Notice: Undefined property: stdClass::$useImageEngineDefaults in /Users/user/Sites/site-folder/site/modules/CroppableImage3/ProcessCroppableImage3/ProcessCroppableImage3.module on line 48 Notice: Undefined property: stdClass::$manualSelectionDisabled in /Users/user/Sites/site-folder/site/modules/CroppableImage3/ProcessCroppableImage3/ProcessCroppableImage3.module on line 120 I am using ProcessWire 3.0.36 version, I made fresh module installation.

I tested it and its look bad idea, if you add width and height for img tag, responsive display not working well. I removed my changes. and can you test this image tag in chrome browser & safari : <img src="http://placehold.it/400x300" data-srcset="http://placehold.it/400x300 480w, http://placehold.it/667x515 768w, http://placehold.it/385x290 960w, http://placehold.it/490x370 1220w" data-sizes="(max-width: 1220px) calc(100vw - 20px), 1220px" class="lazyload uk-width-1-1"> This tag generated by your module just images replaced with placehold.it, this tag working only in firefox. I am loading js files manuelly do i need to add extra javascript codes ? <?php $lazySizes = array( 'styles/bower_components/lazysizes/lazysizes.min.js', 'styles/bower_components/picturefill/dist/picturefill.min.js', 'styles/bower_components/lazysizes/plugins/attrchange/ls.attrchange.min.js', 'styles/bower_components/lazysizes/plugins/bgset/ls.bgset.min.js' ); echo "\n\t\t<script src=\"" . AIOM::JS($lazySizes) . "\"></script>"; ?> Picture tag working much better, i was has same problem when i frist try lazysizes js, if you check post there is funtion i made for lazysizes with picture tag, i wll try to add picture mode also. This is working for me, for all browsers : <picture> <!--[if IE 9]><video style='display: none;'><![endif]--> <source srcset='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' data-srcset='http://placehold.it/400x300' media='(max-width: 479px)' /> <source srcset='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' data-srcset='http://placehold.it/667x515' media='(max-width: 767px)' /> <source srcset='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' data-srcset='http://placehold.it/385x290' media='(max-width: 959px)' /> <!--[if IE 9]></video><![endif]--> <img src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' data-srcset='http://placehold.it/490x370' alt='' class="lazyload uk-width-1-1" /> </picture>

@tpr thanks for module, can you add support for width and height attribute support for <img> tag ? Width and height attribute values could come from src attribute. // My custom hook for $image->alt() function $this->addHook("Pageimage::alt", function (HookEvent $event) { $image = $event->object; $return = ($image->description != '') ? $image->description : pathinfo($image->filename, PATHINFO_FILENAME); $event->return = " alt='{$return}'"; }); // Json array { "list": [ [400, 300], [687, 515], [385, 290], [490, 370] ] } // my usage <img <?php echo $image->srcset('list', 'lazyload'), $image->alt(); ?>> // result <img src="/site/assets/files/1072/peoplelikeus-antifouling-001.400x300.jpg" data-srcset="/site/assets/files/1072/peoplelikeus-antifouling-001.400x300.jpg 480w, /site/assets/files/1072/peoplelikeus-antifouling-001.687x515.jpg 768w, /site/assets/files/1072/peoplelikeus-antifouling-001.385x290.jpg 960w, /site/assets/files/1072/peoplelikeus-antifouling-001.490x370.jpg 1220w" data-sizes="(max-width: 1220px) calc(100vw - 20px), 1220px" class="lazyload" alt='peoplelikeus-antifouling-001'> // for this result width and height attributes must be 400x300, because our src image size is 400 x 300 <img src="/site/assets/files/1072/peoplelikeus-antifouling-001.400x300.jpg" width="400" height="300" data-srcset="/site/assets/files/1072/peoplelikeus-antifouling-001.400x300.jpg 480w, /site/assets/files/1072/peoplelikeus-antifouling-001.687x515.jpg 768w, /site/assets/files/1072/peoplelikeus-antifouling-001.385x290.jpg 960w, /site/assets/files/1072/peoplelikeus-antifouling-001.490x370.jpg 1220w" data-sizes="(max-width: 1220px) calc(100vw - 20px), 1220px" class="lazyload" alt='peoplelikeus-antifouling-001'> For the moment i edited you module line 180 (don't like custom adds) $markup = 'src="' . $fallbackImgSrc . '" width="'.$fallbackImg->width.'" height="'.$fallbackImg->height.'" ' . $markup;

css section is only for styling, you need to tell module what is your list of icons names ? You need hook beforeRender event like on example. https://github.com/trk/FieldtypeFontIconPicker You can create a file like : https://github.com/trk/FieldtypeFontIconPicker/blob/master/Icons/Ionicons.php and you can include this file in your hook function, after include you can return your custom icons.

@ryan updated module, now you can update module directly from admin panel

Added pull request for this issue : #14 If you want, you can apply my changes to your files or you can directly download applied version. I added 2 option for FieldtypeMapMarker module settings, api key and url parameters.

I found the problem, when i add a <base> tag inside <head> tag, this problem appear.

Created form by FormBuilder and PadLoper, i have problem when i make post. For example, if i have a contact form at www.domanin.ltd/contact/ url and if want to make post form redirecting me to homepage (www.domanin.ltd). All my post data going to homepage but there is not a process for this form. same result for PadLoper forms. Basically processwire backend form creations not working well for me in front-end. There is a problem with url "./". If i change url with str_replace function PadLoper checkout form working. echo str_replace('./', $page->httpUrl, $checkout->render()); Some one has this problem ? Question & Answers about problem: @ukyo(question) If i use Option C Embed method. When i submit form page redirecting to (making form post) homepage from contact page. How can i hack this ? I want to make post current called page. I added this option on my settings but need tips about how to ? @ryan(answer) Since you are using embed C, make sure that any pages you put forms on don't have the trailing slash removed. FormBuilder sticks to PW's default setting for trailing slashes. If you've changed the slash setting for a template that outputs a form (embed C only) that could interfere with the form submission. @ukyo(answer) I didn't changed slash settings, and after your answer i checked slash settings and everything look like normal. For be sure unchecked this option and tested, didd't work. Checked this option again and tested, didn't work. Also i have same problem with PadLoper module (using same method). Do i have problem with my pw setups or settings ? or do i need to enable some php server side settings ? Please, let me know ProcessWire 3.0.20 devns PHP 5.6.10 OS X El Capitan

This module extends WireMail base class, integrating the PHPMailer mailing library into ProcessWire. Module Directory - Githup repo

With 0.9.8 version problem look like gone. Thanks for quick reply / fix !

After update to version 0.9.7 i have this error : Fatal error: Call to a member function getImageInfo() on a non-object in /......./......./......./......./site/assets/cache/FileCompiler/site/modules/TracyDebugger/ProcesswireInfoPanel.inc on line 259 Tracy panel not appear for front-end and if i comment this line it look like working. PW version : ProcessWire 3.0.9 devns

Your array look like have auto index. Try to set array key as $value->id if there is a id or something like it. on here: $field->addOption($option->value, $option->title); you used $option->value like a key but on here : $valArray[] .= $value->title; you don't have a key ? and when you set an array don't use .= this will be enought $valArray[] = $value->title; or $valArray[$value->value] = $value->title; For asmSelect you can clone core asmSelect module and rename it modify module as your needs or if there hook available you can make hook or you can use asmSelect directly.

It for uikit lightbox component, resizing image and adding lightbox link automatically with overlay effect. If you don't use uikit you can remove these codes from function or you can customize them for your needs. I dind't modify my code, directly shared them with community and you can take it as example and you can modify codes or you can create a function as your needs. // Without lightbox $img = image($page->image->first(), $config->respImgOptions['villa']['list']); // With lightbox, its enought to send "true" or "overlay" class, after set responsive image settings $img = image($page->image->first(), $config->respImgOptions['villa']['list'], true); Lightbox example output : <figure class='uk-overlay uk-overlay-hover'> <picture> <!--[if IE 9]> <video style='display: none;'> <![endif]--> <source srcset='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' data-srcset='/site/assets/files/1058/terra-nova-003.344x212.jpg' media='(max-width: 479px)' /> <source srcset='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' data-srcset='/site/assets/files/1058/terra-nova-003.309x190.jpg' media='(max-width: 767px)' /> <source srcset='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' data-srcset='/site/assets/files/1058/terra-nova-003.265x164.jpg' media='(max-width: 959px)' /> <!--[if IE 9]> </video> <![endif]--> <img src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' data-srcset='/site/assets/files/1058/terra-nova-003.290x180.jpg' alt='terra-nova-003' class="lazyload uk-responsive-width uk-overlay-spin" /> </picture> <div class='uk-overlay-panel uk-overlay-background uk-overlay-fade'></div> <div class='uk-overlay-panel uk-overlay-icon uk-overlay-fade'></div> <a class='uk-position-cover' href='/site/assets/files/1058/terra-nova-003.jpg' title='Terra Nova' data-uk-lightbox="{group:'terra-nova'}"> <span class='uk-hidden'>Terra Nova</span> </a> </figure>

Thanks @horst, if you see my mistakes and no need things or any useful things let me know please

sorry also i updated my first reply /** * Generate Attributes Array or String * * @param $item * @return string */ function buildAttrs($item) { $attributes = ""; // echo "<pre>Key : " . print_r($item, true) . "</pre>"; if(array_key_exists('attributes', $item) && is_array($item['attributes'])) { foreach($item['attributes'] as $key => $attr) { $attributes .= ' ' . $key . '="' . $attr . '"'; } } return $attributes; } /** * * @param $image * @param $key * @param $options * @return string */ function buildSrcAndSrcset($image, $key, $options) { $return = ''; // echo "<pre>Key : {$key}, " . print_r($options, true) . "</pre>"; if(!empty($options[$key]) && !empty($options[$key]['sets']) && is_array($options[$key]['sets'])) { $x=1; $countSets = count($options[$key]['sets']); $sets = ""; foreach($options[$key]['sets'] as $k => $rules) { $y=$x++; $separator = ($y != $countSets) ? ", " : ""; if(!is_array($rules) && $rules == 'original') { $static_url = static_url($image->url); $sets .= "{$static_url} {$key}w{$separator}"; } elseif(isset($rules['width']) || isset($rules['height'])) { $size = imageResize($image, $rules); if(!is_null($size)) { $sets .= "{$size['url']} {$size['width']}w{$separator}"; } } } if($sets != "") $return = " {$key}='{$sets}'"; } elseif(!empty($options[$key]) && !empty($options[$key]['method']) && is_array($options[$key]['method'])) { $img = imageResize($image, $options[$key]['method']); if(!is_null($img)) $return = " {$key}='{$img['url']}'"; } elseif(!empty($options[$key]) && is_string($options[$key])) { $return = " {$key}='{$options[$key]}'"; } return $return; }

On my side i prepared a function for srcset and <picture> tag creation. Function output look like : <picture> <!--[if IE 9]> <video style='display: none;'> <![endif]--> <source srcset='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' data-srcset='/site/assets/files/1058/terra-nova-001.404x270.jpg' media='(max-width: 479px)' /> <source srcset='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' data-srcset='/site/assets/files/1058/terra-nova-001.692x462.jpg' media='(max-width: 767px)' /> <source srcset='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' data-srcset='/site/assets/files/1058/terra-nova-001.427x285.jpg' media='(max-width: 959px)' /> <!--[if IE 9]> </video> <![endif]--> <img src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' data-srcset='/site/assets/files/1058/terra-nova-001.630x421.jpg' alt='terra-nova-001' class="lazyload uk-width-1-1" /> </picture> Here are my functions : /** /** * Generate Attributes Array or String * * @param $item * @return string */ function buildAttrs($item) { $attributes = ""; // echo "<pre>Key : " . print_r($item, true) . "</pre>"; if(array_key_exists('attributes', $item) && is_array($item['attributes'])) { foreach($item['attributes'] as $key => $attr) { $attributes .= ' ' . $key . '="' . $attr . '"'; } } return $attributes; } /** * * @param $image * @param $key * @param $options * @return string */ function buildSrcAndSrcset($image, $key, $options) { $return = ''; // echo "<pre>Key : {$key}, " . print_r($options, true) . "</pre>"; if(!empty($options[$key]) && !empty($options[$key]['sets']) && is_array($options[$key]['sets'])) { $x=1; $countSets = count($options[$key]['sets']); $sets = ""; foreach($options[$key]['sets'] as $k => $rules) { $y=$x++; $separator = ($y != $countSets) ? ", " : ""; if(!is_array($rules) && $rules == 'original') { $static_url = static_url($image->url); $sets .= "{$static_url} {$key}w{$separator}"; } elseif(isset($rules['width']) || isset($rules['height'])) { $size = imageResize($image, $rules); if(!is_null($size)) { $sets .= "{$size['url']} {$size['width']}w{$separator}"; } } } if($sets != "") $return = " {$key}='{$sets}'"; } elseif(!empty($options[$key]) && !empty($options[$key]['method']) && is_array($options[$key]['method'])) { $img = imageResize($image, $options[$key]['method']); if(!is_null($img)) $return = " {$key}='{$img['url']}'"; } elseif(!empty($options[$key]) && is_string($options[$key])) { $return = " {$key}='{$options[$key]}'"; } return $return; } /** * Image : Create <img /> tag with attributes and responsive lazyload option * * @param $image * @param array $options * @return string */ function image($image, $options = array(), $lightbox=FALSE) { $return = ""; // Alt attribute $alt = ($image->description != '') ? $image->description : pathinfo($image->filename, PATHINFO_FILENAME); $alt = " alt='{$alt}'"; if(array_key_exists('picture', $options) && is_array($options['picture'])) { $picture = $options['picture']; // Set Attributes $attributes = ""; if(array_key_exists('attributes', $picture)) { $attributes = buildAttributes($picture['attributes']); } $return .= "\n<picture{$attributes}>"; if(array_key_exists('source', $options['picture']) && is_array($options['picture']['source'])) { $return .= "\n\t<!--[if IE 9]><video style='display: none;'><![endif]-->"; $sources = $options['picture']['source']; foreach($sources as $key => $source) { $attrSrc = buildSrcAndSrcset($image, 'src', $source); $attrSrcset = buildSrcAndSrcset($image, 'srcset', $source); $attrDataSrcset = buildSrcAndSrcset($image, 'data-srcset', $source); $attributes = buildAttrs($source); $attrMedia = " media='{$key}'"; $return .= "\n\t\t<source{$attrSrc}{$attrSrcset}{$attrDataSrcset}{$attributes}{$attrMedia} />"; } $return .= "\n\t<!--[if IE 9]></video><![endif]-->"; } if(array_key_exists('img', $options['picture']) && is_array($options['picture']['img'])) { $img = $options['picture']['img']; $attrSrc = buildSrcAndSrcset($image, 'src', $img); $attrSrcset = buildSrcAndSrcset($image, 'srcset', $img); $attrDataSrcset = buildSrcAndSrcset($image, 'data-srcset', $img); $attributes = buildAttrs($img); $return .= "\n\t<img{$attrSrc}{$attrSrcset}{$attrDataSrcset}{$alt}{$attributes} />"; } $return .= "\n</picture>"; } elseif(array_key_exists('img', $options) && is_array($options['img'])) { $img = $options['img']; $attrSrc = buildSrcAndSrcset($image, 'src', $img); $attrSrcset = buildSrcAndSrcset($image, 'srcset', $img); $attrDataSrcset = buildSrcAndSrcset($image, 'data-srcset', $img); $attributes = buildAttrs($img); $return .= "\n<img{$attrSrc}{$attrSrcset}{$attrDataSrcset}{$alt}{$attributes} />"; } else { $src = " src='" . static_url($image->url) . "'"; $width = " width='{$image->width}'"; $height = " height='{$image->height}'"; // Set Attributes $attributes = ""; if(array_key_exists('attributes', $options)) { $attributes = buildAttributes($options['attributes']); } $return .= "\n<img{$src}{$width}{$height}{$alt}{$attributes} />"; } if(isset($lightbox) && $lightbox != FALSE) { $page = wire('page'); $title = ($image->description != "") ? $image->description : $page->title; $overlayEffect = (!is_bool($lightbox) && $lightbox != '') ? " " . $lightbox : " uk-overlay-fade"; $return = "\n<figure class='uk-overlay uk-overlay-hover'> \n\t{$return} \n\t<div class='uk-overlay-panel uk-overlay-background{$overlayEffect}'></div> \n\t<div class='uk-overlay-panel uk-overlay-icon{$overlayEffect}'></div> \n\t<a class='uk-position-cover' href='{$image->url}' title='{$title}' data-uk-lightbox=\"{group:'{$page->name}'}\"><span class='uk-hidden'>{$title}</span></a> \n</figure>"; } return $return; } /** * Resize Image * * @param $image * @param array $method * @return array|null */ function imageResize($image, $method=array()) { $alt = ($image->description != '') ? $image->description : pathinfo($image->filename, PATHINFO_FILENAME); if(isset($method['type']) && isset($method['width']) || isset($method['height'])) { // Set Resize Options if(isset($method['options'])) $options = $method['options']; else $options = wire('config')->imageSizerOptions; if($method['type'] === 'size' && isset($method['width']) && isset($method['height'])) { $size = $image->size($method['width'], $method['height'], $options); } elseif($method['type'] === 'width' && isset($method['width'])) { $size = $image->width($method['width'], $options); } elseif($method['type'] === 'height' && isset($method['height'])) { $size = $image->height($method['height'], $options); } else { $size = null; } if(!is_null($size)) { return array( 'url' => static_url($size->url), 'width' => $size->width, 'height' => $size->height, 'alt' => $alt ); } } elseif(is_null($method)) { return array( 'url' => static_url($image->url), 'width' => $image->width, 'height' => $image->height, 'alt' => $alt ); } return null; } /** * Return url with static url * * @param string $url * @return string */ function static_url($url="") { $config = wire('config'); if($config->debug === false && isset($config->static_url) && $config->static_url != "") { $static_url = $config->static_url; } else { $static_url = ""; } return $static_url . $url; } I set responsive sizes on my config file : /** * Responsive Image Options */ $responsiveSizes = array( 'small' => '480', 'medium' => '768', 'large' => '960', 'xlarge' => '1220' ); $config->resSmall = "(max-width: " . ($responsiveSizes['small']-1) . "px)"; $config->resMedium = "(max-width: " . ($responsiveSizes['medium']-1) . "px)"; $config->resLarge = "(max-width: " . ($responsiveSizes['large']-1) . "px)"; $config->resXlarge = "(min-width: {$responsiveSizes['xlarge']}px)"; And I created a file (including this file inside my init.php file) that file have responsive image sizes like : /** * Template --Villa List-- */ $respImgOptions['villa']['list'] = array( 'picture' => array( 'source' => array( $config->resSmall => array( 'srcset' => 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==', 'data-srcset' => array( 'method' => array( 'type' => 'size', 'width' => 404, 'height' => 270 ) ) ), $config->resMedium => array( 'srcset' => 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==', 'data-srcset' => array( 'method' => array( 'type' => 'size', 'width' => 692, 'height' => 462 ) ) ), $config->resLarge => array( 'srcset' => 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==', 'data-srcset' => array( 'method' => array( 'type' => 'size', 'width' => 427, 'height' => 285 ) ) ) ), 'img' => array( 'src' => 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==', 'attributes' => array( 'class' => 'lazyload uk-width-1-1' ), 'data-srcset' => array( 'method' => array( 'type' => 'size', 'width' => 630, 'height' => 421 ) ) ) ) ); And after all done calling images from page like : // on here you need to send single PageImage ! $img = image($page->image->first(), $config->respImgOptions['villa']['list']); Like this usage if you have https://github.com/aFarkas/lazysizes and https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/respimg every thing will work well !