6+ months ago, I had to build a simple image-gallery by client request. Basically, the client wanted something really really simple to handle. No snippet-code to remember ("what’s a backtick?"), no switching to frontend for editing, no restrictions re: number of images (TVs), no Flash... I came up with a solution that fit the bill.
I thought that somebody else may come across a similar situation at some point (e.g. where MaxiGallery is overkill or not suitable). Hence, this snippet here.
Description:
Use a rich-text TV and regular tinyMCE "insert image" button to create a little picture gallery inside the manager.
Including automatic thumbnail generation and image-captions (captions are optional).
Why?
A possible alternative to using MaxiGallery for really quick + small image-sets (no need to switch from backend to frontend).
Might be easier to use for certain editors, since no snippet code is necessary (a special template is all that is needed).
Most non-geeks (often our clients) actually like to use WYSIWYG, and they’re scared to even look at a raw HTML tag, let alone a snippet call with a long list of parameters. Here, all they have to do is adding pics like they’re used to. It doesn’t interrupt their workflow.
Installation:
a) Create a new snippet called pixHandlerDOM. Paste the contents of pixHandlerDOM.php into it and save.
There’s a few config parameters you can change / define.
b) Create a new template variable (TV). Name = myImages. Input type: rich-text.
c) Create a new template that uses the necessary snippet-code and placeholders (or insert those into an existing template). See example template (kept very simple on purpose).
d) Go back to the TV you created in b) and tick the template(s) that you created in c)
(link TV to template)
Usage:
Simply create a new document with the mini-gallery template. Insert a few pictures via the normal "insert image" buttons that tinyMCE provides.
Add as many as you like. Reorder images via drag and drop. Don’t forget to add alt- and title-attributes. Publish + save the doc, preview it in the frontend.
If all has gone well, you should see the thumbs and the default image in exactly the same order as you put them in the richtext window.
Hint: Set "advanced resizing" to "true" in your tinyMCE settings (Resources > Plugins). This will enable you to resize the richtext-areas.
Or use the "fullscreen" button inside tinyMCE to get more screen real-estate.
Requirements:
The PHP DOM extension. See
http://php.net/DomDocument for more infos.
I believe this has been added in PHP 5 only. This function is used to retrieve all image-tags from the rich-text TV, and all img-parameters.
Why doesn’t it do X? Why doesn’t it use {insert-favorite-gimmick-here}?
As the title suggests, it’s meant to be minimal. It won’t do any thickbox/lightbox trickery, it won’t do fancy transitions, it will refuse to serve a Latte macchiato. Although it should be relatively easy to use the main snippet (retrieving all images, title- and alt-attributes) and just add / change functionality as needed. Load jQuery if you want for thickbox, add rel="lightbox" for lightbox, etc.
e.g. you could wrap your thumbnails in a scrollable DIV simply by adding overflow: auto; to the CSS.
