Ignite Gallery

Ignite Gallery

  • Adding Videos to Ignite Gallery - Youtube/Vimeo

    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.
      ignite video upload2
    2. After pressing the submit button, you can scroll down to the bottom of the page and see your video uploaded into Ignite Gallery.
      Ignite Gallery: video upload
    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.
      Editing video properties in Ignite Gallery

    Previous steps:

    Next step:

  • Adding Videos to Ignite Gallery - Youtube/Vimeo (Joomla! 4)

    • How to video:

    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.
      ig video
    2. After pressing the submit button, you can scroll down to the bottom of the page and see your video uploaded into Ignite Gallery.
      ig video1
    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.
      ig video2

    Previous steps:

    Next step:

    • Video Included: Video Included
  • Adding Videos to Ignite Gallery (Kaltura)

    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:

      Ignite Gallery: 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:

      Ignite Gallery: Copy the URL of the video
    5. Paste the URL for the video into the media code:

      Ignite Gallery: Paste URL of 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: 

      Ignite Gallery: Video image appears in gallery as thumbnail

    8. When you click on it, you will be taken to the lightbox, and you can play the video:

      Ignite Gallery: Video plays in lightbox


    Previous steps:

    Next step:

  • Adding Videos to Ignite Gallery (Kaltura) (Joomla! 4)

    • How to video:

    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:

      ig kaltura 0
    4. Go to where the video is hosted, and copy the URL of the video:

      Ignite Gallery: Copy the URL of the video
    5. Paste the URL for the video into the media code:

      ig kaltura

    6. Click Save & Close.
    7. You can now see the image as a thumbnail with the rest of the images: 

      Ignite Gallery: Video image appears in gallery as thumbnail

    8. When you click on it, you will be taken to the lightbox, and you can play the video:

      Ignite Gallery: Video plays in lightbox


    Previous steps:

    Next step:

    • Video Included: Video Included
  • Creating Categories in Ignite Gallery

    1. In the Joomla! back-end, go to: Components -> Ignite Gallery -> Categories
    2. Click New Category:

      Ignite Gallery: Create 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).

      Options for new Ignite Gallery Category

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

    Previous step:

    Next step:

  • Creating Categories in Ignite Gallery (Joomla! 4)

    • How to video:

    1. In the Joomla! back-end, go to: Components -> Ignite Gallery -> Categories
    2. Click New Category:

      ig 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).

      ig category 2

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

    Previous step:

    Next step:

    • Video Included: Video Included
  • Creating Profiles in Ignite Gallery

    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:

    Next step:

  • Creating Profiles in Ignite Gallery (Joomla! 4)

    • How to video:

    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:

    Next step:

    • Video Included: Video Included
  • Displaying Galleries with Menu Items

    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":

      New Menu item: Select 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):

      Ignite Gallery: Menu item type

    6. In the dropdown menu to the right of "Select Category", select the category containing the images to be displayed in the gallery:

      Ignite Gallery menu item: Select category

    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:

    Sample Display

    Previous step:

    Next steps:

  • Displaying Galleries with Menu Items (Joomla! 4)

    • How to video:

    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":

      ig menu item

    5. In the "Menu Item Type" popup window, select Ignite Gallery (see #1 below), then select Display Category under Ignite Gallery (see #2 below):

      ig menu item 1

    6. In the dropdown menu to the right of "Select Category", select the category containing the images to be displayed in the gallery:

      ig menu item 2

    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:

    Sample Display

    Previous step:

    Next steps:

    • Video Included: Video Included
  • Displaying Galleries within Articles

    • 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:

      Ignite Gallery: Click on Gallery Button underneath the editor to add the 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.

      Ignite Gallery: Select Category to view, then select the Profile to use (scroll to see profile option)
    • 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)

        Ignite Gallery: Sample Gallery Code inserted within article
    • Save the article.

     

    Sample result of embedding gallery in an article:

    Ignite Gallery: Sample result of embedding gallery in an article

    Previous step:

    Next steps:

  • Displaying Galleries within Articles (Joomla! 4)

    • How to video:

    • 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:

      ig article
    • 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.

      ig article 1
    • 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)

        ig article 2
    • Save the article.

     

    Sample result of embedding gallery in an article:

    Ignite Gallery: Sample result of embedding gallery in an article

    Previous step:

    Next steps:

    • Video Included: Video Included
  • Editing Image Details

    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:

      Click "Edit" under Description or Tag

    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)

        Enter Description, Tags, Image Alt Text, and Image Link for Ignite Gallery images

    4. If you want to replace an image with another one, click Browse to the right of "Change Image":

      To change the image, click on the 'Change Image' button.

      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:

    Next steps:

  • Editing Image Details (Joomla! 4)

    • How to video:

    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:

      ig edit

    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)

        ig edit1

    4. If you want to replace an image with another one, click Browse to the right of "Change Image":

      ig edit2

      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:

    Next steps:

    • Video Included: Video Included
  • Ignite Gallery Overview

    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:

  • Ignite Gallery Overview (Joomla! 4)

    • How to video:

    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:

    • Video Included: Video Included
  • Image Galleries (Ignite Gallery)

  • Image Galleries (Ignite Gallery)

  • Managing Galleries from the Front End

    • How to video:

    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:

      Login link: Footer menu

    2. Under User Menu on the right, click on Manage Gallery:

      User Menu: "Manage Gallery" menu item
    3. From here you can click Manage Images for an Ignite Gallery category to upload images and edit image properties:

      Ignite Gallery: Front End Image Management



    • Video Included: Video Included
  • Overview: Where does Joomla store files?

    Overview

    In Joomla!, files such as PDFs and images (jpg, png, etc) are all stored in the "images" directory.  The exception is for files uploaded using a third-party document management extension such as DOCman.  These extensions have their own folder structure within the Joomla! website.

    There are multiple ways to upload these files; follow the appropriate links below.

    Uploading files to the "images" folder

    The Media Manager in Joomla! and JCE Editor Pro both allow you to upload files to the "images" folder.

    Media - for image files (gif, jpg, png, etc).

    JCE Editor File Browser - for PDF files

    Uploading files with third-party extensions

    DOCman, Ignite Gallery, and JEvents are all examples of third-party extensions that allow you to upload files to Joomla!.  The files are stored by the respective components within their own file structures, not the "images" folder.

    DOCman

    Ignite Gallery

    JEvents

Page 1 of 2