Ignite Gallery

Overview

There is now an easier way to upload YouTube videos and thumbnails onto your Joomla site!  Please note, this will not work with Kaltura Videos

Recommended: Your video should be uploaded to the Rutgers YouTube Channel before proceeding.

 Also review more details about videos with SAS: https://sasit.rutgers.edu/how-to-guides/web-development-documentation/web-development/116-joomla-3-x/video/699-video-hosting-options-at-rutgers

Procedure

1. In the file upload menu of Ignite Gallery now there is a field to upload a YouTube/Vimeo URL instead of uploading a file directly.Once you have typed in your URL press the submit button.
   
2. After pressing the submit button, you can scroll down to the bottom of the page and see your video uploaded into Ignite Gallery.
   
3. You can click on the title of the new entry to make edits from here. You will see that Joomla automatically selects the thumbnail from the YouTube video. If you would like to change the thumbnail you can upload your own image. You can change how the image is cropped among other things.
   

Previous steps:

• Displaying Galleries with Menu Items
• Displaying Galleries within Articles

Next step:

• Managing Galleries from the Front End

Overview

There is now an easier way to upload YouTube videos and thumbnails onto your Joomla site!  Please note, this will not work with Kaltura Videos

Recommended: Your video should be uploaded to the Rutgers YouTube Channel before proceeding.

Also review more details about videos with SAS: Video Hosting Options at Rutgers

Procedure

1. In the file upload menu of Ignite Gallery now there is a field to upload a YouTube/Vimeo URL instead of uploading a file directly. Once you have typed in your URL click Submit.
   
2. After pressing the Submit button, you can scroll down to the bottom of the page and see your video uploaded into Ignite Gallery.
   
3. You can click on the "Edit" link in the "Description" column for the new entry to make edits from here. You will see that Joomla! automatically selects the thumbnail from the YouTube video. If you would like to change the thumbnail you can upload your own image. You can change how the image is cropped among other things.
   

Previous steps:

• Displaying Galleries with Menu Items
• Displaying Galleries within Articles

Next step:

• Managing Galleries from the Front End

Recommended: Your video should be uploaded to the Rutgers YouTube Channel before proceeding.

Also review more details about videos with SAS: https://sasit.rutgers.edu/how-to-guides/web-development-documentation/web-development/116-joomla-3-x/video/699-video-hosting-options-at-rutgers

1. Take a screen shot of the video to be added to the gallery, and crop it to display a still image from the video.  This will be used as the thumbnail for the video.
2. Upload the image into the gallery.
3. Click on Edit for the thumbnail image that you uploaded into the gallery:
   
   
4. Go to where the video is hosted, and copy the URL of the video:
   
   
5. Paste the URL for the video into the media code:
   
   
   
   
6. Click Save & Close.
7. You can now see the image as a thumbnail with the rest of the images: 
   
   
   
   
8. When you click on it, you will be taken to the lightbox, and you can play the video:
   
   
   
   
   

Previous steps:

• Displaying Galleries with Menu Items
• Displaying Galleries within Articles

Next step:

• Managing Galleries from the Front End

1. In the Joomla! back-end, go to: Components -> Ignite Gallery -> Categories
2. Click New Category:
   
   
   
   
3. Enter a name for the category in the Title field (see below).
4. Select the profile to be used with this category from the Profile dropdown menu (see below). Note that a different profile can be selected when you display the category within an article.  If no profiles exist, you can create a new profile.
5. If you would like to "nest" this category within an existing category, select the existing category from the Parent menu (see below).
6. Make sure Status is set to "Published" (see below).
   
   
   
   
7.  When done, click Save & Close to the upper left.

Previous step:

• Ignite Gallery Overview

Next step:

• Uploading Images

1. In the Joomla! back-end, go to: Components -> Ignite Gallery -> Categories
2. Click New Category:
   
   
   
   
3. Enter a name for the category in the Title field (see below).
4. Select the profile to be used with this category from the Profile dropdown menu (see below). Note that a different profile can be selected when you display the category within an article.  If no profiles exist, you can create a new profile.
5. If you would like to "nest" this category within an existing category, select the existing category from the Parent menu (see below).
6. Make sure Status is set to "Published" (see below).
   
   
   
   
7.  When done, click Save & Close to the upper left.

Previous step:

• Ignite Gallery Overview

Next step:

• Uploading Images

A profile determines how the images in an Ignite Gallery category are displayed.

The SAS Web Development Team can build these profiles for you if you are not able to; if needed, submit a work order.

Normally it is a good idea to create 2 basic profiles: a main gallery profile, and a thumbnails-only profile:

Main Gallery Profile

This gallery will show a 'main image' with thumbnail images below it.

• In the Joomla! back-end, go to: Components -> Ignite -> Profiles
• Click New Profile

Tab: General

• Title: "Main Gallery"
• Image Swap Method: No Hash in URL

Tab: Main Image

• Show Large Image: Yes
• Max Image Width: 800
• Maximum Image height: 550
• Crop to same size: No (recommended)
• Desktop Transition: Fade
• Show Left Right Arrows: Yes (if desired)
• Slideshow Autostart: Yes (if the images should change automatically)
• Slideshow Period - Milliseconds: 5000

Tab: Main Thumbnails

• Show Thumbnails: Yes
• Maximum Image Width: 120 (recommended)
• Maximum Image Height: 90 (recommended)
• Crop to Same Size: No (recommended for Justified Grid type)
• Show Info Over Thumbs: None
• Hover Effect: Fade To Gray
• Thumbnail Layout: Responsive Grid
• Responsive Grid Type: Justified Grid

Tab: Main Other

• Download Image: None (unless they should be downloadable)
• Show Facebook Like Button: No
• Show Twitter Button: No
• Show Pinterest Button: No
• Image Descriptions:
• Show Descriptions: Yes
• Position: set to Bottom or On Top of Image, depending on your preference
• Show Tags: No

When done, click Save & Close to the upper left.

Thumbs Only Profile

This gallery will only show thumbnail images.

• In the Joomla! back-end, go to: Components -> Ignite -> Profiles
• Click New Profile

Tab: General

• Title: "Thumbs Only Profile"
• Image Swap Method: No Hash in URL

Tab: Main Image

• Show Large Image: No

Tab: Main Thumbnails

• Show Thumbnails: Yes
• Maximum Image Width: 300 (recommended)
• Maximum Image Height: 200 (recommended)
• Crop to Same Size: Yes
• Show Info Over Thumbs: Image Alt Text (recommended)
• Hover Effect: Fade To Gray
• Thumbnail Layout: Responsive Grid
• Responsive Grid Type: Justified Grid

Tab: Main Other

• Download Image: None (unless they should be downloadable)
• Show Facebook Like Button: No
• Show Twitter Button: No
• Show Pinterest Button: No
• Image Descriptions:
• Show Descriptions: Yes
• Position: Bottom
• Container Height - 0 Equals Autofit: 100
• Show Tags: No

Tab: Lightbox Thumbnails

• Show Thumbnails: No

When done, click Save & Close to the upper left.

Previous step:

• Ignite Gallery Overview

Next step:

• Uploading Images

A profile determines how the images in an Ignite Gallery category are displayed.

The SAS Web Development Team can build these profiles for you if you are not able to; if needed, submit a REQUEST.

Normally it is a good idea to create 2 basic profiles: a main gallery profile, and a thumbnails-only profile:

Main Gallery Profile

This gallery will show a 'main image' with thumbnail images below it.

• In the Joomla! back-end, go to: Components -> Ignite -> Profiles
• Click New Profile

Tab: General

• Title: "Main Gallery"
• Image Swap Method: No Hash in URL

Tab: Main Image

• Show Large Image: Yes
• Max Image Width: 800
• Maximum Image height: 550
• Crop to same size: No (recommended)
• Desktop Transition: Fade
• Show Left Right Arrows: Yes (if desired)
• Slideshow Autostart: Yes (if the images should change automatically)
• Slideshow Period - Milliseconds: 5000

Tab: Main Thumbnails

• Show Thumbnails: Yes
• Maximum Image Width: 120 (recommended)
• Maximum Image Height: 90 (recommended)
• Crop to Same Size: No (recommended for Justified Grid type)
• Show Info Over Thumbs: None
• Hover Effect: Fade To Gray
• Thumbnail Layout: Responsive Grid
• Responsive Grid Type: Justified Grid

Tab: Main Other

• Download Image: None (unless they should be downloadable)
• Show Facebook Like Button: No
• Show Twitter Button: No
• Show Pinterest Button: No
• Image Descriptions:
• Show Descriptions: Yes
• Position: set to Bottom or On Top of Image, depending on your preference
• Show Tags: No

When done, click Save & Close to the upper left.

Thumbs Only Profile

This gallery will only show thumbnail images.

• In the Joomla! back-end, go to: Components -> Ignite -> Profiles
• Click New Profile

Tab: General

• Title: "Thumbs Only Profile"
• Image Swap Method: No Hash in URL

Tab: Main Image

• Show Large Image: No

Tab: Main Thumbnails

• Show Thumbnails: Yes
• Maximum Image Width: 300 (recommended)
• Maximum Image Height: 200 (recommended)
• Crop to Same Size: Yes
• Show Info Over Thumbs: Image Alt Text (recommended)
• Hover Effect: Fade To Gray
• Thumbnail Layout: Responsive Grid
• Responsive Grid Type: Justified Grid

Tab: Main Other

• Download Image: None (unless they should be downloadable)
• Show Facebook Like Button: No
• Show Twitter Button: No
• Show Pinterest Button: No
• Image Descriptions:
• Show Descriptions: Yes
• Position: Bottom
• Container Height - 0 Equals Autofit: 100
• Show Tags: No

Tab: Lightbox Thumbnails

• Show Thumbnails: No

When done, click Save & Close to the upper left.

Previous step:

• Ignite Gallery Overview

Next step:

• Uploading Images

A profile determines how the images in an Ignite Gallery category are displayed.

The SAS Web Development Team can build these profiles for you if you are not able to; if needed, submit a REQUEST.

Normally it is a good idea to create 2 basic profiles: a main gallery profile, and a thumbnails-only profile:

Main Gallery Profile

This gallery will show a 'main image' with thumbnail images below it.

• In the Joomla! back-end, go to: Components -> Ignite -> Profiles
• Click New Profile

Tab: General

• Title: "Main Gallery"

Tab: Main Image

• Show Large Image: Yes
• Max Image Width: 800
• Maximum Image height: 550
• Crop to same size: No (recommended)
• Desktop Transition: Fade
• Show Left Right Arrows: Yes (if desired)
• Slideshow Autostart: Yes (if the images should change automatically)
• Slideshow Period - Milliseconds: 5000

Tab: Main Thumbnails

• Show Thumbnails: Yes
• Maximum Image Width: 120 (recommended)
• Maximum Image Height: 90 (recommended)
• Crop to Same Size: No (recommended for Justified Grid type)
• Show Info Over Thumbs: None
• Hover Effect: Fade To Gray
• Thumbnail Layout: Responsive Grid
• Responsive Grid Type: Justified Grid

Tab: Main Other

• Download Image: None (unless they should be downloadable)
• Show Facebook Like Button: No
• Show Twitter Button: No
• Show Pinterest Button: No
• Image Descriptions:
• Show Descriptions: Yes
• Position: set to Bottom or On Top of Image, depending on your preference
• Show Tags: No

When done, click Save & Close to the upper left.

Thumbs Only Profile

This gallery will only show thumbnail images.

• In the Joomla! back-end, go to: Components -> Ignite -> Profiles
• Click New Profile

Tab: General

• Title: "Thumbs Only Profile"

Tab: Main Image

• Show Large Image: No

Tab: Main Thumbnails

• Show Thumbnails: Yes
• Maximum Image Width: 300 (recommended)
• Maximum Image Height: 200 (recommended)
• Crop to Same Size: Yes
• Show Info Over Thumbs: Image Alt Text (recommended)
• Hover Effect: Fade To Gray
• Thumbnail Layout: Responsive Grid
• Responsive Grid Type: Justified Grid

Tab: Main Other

• Download Image: None (unless they should be downloadable)
• Show Facebook Like Button: No
• Show Twitter Button: No
• Show Pinterest Button: No
• Image Descriptions:
• Show Descriptions: Yes
• Position: Bottom
• Container Height - 0 Equals Autofit: 100
• Show Tags: No

Tab: Lightbox Thumbnails

• Show Thumbnails: No

When done, click Save & Close to the upper left.

Previous step:

• Ignite Gallery Overview

Next step:

• Uploading Images

1.  In the Joomla! back-end, select the Menus menu, then click on the menu where the Ignite Gallery item should be added.
2. Click the New button to the upper left.
3. Enter a title for the menu item in the "Menu Title" field.
4. Click the Selectbutton to the right of "Menu Item Type":
   
   
   
   
5. In the "Menu Item Type" popup window, select Ignite Gallery (see #1 below), then select Display Category under Ignite Gallery (see #2 below):
   
   
   
   
6. In the dropdown menu to the right of "Select Category", select the category containing the images to be displayed in the gallery:
   
   
   
   
7. If the menu item should appear in a dropdown menu under an existing menu item, select the existing menu item from the "Parent Item" menu on the right.
8. Click Save & Close to the upper left.
9. The gallery will be displayed using the profile set in the Ignite Gallery category options.

Sample Display:

Previous step:

• Editing Image Details

Next steps:

• Adding Videos to Ignite Gallery - Youtube/Vimeo
• Adding Videos to Ignite Gallery (Kaltura)

1.  In the Joomla! back-end, select the Menus menu, then click on the menu where the Ignite Gallery item should be added.
2. Click the New button to the upper left.
3. Enter a title for the menu item in the "Menu Title" field.
4. Click the Selectbutton to the right of "Menu Item Type":
   
   
   
   
5. In the "Menu Item Type" popup window, select Ignite Gallery (see #1 below), then select Display Category under Ignite Gallery (see #2 below):
   
   
   
   
6. In the dropdown menu to the right of "Select Category", select the category containing the images to be displayed in the gallery:
   
   
   
   
7. If the menu item should appear in a dropdown menu under an existing menu item, select the existing menu item from the "Parent Item" menu on the right.
8. Click Save & Close to the upper left.
9. The gallery will be displayed using the profile set in the Ignite Gallery category options.

Sample Display:

Previous step:

• Editing Image Details

Next steps:

• Adding Videos to Ignite Gallery - Youtube/Vimeo
• Adding Videos to Ignite Gallery (Kaltura)

• Start by editing an article.
• Click within the article to place the cursor where the gallery should appear.
• Click the Gallery button under the text area to add a gallery:
  
  
• In the popup window, select the "Category" containing the images to be displayed within the gallery.
• Select the "Profile" to specify how the gallery will appear.
• Click Save.
  
  

• Your article will contain code that looks like the example below.
  • Code Layout: Id=3128 (this is just a unique number)
  • cid=1 (this is the Category ID)
  • pid=1 (this is the Profile ID)
    
    
• Save the article.

Sample result of embedding gallery in an article:

Previous step:

• Editing Image Details

Next steps:

• Adding Videos to Ignite Gallery - Youtube/Vimeo
• Adding Videos to Ignite Gallery (Kaltura)

• Start by editing an article.
• Click within the article to place the cursor where the gallery should appear.
• Click the Gallery button under the text area to add a gallery:
  
  
• In the popup window, select the "Category" containing the images to be displayed within the gallery.
• Select the "Profile" to specify how the gallery will appear.
• Click Save.
  
  

• Your article will contain code that looks like the example below.
  • Code Layout: Id=3128 (this is just a unique number)
  • cid=1 (this is the Category ID)
  • pid=1 (this is the Profile ID)
    
    
• Save the article.

Sample result of embedding gallery in an article:

Previous step:

• Editing Image Details

Next steps:

• Adding Videos to Ignite Gallery - Youtube/Vimeo
• Adding Videos to Ignite Gallery (Kaltura)

1. If you are not already at the image listing for an Ignite Gallery category, you can go there as follows:
   
   • From the back end Joomla! administrator interface, go to Components -> Ignite Gallery -> Categories.
   • Click Manage Images in the row for the category containing the images you'd like to edit.
2. Click Edit in the Description or Tag column corresponding to the row for the image to be edited:
   
   
   
   
3. In the Edit Image Details page, you can set the following:
   • Description (optional)
   • Tags (optional)
   • Image Alt Text (required for accessibility; a short description of the image that can be the same as the "Description")
   • Image Link (optional; allows you to link the image to another page or website)
     
     
     
     
4. If you want to replace an image with another one, click Browse to the right of "Change Image":
   
   
   
   Then browse to the image on your computer and click Open.
   
   
5. After editing all the details for an image, click Save And Next at the top to edit the details for the next image, or Save & Close when done.

 Previous step:

• Uploading Images

Next steps:

• Displaying Galleries with Menu Items
• Displaying Galleries within Articles

1. If you are not already at the image listing for an Ignite Gallery category, you can go there as follows:
   
   • From the back end Joomla! administrator interface, go to Components -> Ignite Gallery -> Categories.
   • Click Manage Images in the row for the category containing the images you'd like to edit.
2. Click Edit in the Description or Tag column corresponding to the row for the image to be edited:
   
   
   
   
3. In the Edit Image Details page, you can set the following:
   • Description (optional)
   • Tags (optional)
   • Image Alt Text (required for accessibility; a short description of the image that can be the same as the "Description")
   • Image Link (optional; allows you to link the image to another page or website)
     
     
     
     
4. If you want to replace an image with another one, click Browse to the right of "Change Image":
   
   
   
   Then browse to the image on your computer and click Open.
   
   
5. After editing all the details for an image, click Save And Next at the top to edit the details for the next image, or Save & Close when done.

 Previous step:

• Uploading Images

Next steps:

• Displaying Galleries with Menu Items
• Displaying Galleries within Articles

Ignite Gallery is an image gallery extension that has the following features:

• Display responsive gallery with thumbnails only
  
  {igallery id=9966|cid=4|pid=2|type=category|children=0|addlinks=0|tags=|limit=0}
  
  
• Display gallery as a ‘slideshow’ with a main image (with or without thumbnails)
  
  {igallery id=3976|cid=4|pid=3|type=category|children=0|addlinks=0|tags=|limit=0}
  
  
• You can edit images from the gallery on the front-end (you do not need to login to administrator to manage galleries)
• Galleries can be created within nested categories for easy display

If Ignite Gallery is not installed on your website, please create a work order to request that we install it for you.

Next step:

• Creating Categories in Ignite Gallery
• Creating Profiles in Ignite Gallery (advanced)

Ignite Gallery is an image gallery extension that has the following features:

• Display responsive gallery with thumbnails only
  
  {igallery id=9966|cid=4|pid=2|type=category|children=0|addlinks=0|tags=|limit=0}
  
  
• Display gallery as a ‘slideshow’ with a main image (with or without thumbnails)
  
  {igallery id=3976|cid=4|pid=3|type=category|children=0|addlinks=0|tags=|limit=0}
  
  
• You can edit images from the gallery on the front-end (you do not need to login to administrator to manage galleries)
• Galleries can be created within nested categories for easy display

If Ignite Gallery is not installed on your website, please create a REQUEST to request that we install it for you.

Next step:

• Creating Categories in Ignite Gallery
• Creating Profiles in Ignite Gallery (advanced)

By default this option is not available for regular Ignite Gallery installations. If this is something you will need for your department, please create a REQUEST asking us to configure "Managing Ignite Gallery from the Front End," and letting us know who should have this access (e.g. Administrators, Editors, etc.).

1. Login on the front end of your website by clicking the Login link in the footer menu:
   
   
   
   
2. Under User Menu on the right, click on Manage Gallery:
   
   
   
3. From here you can click Manage Images for an Ignite Gallery category to upload images and edit image properties:
   
   

By default this option is not available for regular Ignite Gallery installations. If this is something you will need for your department, please create a REQUEST asking us to configure "Managing Ignite Gallery from the Front End," and letting us know who should have this access (e.g. Administrators, Editors, etc.).

1. Login on the front end of your website by clicking the "Login" link in the footer menu:
   
2. Under User Menu on the left, click on Manage Gallery:
   
   
3. From here you can click Manage Images for an Ignite Gallery category to upload images and edit image properties: