jploch

Hey! Thank you for this great module, I use it as part of a repeater item (for settings, to save some white space and grouping the settings). Now I tried to echo the Value of a select option (Dropdown) like this: {$item->grid_settings->gridsize->title} gridsize is the name of my select field. And grid_settings is the name of my ConfigurationForm field (which contain multiple select fields). Item is the repeater item. But this is not working. What Iam missing here? Also is it possible to preselect an option?

Hi Sergio, thats unfortunate. Iam still optimizing the page. Intentionally it should lazyload/preload some of the assets (this is needed for the scroll sequences used on some pages). But that should not stop the rest of the page from showing up. What browser did you testet this on? Maybe I have to add a loading icon just in case.. I added a loading icon if the page is not ready.. Thx for testing!

I just relaunched my portfolio website. It's my first ajax driven website using ProcessWire as a CMS. Its a showcase of some of my work as well as a digital playground to improve my coding skills. If you encounter any bugs or have feedback, feel free to share janploch.de

no offense taken! But Iam a newbie when it comes to PHP tbh.

thanks Robin and Adrian!! Robins solution worked for me. Here is my final Code, with loading and sorting the files and converting them to an PageImage so that I can resize them later (if needed) This Example also uses lazysizes to load the images. Maybe this helps someone: $files_array = $item->sequenz_files->getArray(); natsort($files_array); // And if you need the files as a Pagefiles object for some reason $pagefiles = new Pagefiles($item); $pagefiles->import($files_array); // Now foreach $pagefiles $si = 0; foreach ($pagefiles as $imagefile) { if($imagefile->ext == 'jpg'){ $si++; // create a new Pageimage with the file $preloaderImage = new Pageimage($item->images, $imagefile->filename); echo "<img src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' data-src='{$preloaderImage->url}' class='{$si} lazyload' />"; } }

sorry for the late response. Iam still struggling with the sort order. With this the images are in the wrong order: $sortetFiles = $item->sequenz_files->sort('name'); foreach ($sortetFiles as $key => $file) { echo "<img src='{$file->url}'>"; } Output: <img src='0.jpg'> <img src='1.jpg'> <img src='10.jpg'> <img src='100.jpg'> <img src='101.jpg'> <img src='102.jpg'> ..... maybe I need to rename the Images, like 000, 001, 002, etc.?

Because of the huge amount of images I used a file Field on a page to store the images, which is working nicely! Now I only have the problem that I want to sort the files alphabetically/numerical. My files are named like this: file_0.jpg file_1.jpg file_2.jpg I have this wich is not working: $sortetFiles = $item->sequenz_files->sort('name'); foreach ($sortetFiles as $key => $file) { echo "<img src='{$file->url}'>"; }

thx! I put the files in the template folder and still get a 403. With commenting the following line in .htaccess (in root) it works: Block access to any PHP or markup files in /site/templates/ # RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/templates($|/|/.*\.(php|html?|tpl|inc))$ [OR] are there any security risks in doing this?

Hi folks! For a website Iam working on I need to (pre)load a huge amount of images (100-500) from a folder in assets (wich I upload via FTP). To preload them I want to add them to the DOM inside a container, that I hide with css. This images will be use for a frame by frame animation (that animates with scrolling) so they should be loaded parallel and if the user clicks a cancel button, the loading should be canceled. (My website is using ajax to load pages with different animations, and the loading of the second animation waits till the loading of the first animation is loaded completly, wich I want to prevent). I want to use ajax to do this, so I can cancel the loading with xhr.abort(); Here is my code: var folder = '{$config->urls->assets}sequenzen/test/'; xhr = $.ajax({ url : folder, success: function (data) { $(data).find("a").attr("href", function (i, val) { if( val.match(/\.(jpe?g|png|gif)$/) ) { $(".preloader").append( "<img src='"+ folder + val +"'>" ); } }); } }); this will give me a 403 forbidden error. After some research I found out that I have to put a .htaccess in my assets folder. I also tried putting it in the sub folder "test", where the files are, but Iam still getting the error. Is there anything else Iam missing? Is there a configuration in PW i have to change to do that?

I fixed this by changing the PHP version. It was running PHP 5.3 before.. This can be deleted/closed

Hi! I have a problem with uploading animated GIFs again. The upload starts, but never finishes and just loads forever. Iam running PW 3.0.62 and have the Image Animated GIF Module installed. I also increased the memory limit in the htaccess file in PW root directory like this: <IfModule mod_php5.c> php_value memory_limit 256 php_value upload_max_filesize 64M php_value post_max_size 64M php_value max_execution_time 300 php_value max_input_time 1000 </IfModule> I had this problem before, but was able to fix it with the Animated GIF Module and the modification of the htaccess file. So maybe this is related to the provider (strato). Here is the error I get, when uploading the GIF (1.1 MB filesize) Warning: preg_match_all() expects at least 3 parameters, 2 given in /mnt/web216/a2/50/51925650/htdocs/processwire/wire/core/PWGIF.php on line 252 Warning: preg_match_all() expects at least 3 parameters, 2 given in /mnt/web216/a2/50/51925650/htdocs/processwire/site/assets/cache/FileCompiler/site/modules/ImageAnimatedGif/ImageAnimatedGif.module on line 285 Warning: preg_match_all() expects at least 3 parameters, 2 given in /mnt/web216/a2/50/51925650/htdocs/processwire/wire/core/PWGIF.php on line 252 Warning: preg_match_all() expects at least 3 parameters, 2 given in /mnt/web216/a2/50/51925650/htdocs/processwire/wire/core/PWGIF.php on line 252 Warning: preg_match_all() expects at least 3 parameters, 2 given in /mnt/web216/a2/50/51925650/htdocs/processwire/site/assets/cache/FileCompiler/site/modules/ImageAnimatedGif/ImageAnimatedGif.module on line 285 Warning: preg_match_all() expects at least 3 parameters, 2 given in /mnt/web216/a2/50/51925650/htdocs/processwire/wire/core/PWGIF.php on line 252 [{"error":false,"message":"Added file: test.gif","file":"\/processwire\/site\/assets\/files\/1098\/test.gif","size":101734,"markup":"<li id='file_daf280af792fd5b906511363ae2bc39d' class='ImageOuter gridImage ui-widget'><div class='gridImage__tooltip'><table><tr><th>Dimensions<\/th><td>500x333<\/td><\/tr><tr><th>Filesize<\/th><td>99&nbsp;kB<\/td><\/tr><tr><th>Variations<\/th><td>0<\/td><\/tr><\/table><\/div>\n\t\t\t<div class='gridImage__overflow'>\n\t\t\t\t<img src=\"\/processwire\/site\/assets\/files\/1098\/test.0x260.gif?nc=1509109293\" alt=\"\" data-w=\"500\" data-h=\"333\" data-original=\"\/processwire\/site\/assets\/files\/1098\/test.gif?nc=1509109293\" \/>\n\t\t\t<\/div>\n\t\t\t\n\t\t\t\t<div class='gridImage__hover'>\n\t\t\t\t\t<div class='gridImage__inner'>\n\t\t\t\t\t\t<label for='' class='gridImage__trash'>\n\t\t\t\t\t\t\t<input class='gridImage__deletebox' type='checkbox' name='delete_thumbnail_daf280af792fd5b906511363ae2bc39d' value='1' title='Delete' \/>\n\t\t\t\t\t\t\t<span class='fa fa-trash-o'><\/span>\n\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t<a class='gridImage__edit'>\n\t\t\t\t\t\t\t<span>Edit<\/span>\n\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\t\t\t\t<div class='ImageData'>\n\t\t\t\t\t<h2 class='InputfieldImageEdit__name'><span contenteditable='true'>test<\/span>.gif<\/h2>\n\t\t\t\t\t<span class='InputfieldImageEdit__info'>99&nbsp;kB, 500&times;333 <\/span>\n\t\t\t\t\t<div class='InputfieldImageEdit__errors'><\/div>\n\t\t\t\t\t<div class='InputfieldImageEdit__buttons'><small><button type='button' data-href='\/processwire\/admin\/page\/image\/edit\/?id=1098&file=1098,test.gif&rte=0&field=thumbnail' class='InputfieldImageButtonCrop ui-button ui-corner-all ui-state-default pw-modal-large pw-modal' data-buttons='#non_rte_dialog_buttons button' data-autoclose='1' data-close='#non_rte_cancel'><span class='ui-button-text'><span class='fa fa-crop'><\/span> Crop<\/span><\/button><button type='button' data-href='\/processwire\/admin\/page\/image\/variations\/?id=1098&file=test.gif&modal=1&varcnt=varcnt_thumbnail_daf280af792fd5b906511363ae2bc39d' class='ui-button ui-corner-all ui-state-default pw-modal-large pw-modal' data-buttons='button'><span class='ui-button-text'><span class='fa fa-files-o'><\/span> Variations <span class='ui-priority-secondary'>(0)<\/span><\/span><\/button><\/small><\/div>\n\t\t\t\t\t<div class='InputfieldImageEdit__core'><div class='InputfieldFileDescription'><label for='description_thumbnail_daf280af792fd5b906511363ae2bc39d' class='detail'>Description<\/label><input type='text' name='description_thumbnail_daf280af792fd5b906511363ae2bc39d' id='description_thumbnail_daf280af792fd5b906511363ae2bc39d' value='' \/><\/div><\/div>\n\t\t\t\t\t<div class='InputfieldImageEdit__additional'><\/div>\n\t\t\t\t\t<input class='InputfieldFileSort' type='text' name='sort_thumbnail_daf280af792fd5b906511363ae2bc39d' value='1' \/>\n\t\t\t\t\t<input class='InputfieldFileReplace' type='hidden' name='replace_thumbnail_daf280af792fd5b906511363ae2bc39d' \/>\n\t\t\t\t\t<input class='InputfieldFileRename' type='hidden' name='rename_thumbnail_daf280af792fd5b906511363ae2bc39d' \/>\n\t\t\t\t<\/div>\n\t\t\t<\/li>","replace":true,"overwrite":0}]

Nice! thanks abdus and kongondo! its all working now!

Thx for the quick reply! But this doesn't seems give me the correct array, it just returns nothing: $tags = $event->options->extract('title');

Hi! this should be easy, but I can't get it to work. I have a repeater with events. Every event has an option-field with multiple checkboxes. To filter the events on the frontend I have a script, that uses the class names to filter the results (an event can have multiple categories). Now I just want to add every checked option (title) to use as my class name. This is what I have so far, wich only gets the first title. foreach($page->events as $event) { $tags = $event->options->title; echo "<div class='size1of2 {$tags}'>"; echo "<img src='{$event->image->url}'>"; echo "{$event->text_editor}"; echo "</div>"; } I know there is an example with a foreach, but how would I use it in this context? foreach($page->countries as $country) { echo "<li>$country->title</li>"; }

@horst Thanks for explaining the problem! unfortunately I have to use GIF's with transparency. I think that would be the way to go. How would I target GIF's in my template file? Can you give an example? Thanks again for your support!

any news on using this with animated gif's? I have an image field with various files (gif, png, jpg) Is there a way to just target gif files and resize them with PW (like $image->width(300);) and use MarkupSrcSet for the rest of the images? Any help would be appreciated!

@Robin S Thanks for your Help! The order was messed up, even when I echoed out the title. I found out that the order is correct when I change this line $albums = $pages->find("parent=/work/, template=project, thumbnail!='', sort=sort"); to: $albums = $pages->find("parent=/work/, template=project, sort=sort"); Now I only have one problem. I want to display all thumbnails, even when there are just 6. So it should be one slide with 4 and one with the remaining 2.

@Robin S Thanks for your quick reply! Your code works better. The number of images is now correct, but the order is still not right. I want the images to be displayed in the order they are sorted in PW (so the user can sort them with dragging in the page tree). I also noticed that I can't login to the processwire backend, after I created the init.php file in my site directory. When I delete it, it works. Is there anything else I have to do? (Running PW 3.0.42.) Any suggestions? With my own code I felt more confident because I can understand better how it works, even if it may be bad practise.

Hi! I have a problem with pagination. My site structure is like this: – Work – Project 1 – Project 2 – Project 3 Every project-page has a thumbnail I want to display. I have a slider that creates pagination automatically with a structure like <div id="slide1"></div>, <div id="slide2"></div>, etc. I want to have 4 thumbnails per slide. My problem is, that the order and number of images is messed up. Here is my code: function albumList(){ // Get the list of albums $albums = wire("pages")->find("parent=/work/, template=project, sort=sort"); $albums_total = wire('pages')->get("/work/")->numChildren; $images_per_page = 4; $slides = round($albums_total / $images_per_page); //Create Slides for($i = 0; $i < $slides; $i++) { $start = ($i) * $images_per_page; $slide_id = $i + 1; $images_limited = $albums->slice($start, $images_per_page); echo ("<div class='slide' id='slide{$slide_id}'><div class='grid'>"); //Display Images foreach($images_limited as $album) { // if there's no thumbnail no need to do anything if(!$album->thumbnail) continue; // save srcset tag to a variable $bgset = $album->thumbnail->bgset('half', 'lazyload item size1of2', array('quality' => 70)); $out .="<a href='{$album->url}' $bgset><img src='site/templates/img/plus-icon.svg' class='info-button'>"; $out .="<div class='item-info'><div class='info-container-center'><h3>{$album->thumbnail->tags}</h3><h2>Für {$album->title}</h2><p>{$album->thumbnail->description}</p></div></div>"; $out .="</a>"; echo $out; } echo ("</div></div>"); } } Any help would be highly appreciated! Thx!

Thanks for your quick reply! Here is my code example (shortened) without MarkupSrcSet and with ImageAnimatedGif installed: $image->width(300); echo ="<img src='{$image->url}'>"; Result: code example with MarkupSrcSet and ImageAnimatedGif installed: $srcset = $image->srcset('thumbnail', 'inline-block', array('quality' => 70)); echo ="<img $srcset>"; Result:

For a website Iam working on, I tried to use this module with animated gif's. I know that PW doesn't support resizing animated gif's out of the box, so I also installed the "Image Animated Gif Module". Now the gif's are animated but have strange artifacts and colors. When I resize them with PW like "$image->width(320)" they are fine. Is there anyone having the same problem? Would be awesome to use this module for all my images! THX!

Thx! this fixed it for me

hi! thanks for this great module! today I experienced a strange issue when using this module with the Video Fieldtype Module I get the following error when uploading a video, when the image extra module is installed: <br /> <b>Notice</b>: Trying to get property of non-object in <b>/www/htdocs/w00dd152/projekte/jp-relaunch/site/modules/ImageExtra/ImageExtra.module</b> on line <b>722</b><br /> [{"error":false,"message":"Added file: portfolio_screencap_02.mp4","file":"\/jp-relaunch\/site\/assets\/files\/1162\/portfolio_screencap_02.mp4","size":3214711,"markup":"<li id='file_c17b44756649023a42ba014c5b29202c' class='InputfieldFile InputfieldImage InputfieldVideo ui-widget'>\n\t\t<p class='InputfieldFileInfo ui-widget ui-widget-header'>\n\t\t\t<span class='ui-icon ui-icon-arrowthick-2-n-s'><\/span>\n\t\t\t<span class='InputfieldFileName'>portfolio_screencap_02.mp4<\/span> \n\t\t\t<span class='InputfieldFileStats'>• 3,139 kB • <\/span> \n\t\t\t<label class='InputfieldFileDelete'><input type='checkbox' name='delete_video_repeater1162_c17b44756649023a42ba014c5b29202c' value='1' \/><span class='ui-icon ui-icon-trash'>Delete<\/span><\/label>\n\t\t\t<a class='InputfieldFileMove InputfieldFileMoveBottom' href='#'><span class='ui-icon ui-icon-arrowthickstop-1-s'><\/span><\/a> \n\t\t\t<a class='InputfieldFileMove InputfieldFileMoveTop' href='#'><span class='ui-icon ui-icon-arrowthickstop-1-n'><\/span><\/a> \n\t\t<\/p>\n\t\t\t<div class='InputfieldFileDescription'><label for='description_video_repeater1162_c17b44756649023a42ba014c5b29202c' class='detail'>Description<\/label><input type='text' name='description_video_repeater1162_c17b44756649023a42ba014c5b29202c' id='description_video_repeater1162_c17b44756649023a42ba014c5b29202c' value='' \/><\/div>\n\t\t<br \/><label class='InputfieldFileDescription'><span class='detail'>Subtitles<\/span>\n\t\t<br \/><br \/>In templates, you can access this subtitles file (portfolio_screencap_02.srt) using: <code>$page->video->eq(0)->subtitles<\/code><br \/>In templates you can access a formatted transcript (converted from subtitles entered in SRT format), by using: <code>$page->video->eq(0)->transcript<\/code>\n\t\t<br \/><br \/><textarea rows='10' name='subtitles_video_repeater1162_c17b44756649023a42ba014c5b29202c' \/><\/textarea>\n\t\t\t<input class='InputfieldFileSort' type='text' name='sort_video_repeater1162_c17b44756649023a42ba014c5b29202c' value='0' \/>\n\t\t<\/p><\/li>","replace":false,"overwrite":0}] I testes this in PW 3.0 with the newest versions of both modules installed. Not sure why its even interfering with the video field.. When I disable the image extra module, everything works fine.

you are right! even with the newest version it wasn't working. after disabling the module it worked as expected. I will post this issue in the image extra forum thread, maybe someone can fix this. Thanks for your help!

Sorry Iam not sure how to see the response tab in chrome (more designer, than developer, but Iam learning). On the source tab I get this error. Maybe this helps? <br /> <b>Notice</b>: Trying to get property of non-object in <b>/www/htdocs/w00dd152/projekte/jp-relaunch/site/modules/ImageExtra/ImageExtra.module</b> on line <b>722</b><br /> [{"error":false,"message":"Added file: portfolio_screencap_02.mp4","file":"\/jp-relaunch\/site\/assets\/files\/1162\/portfolio_screencap_02.mp4","size":3214711,"markup":"<li id='file_c17b44756649023a42ba014c5b29202c' class='InputfieldFile InputfieldImage InputfieldVideo ui-widget'>\n\t\t<p class='InputfieldFileInfo ui-widget ui-widget-header'>\n\t\t\t<span class='ui-icon ui-icon-arrowthick-2-n-s'><\/span>\n\t\t\t<span class='InputfieldFileName'>portfolio_screencap_02.mp4<\/span> \n\t\t\t<span class='InputfieldFileStats'>• 3,139 kB • <\/span> \n\t\t\t<label class='InputfieldFileDelete'><input type='checkbox' name='delete_video_repeater1162_c17b44756649023a42ba014c5b29202c' value='1' \/><span class='ui-icon ui-icon-trash'>Delete<\/span><\/label>\n\t\t\t<a class='InputfieldFileMove InputfieldFileMoveBottom' href='#'><span class='ui-icon ui-icon-arrowthickstop-1-s'><\/span><\/a> \n\t\t\t<a class='InputfieldFileMove InputfieldFileMoveTop' href='#'><span class='ui-icon ui-icon-arrowthickstop-1-n'><\/span><\/a> \n\t\t<\/p>\n\t\t\t<div class='InputfieldFileDescription'><label for='description_video_repeater1162_c17b44756649023a42ba014c5b29202c' class='detail'>Description<\/label><input type='text' name='description_video_repeater1162_c17b44756649023a42ba014c5b29202c' id='description_video_repeater1162_c17b44756649023a42ba014c5b29202c' value='' \/><\/div>\n\t\t<br \/><label class='InputfieldFileDescription'><span class='detail'>Subtitles<\/span>\n\t\t<br \/><br \/>In templates, you can access this subtitles file (portfolio_screencap_02.srt) using: <code>$page->video->eq(0)->subtitles<\/code><br \/>In templates you can access a formatted transcript (converted from subtitles entered in SRT format), by using: <code>$page->video->eq(0)->transcript<\/code>\n\t\t<br \/><br \/><textarea rows='10' name='subtitles_video_repeater1162_c17b44756649023a42ba014c5b29202c' \/><\/textarea>\n\t\t\t<input class='InputfieldFileSort' type='text' name='sort_video_repeater1162_c17b44756649023a42ba014c5b29202c' value='0' \/>\n\t\t<\/p><\/li>","replace":false,"overwrite":0}]