Skip to main content

Image Group

The Image Group Widget in Astroid Framework allows users to display a collection of images as a group. This is useful for galleries, product thumbnails, image-based navigation, or showcasing image sets.

📌 Key Features​

  • Display multiple images in a grid or inline layout
  • Each image can have its own title, link, and caption
  • Support for image lightbox or external links
  • Easy drag & drop interface to manage image items

🛠️ How to Use​

1. Add the Widget​

  • Go to your Astroid Layout or Section Builder
  • Click Add Widget → Choose Image Group

add-element.jpeg

select-media.jpg

2. Configure the Widget​

General Settings​

  • Title: Optional title to display above the image group
  • Image Style: Choose how images are displayed (Grid, Inline, List)
  • Column Layout (if using Grid): Select the number of columns (e.g., 2, 3, 4)
  • Spacing / Gutter: Set space between images

🖼️ Add Images to the Group​

1. Click Add Item​

Each image entry will contain:

  • Image: Upload or select an image from the media library
  • Title: (Optional) A short heading for the image
  • Caption: (Optional) Description or supporting text
  • Link URL: (Optional) Link the image to another page or external URL
  • Open in New Tab: Enable this if the link should open in a new tab
  • Lightbox: Enable this to open the image in a popup view

You can add as many images as needed and reorder them via drag-and-drop.

image-carousel-items.jpg

🎨 Styling Options​

Under the Style tab, you can:

  • Adjust border radius, box shadow, and image hover effects
  • Change alignment (left, center, right)
  • Customize typography for titles and captions
  • Control spacing with margin and padding

📱 Responsive Controls​

Use the responsive settings to:

  • Change the number of columns on mobile/tablet/desktop
  • Adjust image size or spacing per device

🔁 Use Cases​

  • Product image group
  • Team member thumbnails
  • Portfolio gallery
  • Blog post featured images
  • Brand logo group

✅ Tips​

  • Use optimized images for faster loading
  • Keep image sizes consistent for a clean layout
  • Use Lightbox to avoid redirecting users away from your page

🧩 Compatibility​

  • Fully works with Joomla core and third-party extensions
  • Can be nested inside sections, columns, tabs, or accordions

📌 Conclusion​

The Image Group Widget is a flexible and easy-to-use tool to showcase multiple images in one widget. It enhances the visual appeal of your site and improves content engagement.