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):
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).
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.
That's easy, just modify a markup:
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
: BooleanDefault 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
: BooleanDefault 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
: IntegerDefault value:
0
Target width for thumbnail in pixels.
jsplus_gallery_default_thumb_resize_height
: IntegerDefault 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.
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_thumb_resize_show
: BooleanDefault 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
: BooleanDefault 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
: IntegerDefault value:
0
Target width for thumbnail in pixels.
jsplus_gallery_default_thumb_resize_height
: IntegerDefault value:
150
Target heigth for thumbnail in pixels.