MichaMichaMicha Posted June 1, 2016 Share Posted June 1, 2016 I have a content field (CKeditor) where I want the editor to be able to insert galleries with photo's anywhere in the content. Like the image insert functionality already present but with the option to add multiple images and have them transform into a gallery using Javascript. The javascript is not an issue but I'm not sure how to get the images nicely in the CKeditor field. I kind of like the solution Wordpress has for galleries... Any module like that available for Processwire? Link to comment Share on other sites More sharing options...
gebeer Posted June 2, 2016 Share Posted June 2, 2016 I have a setup where users can enter some Hanna Code in the editor which will be replaced by a gallery that contains all images on that page or a chosen number of images. This is my Hannacode PHP <?php $images = $page->images; // name of your images field if ($images->count) { $config->scripts->add($config->urls->templates . "bower_components/fancybox/source/jquery.fancybox.pack.js"); $config->styles->add($config->urls->templates . "bower_components/fancybox/source/jquery.fancybox.css"); $showcount = ($show == "all") ? false : $show; $gallery = "<article class='gallery row'>"; if($showcount) $images = $images->find("limit={$showcount}"); foreach ($images as $i) { $thumb = $i->size(300, 300); $desc = ($i->description) ? $i->description : $page->title; $gallery .= "<div class='col-md-4'> <div class='thumbnail'> <a class='fancybox' rel='group' href='{$i->url}'> <img src='{$thumb->url}' alt='{$desc}'> </a> <p class='caption'>{$desc}</p> </div> </div>"; } } $gallery .= "</article>"; echo $gallery; Hanna Code to insert into the editor: [[gallery]] // shows all images [[gallery show=6]] // shows first 6 images Settings in Hanna Code module With this solution users cannot choose the images for the gallery from within CKEditor but it takes images from the images field of that page. This should get you started. Obviously you'd need to adjust script paths and markup (I'm using Bootstrap 3 here) 2 Link to comment Share on other sites More sharing options...
MichaMichaMicha Posted June 2, 2016 Author Share Posted June 2, 2016 I have a setup where users can enter some Hanna Code in the editor which will be replaced by a gallery that contains all images on that page or a chosen number of images. This is my Hannacode PHP <?php $images = $page->images; // name of your images field if ($images->count) { $config->scripts->add($config->urls->templates . "bower_components/fancybox/source/jquery.fancybox.pack.js"); $config->styles->add($config->urls->templates . "bower_components/fancybox/source/jquery.fancybox.css"); $showcount = ($show == "all") ? false : $show; $gallery = "<article class='gallery row'>"; if($showcount) $images = $images->find("limit={$showcount}"); foreach ($images as $i) { $thumb = $i->size(300, 300); $desc = ($i->description) ? $i->description : $page->title; $gallery .= "<div class='col-md-4'> <div class='thumbnail'> <a class='fancybox' rel='group' href='{$i->url}'> <img src='{$thumb->url}' alt='{$desc}'> </a> <p class='caption'>{$desc}</p> </div> </div>"; } } $gallery .= "</article>"; echo $gallery; Hanna Code to insert into the editor: [[gallery]] // shows all images [[gallery show=6]] // shows first 6 images Settings in Hanna Code module hannacode-settings1.png With this solution users cannot choose the images for the gallery from within CKEditor but it takes images from the images field of that page. This should get you started. Obviously you'd need to adjust script paths and markup (I'm using Bootstrap 3 here) Thanks. However I would like the editor to achieve something like: <p>Lorem</p> <div class='gallery'> <img src='1.jpg' /> <img src='2.jpg' /> <img src='3.jpg' /> </div> <p>Lorem ipsum</p> <div class='gallery'> <img src='4.jpg' /> <img src='5.jpg' /> <img src='6.jpg' /> </div> <p>Lorem ipsum dolor sit</p> Also I would like to prevent the editor to make use of hannacode because it's not that user friendly. Anyone got another suggestion? Link to comment Share on other sites More sharing options...
Robin S Posted June 2, 2016 Share Posted June 2, 2016 The suggestion by gebeer can achieve that markup - you just need to modify the PHP used in the Hanna code. If you consider it's not user friendly to type the Hanna code then you can make use of the Hanna Code Helper module. If you wanted to support multiple galleries per page and don't want to worry about the 'show' limit in gebeer's code it occurs to me that you could create a repeater field, the template for which contains only an images field. Then your Hanna code could get then nth repeater item (as specified by the user in the Hanna tag) and output its images. Shouldn't be too difficult to code. Downside is the user would need to be instructed not to reorder gallery repeaters after they are in use. ...the template for which contains a title field and images field, and the the Hanna code finds the gallery by title. That said, to do this type of layout (and an infinite number of others) properly I recommend the Repeater Matrix - it's a pro module but well worth the cost. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now