Jump to content
MichaMichaMicha

CKeditor gallery/image group option

Recommended Posts

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...  :undecided:

Any module like that available for Processwire?

Share this post


Link to post
Share on other sites

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

post-1920-0-73754700-1464837306_thumb.pn

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)

  • Like 2

Share this post


Link to post
Share on other sites

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

attachicon.gifhannacode-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?

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By prestoav
      Hi all and thanks for the great work on PW!

      One thing I find I have to do on any new site is add the Justify plugin to textarea fields as it is such a widely required feature for text headings in content.

      ANy chance this could be added to the core an automatically be installed on new textarea fields using CKEditor?

      Thank you!
    • By rushy
      Hi all
      Continuing my first project where I am creating and manipulating stuff from the frontend. Till now I've always added things like images from the backend, but in this project I need to add and move images from a frontend control. This is a photo album where images are stored in albums, each album being a page containing a Pageimages array in the usual way. So what I want to know is how do I move an image from one album (page) to another in the frontend? I just need some guidance on how to approach this.  I suppose I need to do a copy and delete - but how do I copy an image or images from one page to another? What function should I use to create a new image on an existing page? I include a code snippet from the server side of my delete image request and it works fine. I'd like to implement something similar for a move and upload new image request. 
      Many thanks for any help. Paul 
      <?php namespace ProcessWire; // sanitize inputs as 1-line text $action = $sanitizer->text($input->post('action')); $instr = $sanitizer->text($input->post('input')); $sel = $input->post('selected'); // Expect JSON for image selected image list $selected = json_decode($sel); $nosel = count($selected); $response = array(); // for building JSON response switch($action) { // delete selected images case 'delete': $out = "<p>Deleted $nosel image(s)</p>"; foreach($selected as $item){ $album = $pages->get($item->album); $album->of(false); $out .= "<p>Image {$item->file} from album {$album->title}</p>"; $album->images->delete($item->file); $album->of(true); } $out .= saveUpdatedAlbums($pages, $selected); // add the response message for the delete $response['message'] = $out; break; ...... // save any album that had an image deleted function saveUpdatedAlbums($pages, $selected) { $cur = ''; $out = ''; foreach($selected as $item){ $album = $pages->get($item->album); if($album->id != $cur) { $album->of(false); $album->save('images'); $album->of(true); $cur = $album->id; $out .= "<p>Updated album {$pages->get($cur)->title}</p>"; } } return $out; }  
       
       
    • By AndréPortuga
      Does anyone knows if there is a way of selecting a iframe inside a textfield(using ckEditor)? 
      I mean I have a Iframe with this code:
      <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" scrolling="no" src="https://www.youtube.com/embed/PMaFJjZDrYM" width="100%"></iframe></p>
       
      but it's not getting responsive in iPhones.. So anyone know how can I select it via code for making it responsive?
       
      Thank you,
    • By Robin S
      Inspired by a recent question.
      Image Crop Ratios
      Allows preset aspect ratios to be defined per image field for the ProcessWire image crop tool.
      The module adds a select dropdown to the crop tool. Choose an aspect ratio and the crop area will be fixed to that ratio.
      Screencast

      Installation
      Install the Image Crop Ratios module.
      Configuration
      Default aspect ratios for all image fields can be defined in the module config. Aspect ratios for specific image fields can be defined on the Input tab of the field settings. You can override the ratio settings in template context if needed. Insert a hyphen as the first item in the ratio settings unless you want to force a ratio to be applied to the crop tool. The hyphen represents a blank option that allows a free crop area to be drawn. Usage
      Click the "Crop" link on the details view of an image thumbnail. Click the "Crop" icon at the top of the editor window. Choose an option from the "Ratio" select dropdown.  
      https://github.com/Toutouwai/ImageCropRatios
      https://modules.processwire.com/modules/image-crop-ratios/
    • By dragan
      On one particular site, CKEditor behaves rather weird:
      When I copy and paste "normally", i.e. CTRL + V, there is an alert popping up "do you really want to leave this page?". If you cancel, the text is pasted into the field. If not, you get redirected to the frontend of the page you just edited, and the changes are lost.
      The "paste from Word" button doesn't work. CTRL + SHIFT + V works, but all formatting is lost (apart from paragraphs).
      I'm using inline editor mode, ACF + Purifier are activated. I know that if I disable those two, CTRL + V works, but I won't do that, since CKE then saves all the garbage code from MS-Office.
      Has anyone ever come across this issue? I tried with Chrome + FF. No JS errors.
×
×
  • Create New...