jploch

This looks very cool!! If you find some time, it would be nice if you could share your new version (the one shown in the video). I would also be happy with a duplicator/site profile to install. No rush. in which city do you move? You are also german right?

Iam generally not a huge fan of css frameworks, because they often feel bloated, so I usually code the complete css myself. With CSS grid Iam not talking about a framework but the CSS grid specification. Jen Simmons from Mozilla has some great videos explaining the benefits of using it for layouts. Anyway I would also be very happy with the bootstrap version you made! Do you have any plans for releasing this as a module? Or maybe even a release date? ?

This looks very nice! I was working on a similar thing using the css grid specification with page table extended as a pagebuilder. But your approach is way superior because it supports inline editing, resize and better drag and drop (thought, this could still be improved, as it sometimes don't work as expected). I think this could be a very nice addition to PW, and something a would use a lot. Anyway it would be super awesome if you could release this as a module at some point! I would offer to adapt this for css grid, as I think that would be a nice option for some people and has more possibilities than bootstrap. Iam a frontend developer and designer so this might be out of my abilities, but I would try ?

Thank you for this module! It works great but I have some problems with the options not getting recognised. (Iam using the dev version, because of the geocoding issues with google maps) Since I use the map as a fullscreen background I need to disable the zoom on scroll feature for usability. The option for the marker are working but the leaflet options scrollWheelZoom and dragging are ignored. This is my code: $map = $modules->get('MarkupLeafletMap'); $options = array('markerIcon' => 'flag', 'markerColour' => 'red', 'scrollWheelZoom' => false, 'dragging' => false); echo $map->render($page, 'map', $options); another option would be to disable this after init with map.scrollWheelZoom.disable() But this is also not working, because map is not defined. Whats the name of the map instance in js?

My PTE is not working with markup regions This post can be deleted. My markup regions are working fine with PTE, I made a mistake in my code..

That worked! Thanks for your help!

@Robin S Thanks you are the best! works great!! Edit: While these pages now redirect to a 404 page, all pages using my pagetable block with the redirect stopt showing up in admin. showing a red error message saying The process returned no content. And the whole page is empty with nothing to edit. ? ––––– The next cool addition would be a way to clone block items. Even nicer if these could be cloned to different pages as well and still be able to get edited on every page. this is also discussed here: But Iam not sure if I understand where to put LostKobrakai code or how to adapt this.

I have managed to build a pagebuilder with blocks using PageTableExtended. Its working well and the customer is very happy with the look and usability. All the pages that are created with my PageTable are living under admin–>siteparts Now I tried to make the blocks reusable on other pages using the PageReferenceField. The problem is, the parent, where the pages from my PageTable are living, is set to not be viewable by guest users to prevent these pages from being viewable on the frontend. Now they only show up on the Frontend when Iam logged In. How can I prevent those pages to be accessed by URL, but still be able to include these pages with the PageReferenceField?

I have the same problem when resizing images with the api. Doing this, did not solve it for me: $item->block_image->first()->size(100)->url edit: it works when I set the image field as an array and loop through it. but this is not ideal in my use case. I would like to keep the field as an single image field, so the client can simply change the image by replacing an existing one. This was also a suggested solution, but Iam not sure where I have to put this (inside my template for the pagetable items?): <?php namespace ProcessWire; if ($page->pageReference) { $refPage = $page->pageReference; $img = $refPage->image; echo $img->url; }

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!