How to setup? Print E-mail
(50 votes)



Saved thumbnail is stored in the same directory as your original image is - but in "thumbs" subfolder.


  1. Install and enable Core Design Scriptegrator plugin.


  1. Install the plugin.
  2. Open plugin configuration and set the default plugin options.
  3. Save the settings and also don't forget to publish the plugin.


How to enable the gallery?

  1. Open article where you wish to place your gallery.
  2. Put the images to your article with your favourite editor (for example JCE ). It doesn't matter on size or position.
  3. Wrap your images with the {webgallery}{/webgallery} marks:
    {webgallery} YOUR IMAGES THERE {/webgallery}


  4. Save the article. That's all!


What's about captions?

  1. Thumbnails caption:
    Fill the ALT attributes to your image. Source code example:
    <img src="my_image.png" alt="Short caption" />

    Note: Please make sure this "title" won't be longer then your thumbnail size.

  2. Image popup caption:
    Fill the TITLE attributes to your image. Source code example:
    <img src="my_image.png" title="Very long description" />

    Note: The empty ALT or TITLE attributes means no captions.


How to enable one image with popup effect without theme?

Well, just put your image to the article, wrap him with the {webgallery} marks and set the theme to "single":
Example: {webgallery theme="single"}MY_IMAGE{/webgallery}

Note: The "single" theme enables to display one image ONLY. The image is returned with the original code (align, style...) but is processed with choosed popup engine.


Plugin note

Please remember, the plugin was developed for GALLERIES, that means more then 1 lonesome image on your site :) The lot of single images load a little more code to page header which may cause a slower site loading or conflicts with styles.



Inline overrides

Use the overrides within the {webgallery...} mark.

  • integration
    = Integration for Web Gallery plugin.
    Value: See the plugin configuration to get all available integrations.
    Default: "cdwebgallery"
    Example: {webgallery integration="phocagallery"}
  • theme
    = Change the default theme for gallery.
    Value: See the plugin configuration to get all available themes.
    Default: "default"
    Example: {webgallery theme="tape"}
  • engine
    = Switch the image popup effect.
    Value: See plugin configuration to get all available engines.
    Default: "popup"
    Example: {webgallery engine="tooltip"}
  • watermark
    = Set if the watermark image is displayed on thumbnails.
    Value: no|yes
    Default: "yes"
    Example: {webgallery watermark="no"}
  • title
    = Set the title for gallery - displayed above the image set.
    Value: string
    Default: no value
    Example: {webgallery title="My cool nature gallery"}
  • pagination
    = Web Gallery pagination.
    Value: integer
    Default: "0"
    Example: {webgallery pagination="5"}
  • ordering
    = For "directory" integration.
    Value: ASC|DESC
    Default: "ASC"
    Example: {webgallery ordering="ASC"}
  • width
    = Custom thumbnail width. The "height" value is more important then "width".
    Value: integer
    Default: "100"
    Example: {webgallery width="100"}
  • height
    = Custom thumbnail height.
    Value: integer
    Default: "100"
    Example: {webgallery height="100"}
  • thumbnail_title
    = Display title on thumbnail.
    Value: yes|no
    Default: "yes"
    Example: {webgallery thumbnail_title="no"}
  • indent
    = Add left margin to Web Galery container - simulates center alignment.
    Value: CSS notation.
    Default: no value
    Example: {webgallery indent="10%"}
  • only_first
    = Shows first thumbnail only (the rest is displayed in selected popup window).
    Value: yes|no
    Default: no
    Example: {webgallery only_first="yes"}