You should find creating your first gallery in Joomla! v.4 using Gallery Pro component really easy, but if you run into some issues here’s a detailed guide that takes you through the entire process of creating your first gallery.

Features

• different layouts
• support for image types .jpg, .jpeg, .png, .gif, .webp, .bmp
• support for video types .mp4, .avi, .mov
• image caption templates
• download option to save high-resolution image version
• use GD library
• more...

Click the component handle icon on the right in the column. Here select the Gallery ^Pro.

You will get an error in the preview. Gallery Folder Error! You can ignore this error and save (Apply) the component.

Now we will fix this error. By default the image directory for your original images is "JSITE_PATH/media/com_uithemebuilderpro/galleries". Load all your images and/or directories into this directory. You can also change the galleries folder later, but not the path.

By default, the thumbnail directory is "JSITE_PATH/images/galleries-thumbnails" and will be created automatically. You can also change this directory in the component settings, but not the path. Make sure that Gallery ^Pro has sufficient permissions to create the thumbnail folder.

Creating Thumbnails in the Gallery Component: Tips and Considerations

To create thumbnails in the gallery component, make sure to configure all necessary settings before accessing the live page. Depending on the size of the images, it's normal to temporarily see a blank white page.

To ensure proper thumbnail generation, ensure that both the Joomla cache system and the cache system of ui/Theme-Builder Pro are turned off. This will ensure that thumbnails are generated and displayed correctly.

Adding captions

The Gallery ^Pro component automatically sort images by name. But you can change this by placing a captions.txt file in each gallery directory. For each image, add a caption line with a vertical bar separating file name, short title and longer description.

unsere_erde_20111108_1575505557.jpg | Our earth | Our earth in ? Years...
filename.jpg | Your Title | Description ... with html tags ..

If multilingual support is enabled in the administration panel and a file captions-xx-XX.txt exists in a folder, where xx-XX is the placeholder for the ISO language code, e.g. en-GB for English (United Kingdom) or de-DE for Germany, the language-specific captions file is used, with fallback to the default captions.txt.

You can now play with the component settings, the preview will be updated automatically.

Microdata in Gallery Pro Component

In the latest Gallery Pro Component update, a fantastic new feature has been introduced - the integration of Microdata for images and videos. This enhancement allows you to provide structured data for your multimedia content, enabling search engines and other web services to better understand and present your content in search results. In this tutorial, we'll walk you through the process of using Microdata in Gallery Pro.

Enabling Microdata

To take advantage of this feature, you must first enable Microdata in the basic settings of the component. Simply navigate to the component's settings and make sure to toggle "Use Microdata?" to "On."

To take advantage of this feature, you must first enable Microdata in the basic settings of the component. Simply navigate to the component's settings and make sure to toggle "Use Microdata?" to "On."

Updating the Captions Files

This new feature extends to the captions files, specifically the "captions.txt" and the language-specific "captions-xx-XX.txt" files. In these files, you'll need to adjust the syntax to include the necessary Microdata for both images and videos.

For Images:

In the captions files, use the following format:

filename.jpg | Your Title | Description ... with HTML tags .. | Creator | License URL | Acquire License Page | Credit Text

• filename.jpg: Replace this with the name of your image file.
• Your Title: Enter the title of the image.
• Description: Provide a detailed description of the image, and feel free to use HTML tags for formatting.
• Creator: Specify the creator of the image.
• License URL: Include the URL where the image's license information can be found.
• Acquire License Page: This should be the URL where users can obtain the image's license.
• Credit Text: The name of the person and/or organization that is credited for the image when it's published.

For Videos:

For videos, the syntax in the captions files should be as follows:

video_file.mp4 | Your Title | Description ... with HTML tags .. | thumbnailUrl | uploadDate | duration

• video_file.mp4: Replace this with the name of your video file.
• Your Title: Provide a title for the video.
• Description: Include a detailed description of the video content, using HTML tags as needed.
• thumbnailUrl: Specify the URL for the video's thumbnail image.
• uploadDate: Enter the date, in ISO 8601 format when the video was uploaded.
• duration: State the duration in ISO 8601 format of the video. For example, PT00H20M5S represents a duration of "twenty minutes and five seconds".

With these adjustments in place, your Gallery Pro Component will automatically generate Microdata for your images and videos, improving the visibility and understanding of your multimedia content on the web. This structured data will benefit your SEO efforts and enhance the way your content is presented in search results.

Test Your Page

• Schema.org Validator: Visit schema.org and input your page's URL. This tool will validate your microdata and provide feedback on its correctness.
• Google's Rich Results Test: Go to rich-results and enter your page's URL. This tool will help you verify if your microdata is recognized by Google and is eligible for rich results in search.