Styling CKEditor & TinyMCE Image Gallery

Image Gallery plugin has ability to fully customize visual style if inserted images and their wrap.

Style can be configured using two parameters (in config.js file):

TinyMCE

CKEditor

config.jsplus_gallery_template - defines a view of each image inserted into the gallery.
config.jsplus_gallery_template_wrap - defines a view of wrap gallery (the code wrapping all images in a gallery).jsplus_gallery_template - defines a view of each image inserted into the gallery.
jsplus_gallery_template_wrap - defines a view of wrap gallery (the code wrapping all images in a gallery).

Default example

Let's see how does it work on the example. Below is the code of default template options (you do not need to paste it in your configurations file: they are being used when you do not set any values for these parameters).

TinyMCE

CKEditor

TinyMCE

CKEditor

config.jsplus_gallery_template =
   "<div class='jsplus_gallery_item' style='height: {PREVIEW_HEIGHT}px; width: {PREVIEW_WIDTH}px; border: 1px solid silver; white-space: nowrap; padding: 10px; display: inline-block; text-align: center; margin: 5px;'>" +
       "<a rel='lightbox' href='{IMAGE}'>" +
           "<span style='display: inline-block; height: 100%; vertical-align: middle;'></span>" +
           "<img src='{PREVIEW}' style='vertical-align: middle; max-height: {PREVIEW_HEIGHT}px; max-width: {PREVIEW_WIDTH}px;margin:0;padding:0'/>" +
       "</a>" +
   "</div>";
config.jsplus_gallery_template_wrap =
   "<div class='jsplus_gallery' style='padding:10px;border:1px solid #DFDFDF; display: table'>{ITEMS}</div>";jsplus_gallery_template:
     "<div class='jsplus_gallery_item' style='height: {PREVIEW_HEIGHT}px; width: {PREVIEW_WIDTH}px; border: 1px solid silver; white-space: nowrap; padding: 10px; display: inline-block; text-align: center; margin: 5px;'>" +
       "<a rel='lightbox' href='{IMAGE}'>" +
           "<span style='display: inline-block; height: 100%; vertical-align: middle;'></span>" +
           "<img src='{PREVIEW}' style='vertical-align: middle; max-height: {PREVIEW_HEIGHT}px; max-width: {PREVIEW_WIDTH}px'/>" +
       "</a>" +
   "</div>",
jsplus_gallery_template_wrap:
   "<div class='jsplus_gallery' style='padding:10px;border:1px solid #DFDFDF; display: table'>{ITEMS}</div>"

If you want to change UI of inserted galleries you are to override this code value. So let's understand the meaning of this code.
Each inserted image in wrapped with jsplus_gallery_template value. Some of parameters of new image will be substitured to keywords in the template. The list of keywords (yes, you may use more keyworks than it's represented in default template):

{IMAGE} - the URL of full sized image uploaded to your web site with this plugin.
{PREVIEW} - the URL of thumbnail's file generated on server.
{PREVIEW_WIDTH} - the width typed in thumbnail's options.
{PREVIEW_HEIGHT} - the height typed in thumbnail's options.
{PREVIEW_MIN_WIDTH_OR_HEIGHT} - minimum of width and height typed in thumnail options (but not zero value if exists).
{PREVIEW_MAX_WIDTH_OR_HEIGHT} - maximum of width and height typed in thumnail options (but not zero value if exists).
{FILENAME} - the name of file uploaded to server.

Width/height substitution patterns can be combined with plus operator and a number behind it, for example:

...style="width:{PREVIEW_WIDTH}+50px"...

Polaroid style demo

Let us try to customize the style. We will add Polaroid photo cards style (frame) to our pictures.

TinyMCE

CKEditor

That's easy, just modify a markup:

TinyMCE

CKEditor

config.jsplus_gallery_template =   
     "<div class='jsplus_gallery_item' style='background-color:#222; white-space: nowrap; padding: 15px 15px 40px 15px; display: inline-block; text-align: center; margin: 2px;border-radius:2px'>" +
            "<div style='background-color: #AAA;width:{PREVIEW_MIN_WIDTH_OR_HEIGHT}px;height:{PREVIEW_MIN_WIDTH_OR_HEIGHT}px;overflow:hidden'>" +
                   "<a rel='lightbox' href='{IMAGE}'>" +
                        "<span style='display: inline-block; height: 100%; vertical-align: middle;'></span>" +
                        "<img src='{PREVIEW}' style='vertical-align: middle; max-height: {PREVIEW_HEIGHT}px; max-width: {PREVIEW_WIDTH}px;margin:0;padding:0'/>" +
                    "</a>" +
             "</div>" +
     "</div>";
config.jsplus_gallery_template_wrap = "<div class='jsplus_gallery' style='padding:5px; display: table'>{ITEMS}</div>";jsplus_gallery_template:
     "<div class='jsplus_gallery_item' style='background-color:#222; white-space: nowrap; padding: 15px 15px 40px 15px; display: inline-block; text-align: center; margin: 2px;border-radius:2px'>" +
            "<div style='background-color: #AAA;width:{PREVIEW_MIN_WIDTH_OR_HEIGHT}px;height:{PREVIEW_MIN_WIDTH_OR_HEIGHT}px;overflow:hidden'>" +
                   "<a rel='lightbox' href='{IMAGE}'>" +
                        "<span style='display: inline-block; height: 100%; vertical-align: middle;'></span>" +
                        "<img src='{PREVIEW}' style='vertical-align: middle; max-height: {PREVIEW_HEIGHT}px; max-width: {PREVIEW_WIDTH}px'/>" +
                    "</a>" +
             "</div>" +
     "</div>",
jsplus_gallery_template_wrap: "<div class='jsplus_gallery' style='padding:5px; display: table'>{ITEMS}</div>"

Also these options can be usefull to hide the thumbails sizes panel (and specify non modifiable values for image processor):

jsplus_gallery_thumb_resize_show: Boolean
Default value: false
Available values: true, false
Defines visibility of image resize panel in the plugin's dialog. All image options described below applies regardless of this option's value (it affects for visibility only).

jsplus_gallery_default_thumb_enlarge: Boolean
Default value: true
Available values: true, false
By default even when source image has lower resolution than target thumbnail's one the resize (upper) will be applied. Set this option to false to override this behavior.

jsplus_gallery_default_thumb_resize_width: Integer
Default value: 0
Target width for thumbnail in pixels.

jsplus_gallery_default_thumb_resize_height: Integer
Default value: 150
Target heigth for thumbnail in pixels.

Full list of plugin configuration's values you can find on configuration manual page.

Mini square style previews example

If you have understood previos two example this will be obvios too.

TinyMCE

CKEditor

TinyMCE

CKEditor

config.jsplus_gallery_template =   
        "<div class='jsplus_gallery_item' style='white-space: nowrap; display: inline-block;'>" +
             "<div style='width:{PREVIEW_HEIGHT}px;height:{PREVIEW_HEIGHT}px;max-width:{PREVIEW_HEIGHT}px;overflow:hidden'>" +
                  "<a rel='lightbox' href='{IMAGE}'>" +
                        "<span style='display: inline-block; height: 100%; vertical-align: middle;'></span>" +
                        "<img src='{PREVIEW}' style='vertical-align: middle;margin:0;padding:0'/>" +
                   "</a>" +
              "</div>" +
        "</div>";
 config.jsplus_gallery_template_wrap = 
        "<div class='jsplus_gallery' style='display: table;line-height:0'>{ITEMS}</div>";jsplus_gallery_template:
        "<div class='jsplus_gallery_item' style='white-space: nowrap; display: inline-block;'>" +
             "<div style='width:{PREVIEW_HEIGHT}px;height:{PREVIEW_HEIGHT}px;max-width:{PREVIEW_HEIGHT}px;overflow:hidden'>" +
                  "<a rel='lightbox' href='{IMAGE}'>" +
                        "<span style='display: inline-block; height: 100%; vertical-align: middle;'></span>" +
                        "<img src='{PREVIEW}' style='vertical-align: middle'/>" +
                   "</a>" +
              "</div>" +
        "</div>",
 jsplus_gallery_template_wrap:
        "<div class='jsplus_gallery' style='display: table;line-height:0'>{ITEMS}</div>"

The same way you can change your own settings:

jsplus_gallery_default_thumb_resize_width: Integer
Default value: 0
Target width for thumbnail in pixels.

jsplus_gallery_default_thumb_resize_height: Integer
Default value: 150
Target heigth for thumbnail in pixels.