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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Roberts R
      Hello.
      I never though about it before but when I insert image into CKeditor field I don't get ALT tag filled from image that has it. Do I have to do it manualy for inserted image or Im doing something wrong?
       
    • By Peter Troeger
      Hello Community 🙂
      Has anyone ever tried having multiple elements on one page that get their info with $pages->find('selector, limit=n') and tried using pagination on one of these elements without effecting the other?
      I have a slider on a page where I display content with pagination. But when I go to page two, the slider content also goes to page two, which I don't want it to do 🙂
      Any tips are greatly appreciated!
      Thanks!
      -Peter
    • By Robin S
      If you've ever needed to insert links to a large number of files within CKEditor you may have found that the standard PW link modal is a somewhat slow way to do it.
      This module provides a quicker way to insert links to files on the page being edited. You can insert a link to an individual file, or insert an unordered list of links to all files on the page with a single click.
      CKEditor Link Files
      Adds a menu to CKEditor to allow the quick insertion of links to files on the page being edited.

      Features
      Hover a menu item to see the "Description" of the corresponding file (if present). Click a menu item to insert a link to the corresponding file at the current cursor position. The filename is used as the link text. If you Alt-click a menu item the file description is used as the link text (with fallback to filename if no description entered). If text is currently selected in the editor then the selected text is used as the link text. Click "* Insert links to all files *" to insert an unordered list of links to all files on the page. Also works with the Alt-click option. Menu is built via AJAX so newly uploaded files are included in the menu without the page needing to be saved. However, descriptions are not available for newly uploaded files until the page is saved. There is an option in the module config to include files from Repeater fields in the edited page. Nested Repeater fields (files inside a Repeater inside another Repeater) are not supported. Installation
      Install the CKEditor Link Files module.
      For any CKEditor field where you want the "Insert link to file" dropdown menu to appear in the CKEditor toolbar, visit the field settings and add "LinkFilesMenu" to the "CKEditor Toolbar" settings field.
       
      http://modules.processwire.com/modules/cke-link-files/
      https://github.com/Toutouwai/CkeLinkFiles
    • By Guy Incognito
      Hi all,
      Having a strange problem with my CKeditor custom styles.
      Trying to add standard bootstrap classes to the image alignment options. But for some reason if I add multiple classes to the centred image option it disappears from the editor drop down. But with only one class it works.
      So this works:
      { name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'float-md-left img-fluid' } }, { name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'float-md-right img-fluid' } }, { name: 'Centered Photo', element: 'img', attributes: { 'class': 'img-fluid' } }, But this doesn't:
      { name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'float-md-left img-fluid' } }, { name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'float-md-right img-fluid' } }, { name: 'Centered Photo', element: 'img', attributes: { 'class': 'w-100 img-fluid' } }, Note the slight difference to the last line.
      I've tried escaping the hyphens in case it was that but doesn't help.
      Any ideas.... #puzzled!
×
×
  • Create New...