Woomark Image Gallery

Installation

Downloading the Extension

Email : After purchasing the extension from our store, you will receive an email with the link to download the extension.

Store : You can also download the extension from the Downloads section of our store. If you are new to our store, then you have to first create an account using the same email address which you have used while purchasing the extension.

Click to download the extension package - WoomarkImageGallery_UNZIP.zip

Unzip the Package

• UNZIP the package WoomarkImageGallery_UNZIP.zip using any file unzipper or winrar.
• Upon unzipping the package you will find the following.
  • pkg_woomark_gallery_X.x.zip : The file is supported by both Joomla 4.x and 5.x
    
  • ReadMe.txt - The file has information about the current version of the extension.

Install the Extension

• Now to install the file  login to the backend of your Joomla website.
  • For J4 & J5 -  Go to System > Install > Extensions . Drag and drop or browse for file to install.
• The success message will appear after installation is completed.

You can now use the module or plugin as per your requirements. Module can be published directly to a module position whereas for a plugin you have to insert the shortcode into an article.

Module Settings

After successfully installing the module, follow these steps to configure it:

For Joomla 4 & Joomla 5:

1. Accessing the Module:

   • Navigate to Content > Site Modules in your Joomla dashboard.
   • Search for "Woomark Image Gallery" and click on it to open the module settings.

2. Module Positioning and Menu Assignment:

   • Assign the module to your preferred position on the website.
   • Select the menu item(s) where the module should appear.

Module Settings Tab:

Configure the module according to your requirements:

• Fetch Image: Choose to fetch images from a specific folder or select individual images with their paths.
• Sort Images: Sort the gallery images either sequentially (by name) or randomly.
• Thumb Width: Set the width of the thumbnail images in pixels (e.g., 150 for 150px). The height is automatically adjusted to maintain aspect ratio.
• Large Image Width: Specify the width for large images in pixels (e.g., 800 for 800px). Height is adjusted proportionally.
• Enable WebP: Toggle this to true to convert images into WebP format. If you encounter issues, set it to false.
• Caption: Set captions for images. Note: Captions do not apply when images are fetched from a folder.
  • For Large Images Only
  • For Thumbnail Images Only
  • For Both Large and Thumbnail Images
  • None (No captions)
• Link: Assign a URL to each image. Thumbnails will link to this URL instead of opening a large image popup.
• Open In: Choose whether the link opens in a new window or the same window.
• Grid Spacing: Define the spacing between the tiles as a number (e.g., 2).

Slide Settings:

These settings are available when "Fetch Image" is set to "Individual Path":

• Select an Image: Choose an image from the media gallery.
• Caption: Enter a caption for the image.
• URL: Provide a URL to be opened when the thumbnail is clicked. Leave blank for no link.

To add more slides, click the + button and repeat the process as needed.

Styling Settings

After setting the Module, you can now stylize it. Here are the options which you can find in the styling tab.

• Background Color: Select the background color of the large image popup.
• Opening Speed: Set the opening speed of the popup. Example : 500 which means 500 ms (milliseconds.
• Closing Speed : Set the closing speed of the popup. Example: 300 which means 300 ms
• Shadow Color: Select the shadow color of the popup image.
• Shadow Width : Set the shadow width. Don't mention px.
• Show Close Button: Option to enable/disbale the close button of the popup.
• FancyBox Border Width : Mention the border width in px. Example: 5 which means 5px.
• Opening And Closing Effect: Option to set the opening and closing effect to Elastic, Fade or none.

Plugin Setttings

If you are using the plugin, the go to the plugin manager and publish the Content - Woomark Image Gallery.

• Thumb Image Width: Set the thumb image width for the image gallery.
• Large Image Width: Set the large image width for the image gallery.
• Enable WebP: Set it to true if you want to convert the images to WebP format.
• Large Image Caption : Option to enable the caption for large image. It works when the Fetch image is set to individual.
• Offset : Enter the distance between grid items in pixels.

Shortcode

If you are using this plugin and you want to grab images from a folder. Then write the following pattern inside your article

Pattern:  

{wookmark folder="YOUR_FOLDER_PATH"}

{wookmark folder="/images/YOUR_FOLDER_NAME/"}

2) If you want to grab individual images along with their title. Then use the following pattern.

Pattern:  

{wookmark image1="YOUR_IMAGE_PATH_1" title1="YOUR_TITLE_1" image2="YOUR_IMAGE_PATH_2" title1="YOUR_TITLE_2"}

Example

{wookmark image1="images/woo/1.jpg" title1="The Beautiful Imma" image2="images/woo/2.jpg" title1="Love for Nature"}