ukyo
-
Posts
262 -
Joined
-
Last visited
-
Days Won
6
Posts posted by ukyo
-
-
@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.
-
1
-
-
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.
-
1 hour ago, adrian said:
Sorry @ukyo - I can't can't reproduce here. Could you please try dumping $pagefile, $suffix, and $pagefile->getCrop($suffix) just before line 139 to see what we are dealing with.
Thanks!
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.
-
19 minutes ago, horst said:
@ukyo: what I tried to say is, that CroppableImage3 is an extention of the core imagefield and it incorporates all stuff related to uploading as is, without making any changes. Therefore, maybe it would be interesting if you have the same behave when trying with a regular core imagefield, or how that differs.
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 139like i said if i refresh the page, images uploaded and i can use CroppableImage3 module for resizing.
-
20 hours ago, adrian said:
Hi @ukyo - thanks for those details. Unfortunately I can't reproduce the problem here.
I put this Tracy dump call just before line 139 (as reported in the error):
bd($pagefile->getCrop($suffix)->url);
and it is correctly reporting the url to the cropped version of the file.
Perhaps there is a certain sequence of events that is required to trigger the error. Could you please detail exactly the steps involved starting from a new images field, including the crop settings you have configured for the field.
19 hours ago, horst said:@adrian & @ukyo: I'm not aware of any upload processing done by CroppableImage3. It only extends the coreimage field in some points, but nothing in regard of uploading.
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.
-
20 minutes ago, adrian said:
I'll take a look, but can you first post a screenshot of your settings for this module and also any dev console Network tab errors coming from the upload ajax request?
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 :
-
1
-
-
@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 120I am using ProcessWire 3.0.36 version, I made fresh module installation.
-
On 27.08.2016 at 10:34 PM, tpr said:
I'm not against it, but setting the lowest width-height size will be inappropriate on larger sizes (eg. 687x515 on the next breakpoint in your example). Or do you think it's OK?
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; -
37 minutes ago, jploch said:
Hi! Thx for this cool module!
I want to use this with a costum Icon-Set and need some help.
I did put an URL in the custom css field, but my Icons dont show up in the backend.
Is there anything else I have to do to get this to work?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.
-
29 minutes ago, bernhard said:
@ryan updated module, now you can update module directly from admin panel
-
3
-
-
On 10.07.2016 at 6:24 PM, larrybotha said:
To supplement @John the Painter's answer:
1. Update InputfieldMapMarker.module to get your API key however you're managing it:
public function init() { $apikey = // get my api key $script_path = ($this->config->https ? 'https' : 'http') . "://maps.googleapis.com/maps/api/js?key={$apikey}"; $this->config->scripts->add($script_path); return parent::init(); }
2. Enable 'Google Maps Geocoding API' in your Google API Console for your site's API key: https://console.developers.google.com/apis/api/geocoding_backend/overview
You may need to enable whichever other individual APIs (places, geolocation, etc.) from Google's API library for the client side if you use the same API key: https://console.developers.google.com/apis/library
Updating the MapMarker module will remove these changes if this file is affected by the update.
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.
-
3
-
-
I found the problem, when i add a <base> tag inside <head> tag, this problem appear.
-
2
-
-
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-
11
-
-
With 0.9.8 version problem look like gone. Thanks for quick reply / fix !
-
1
-
-
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.
-
1
-
-
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>-
3
-
-
@ukyo: this looks very well. I have bookmarked this post because I allready use lazysizes and respimg in two projects, but I think I haven't it that well organized as you have. Next possibilty I have time for it, I will compare mine with yours and update / reorganize mine where needed. Many thanks for sharing!
Thanks @horst, if you see my mistakes and no need things or any useful things let me know please
-
1
-
-
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; }-
2
-
-
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 !-
10
-
Croppable Image 3
in Modules/Plugins
Posted
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.