images

images

  • Adding a Caption to an Image

    • How to video:

    ImageTo create a caption

    1. Select and image or media placeholder in the editor
    2. The Insert / Edit Caption button will become enabled. Click the button to open the Captions dialog.
    3. Some fields will be filled with some of the image properties
      1. The Text field in the Text tab will be filled with the image alt or title attribute value
      2. The Alignment in the Container tab will be selected based on the image's alignment.
      3. The Margin fields in the Container tab will be filled with the image's margin styles, if any.
    4. Set the Text and Container options as required. A preview of the caption will be displayed in the Preview section of the dialog.
    5. Click the Insert button to create the caption.

    The caption text can be edited as normal in the editor. For example in the animation below, after the caption has been created, the caption text is selected and an italic format is applied.

    puppy pictures header

    To edit a caption

    1. Click on the image that has the caption in the editor.
    2. The Insert / Edit Caption button will become enabled. Click the button to open the Captions dialog.
    3. Edit the caption properties as required.
    4. Click on the Update button to update the caption and close the dialog.

    To delete a caption

    1. Click on the image that has the caption in the editor.
    2. The Delete Caption button will become enabled. Click the button to delete the caption.
    • Video Included: Video Included
  • Adding a Caption to an Image (Joomla 4)

    • How to video:

    ImageTo create a caption

    1. Select an image or media placeholder in the editor
    2. The Insert / Edit Caption button will become enabled. Click the button to open the Captions dialog.
    3. Some fields will be filled with some of the image properties
      1. The Text field in the Text tab will be filled with the image alt or title attribute value
      2. The Alignment in the Container tab will be selected based on the image's alignment.
      3. The Margin fields in the Container tab will be filled with the image's margin styles, if any.
    4. Set the Text and Container options as required. A preview of the caption will be displayed in the Preview section of the dialog.
    5. Click the Insert button to create the caption.

    The caption text can be edited as normal in the editor. For example in the animation below, after the caption has been created, the caption text is selected and an italic format is applied.

    Screen Shot 2023 02 28 at 3.13.05 PM

     To edit a caption

    1. Click on the image that has the caption in the editor.
    2. The Insert / Edit Caption button will become enabled. Click the button to open the Captions dialog.
    3. Edit the caption properties as required.
    4. Click on the Update button to update the caption and close the dialog.

    To delete a caption

    1. Click on the image that has the caption in the editor.
    2. The Delete Caption button will become enabled. Click the button to delete the caption.
    • Video Included: Video Included
  • Adding an image to an article (Joomla 4)

    • How to video:

    1. Log into the Administrator interface using your NetID credentials.
    2. Find the article you want to edit and click on its title.
    3. Choose where you would like your image placed, then click the Insert/Edit Image button Insert/Edit Image button from the WYSIWYG editor:

      Screen Shot 2023 02 28 at 3.23.20 PM
    4. Navigate to the folder where the image is located (or, for a new image, where it should be saved) using the "Folders" pane to the lower left.  If you are adding a new image, click the Upload button to the right:

      Image Manager: Select folder, Upload new image
    5. If you clicked Upload, choose the Browse button at the bottom of the "Upload" window and navigate to the location of the image on your computer (see #1 below).  Alternately, you can drag and drop images to the 'Drop files here' area (see #2 below):

      Upload image

    6. You may upload multiple images by holding the [Shift] key as you select the images.  Click Upload (see #3 above) when you have finished selecting images.
    7. Back at the Image Manager window, select the image to be added to the article:

      Image Manager: Select image
    8. Set the image properties (dimensions, border, margins, etc) as needed:

      Image Manager: Image properties
    9. Alternate Text:  Be sure to add some descriptive text to the Alternate Text (alt text) field.  It is an important feature for accessibility. This is used to enable screen readers to portray the image as text.
    10. Image Caption:  To add an image caption, click the "Advanced" tab, add the caption text to the "Title" field, and add the word "caption" to the classes field:

      Adding image caption
    11. Click Insertwhen all properties have been set.
    12. Save & Close the article.

     

    • Video Included: Video Included
  • Adding an image to an article [Joomla 3.x]

    1. Log into the Administrator interface using your NetID credentials.
    2. Find the article you want to edit and click on its title.
    3. Choose where you would like your image placed, then click the Insert/Edit Image button Insert/Edit Image button from the WYSIWYG editor:

      Screen Shot 2023 02 28 at 3.23.20 PM
    4. Navigate to the folder where the image is located (or, for a new image, where it should be saved) using the "Folders" pane to the lower left.  If you are adding a new image, click the Upload button to the right:

      Image Manager: Select folder, Upload new image
    5. If you clicked Upload, choose the Browse button at the bottom of the "Upload" window and navigate to the location of the image on your computer (see #1 below).  Alternately, you can drag and drop images to the 'Drop files here' area (see #2 below):

      Upload image

    6. You may upload multiple images by holding the [Shift] key as you select the images.  Click Upload (see #3 above) when you have finished selecting images.
    7. Back at the Image Manager window, select the image to be added to the article:

      Image Manager: Select image
    8. Set the image properties (dimensions, border, margins, etc) as needed:

      Image Manager: Image properties
    9. Alternate Text:  Be sure to add some descriptive text to the Alternate Text (alt text) field.  It is an important feature for accessibility. This is used to enable screen readers to portray the image as text.
    10. Image Caption:  To add an image caption, click the "Advanced" tab, add the caption text to the "Title" field, and add the word "caption" to the classes field:

      Adding image caption
    11. Click Insertwhen all properties have been set.
    12. Save & Close the article.

     

  • Adding an Image to Media

    This procedure describes how to add images to Media on Joomla! 3.x web sites.


    1. Login to your web site using the Administrator Interface.
    2. In the Joomla! Administrator Control Panel, click on Media to the left (found under CONTENT; see #1 below).  If you are not at the Control Panel, you can select Media from the Content menu (see #2 below):
      Links to "Media" in Joomla! Administrator
    3. Click on the folder where you want to add the image.  You can either select from the small folder icons on the left (see #1 below), or the larger folder icons to the right (see #2 below):Media Folder Selection
    4. Once you have selected the folder where you want to upload the image, click the Upload button to the upper left: Media Manager: Upload button
    5. Click the Choose Files button below the Thumbnail View and Detail View buttons:       Choose Files button
    6. Use the File Upload window to browse to your image file.  When you find the image, click once on the image, then click Open:Media: File upload dialog box 
    7. Click the Start Upload button to the right of the Browse button to upload your image: Media Manager: "Start Upload" button
    8. If the upload was successful, you will see the message Upload Complete above the gallery of images, and your image should now appear in the gallery:Media: "Upload Complete" message
    9. You can now insert your image into an article.
  • Adding an Image to Media (Joomla 4)

    • How to video:

    This procedure describes how to add images to Media on Joomla! 3.x web sites.


    1. Login to your web site using the Administrator Interface.
    2. In the Joomla! Administrator , click on Media to the left (found under CONTENT; see #1 below).  If you are not at the Control Panel, you can select Media from the center console  menu (see #2 below):
      Screen Shot 2023 02 28 at 3.57.25 PM
    3. Click on the folder where you want to add the image.  You can either select from the small folder icons on the left (see #1 below), or the larger folder icons to the right (see #2 below):Media Folder Selection
    4. Once you have selected the folder where you want to upload the image, click the Upload button to the upper left: Screen Shot 2023 02 28 at 3.59.53 PM
    5. Click the Choose Files button below the Thumbnail View and Detail View buttons:       Choose Files button
    6. Use the File Upload window to browse to your image file.  When you find the image, click once on the image, then click Open:Media: File upload dialog box 
    7. Click the Start Upload button to the right of the Browse button to upload your image: Media Manager: "Start Upload" button
    8. If the upload was successful, you will see the message Upload Complete above the gallery of images, and your image should now appear in the gallery:Media: "Upload Complete" message
    9. You can now insert your image into an article.
    • Video Included: Video Included
  • 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
  • Alternative Text (Alt Text)

    Alternative text ("alt txt") provides the textual equivalent of an image to the web page. The description you write should be short and concise, but accurately describe the image content. Implementing alternative text allows screen readers to describe an image that would otherwise be skipped over to those with visual or other cognitive impairments. For this reason it is required that all images must implement proper alternative text.

    To add alternative text to an image follow this procedure:

    1. Find the article containing the image that needs "alt txt" and click on its title.
    2. Click once on the image inside the article's Content area, then click the Insert/Edit Image button Insert/Edit Image button in the WYSIWYG editor:

      "Insert/Edit" Image button
    3. Enter a short description of the image in the "Alternate Text" field (see #1 below):
      "Alternate Text" field in Image Manager

    4. Click Update to the lower right of the "Image Manager" window (see #2 above)
    5. Save the article. It is okay that you do not see the alternative text; it will only show up if disable images in your browser.
  • Alternative Text (Alt Text) (Joomla! 4)

    • How to video:

    Alternative text ("alt txt") provides the textual equivalent of an image to the web page. The description you write should be short and concise, but accurately describe the image content. Implementing alternative text allows screen readers to describe an image that would otherwise be skipped over to those with visual or other cognitive impairments. For this reason it is required that all images must implement proper alternative text.

    To add alternative text to an image follow this procedure:

    1. Find the article containing the image that needs "alt txt" and click on its title.
    2. Click once on the image inside the article's Content area, then click the Insert image button Insert/Edit Image button in the WYSIWYG editor:

      Joomla! 4 JCE Editor - "Insert image" button

    3. Enter a short description of the image in the "Alternate Text" field (see #1 below):

      Joomla! 4 JCE Editor: Image Manager "Alternate Text" field

    4. Click Update to the lower right of the "Image Manager" window (see #2 above)
    5. Save the article. It is okay that you do not see the alternative text; it will only show up if disable images in your browser.
    • Video Included: Video Included
  • Convert Files

    In order to use files as ‘single color white’ png files, they need to be converted from the formats that were downloaded.

    File to convert:

    RU_SIG_SAS/1COLOR/EMF/RU_SIG_SAS_REVWHITE.EMF

    System to use to convert files:

    Zamzar.com

    3414

    1. Select the file ru_sig_sas_revwhite.emf, DRAG it into the browser
    2. Select File type àpng
    3. Click Convert Now button

    35151

          4. Click DOWNLOAD and save file

  • Creating a Popup Link to a file with JCE Editor Image Manager Extended

    Overview

    This page shows how to create a popup link from an image to a file with JCE Editor Pro's Image Button.  Note: This can also be done in the standard JCE Editor.

    Procedure

    Step 1: Click Insert/Edit Image button (the one with a star)

    JCE Editor Pro: "Insert/Edit Image" button (with star)

    Step 2: Select the image to be linked to the popup

    • Navigate to the folder where the image is located (or, for a new image, where it should be saved) using the "Folders" pane (see #1 below). If you are adding a new image, click the Upload button (see #2 below):

      JCE Editor: Image Manager Extended, "Folders" pane and "Upload" button
    • If you clicked Upload, choose the Browse button at the bottom of the "Upload" window and navigate to the location of the image on your computer (see #1 below). Alternately, you can drag and drop images to the 'Drop files here' area (see #2 below):

      "Upload" popup window

    • Once you have located or uploaded your image, select its filename from the "Name" pane:

      JCE Editor: Image Manager Extended, Select filename

    Step 3: Create the popup link

    • Select the "Popups" tab in "Image Manager Extended" (see #1 below)
    • For "Popup Type," select "JCE Mediabox" (see #2 below)
    • Browse to the folder containing the file that should appear in the popup window (see #3 below)
      • Note that you can upload a new file using the Upload button.
    • Enter a title for the file in the "Title" field (see #4 below)
    • Enter a caption for the file in the "Caption" field (see #5 below)
    • Click Insert once complete (see #6 below)
      JCE Editor: Image Manager Extended, "Popups" tab
    • Save & Close your article.  The image you selected in Step 2, when clicked, will link to a popup window displaying the file you selected in Step 3.

     

  • Creating a Popup Link to a file with JCE Editor Image Manager Extended (Joomla! 4)

    Overview

    This page shows how to create a popup link from an image to a file with JCE Editor Pro's Image Button.  Note: This can also be done in the standard JCE Editor.

    Procedure

    Step 1: Click Insert/Edit Image button (the one with a star)

    JCE Editor Pro: "Insert/Edit Image" button (with star)

    Step 2: Select the image to be linked to the popup

    • Navigate to the folder where the image is located (or, for a new image, where it should be saved) using the "Folders" pane (see #1 below). If you are adding a new image, click the Upload button (see #2 below):

      JCE Editor: Image Manager Extended, "Folders" pane and "Upload" button
    • If you clicked Upload, choose the Browse button at the bottom of the "Upload" window and navigate to the location of the image on your computer (see #1 below). Alternately, you can drag and drop images to the 'Drop files here' area (see #2 below):

      "Upload" popup window

    • Once you have located or uploaded your image, select its filename from the "Name" pane:

      JCE Editor: Image Manager Extended, Select filename

    Step 3: Create the popup link

    • Select the "Popups" tab in "Image Manager Extended" (see #1 below)
    • For "Popup Type," select "JCE Mediabox" (see #2 below)
    • Browse to the folder containing the file that should appear in the popup window (see #3 below)
      • Note that you can upload a new file using the Upload button.
    • Enter a title for the file in the "Title" field (see #4 below)
    • Enter a caption for the file in the "Caption" field (see #5 below)
    • Click Insert once complete (see #6 below)
      JCE Editor: Image Manager Extended, "Popups" tab
    • Save & Close your article.  The image you selected in Step 2, when clicked, will link to a popup window displaying the file you selected in Step 3.

     

  • Creating a Popup Link to an article, file, or image with standard JCE Editor

    Overview

    You can link an image to a popup window that displays a larger version of the same image, another image, a PDF, or even a Joomla! article.

    Option 1: Make a popup link to a Joomla! Article

    button applyThe "Apply Now" button at right is an example of an image that links to an article in a popup window.

    1) Add the button image.

    1. Click the Insert/Add Image tool and navigate and select the image to be linked to the popup window.

    2) Link the image to the article.

    1. Select the image you uploaded in Step 1.
    2. Click the Insert/Edit Link button on the editor toolbar:

      Joomla! 3.x: JCE Editor, "Insert/edit Image" button

    3. Under "Search...", click Content (see #1 below).
    4. Click the name of the top-level category that contains the article you want to link to (see #2 below).
    5. If your article is in a subcategory, click the name of the subcategory containing the article.  (If the article is in a category several levels down, you may need to repeat this step until you find the article).
    6. Click once on the name of the article you want linked to the button.

      Joomla 3.x: Linking to content

    3) Create the popup.

    1. In the Link window, click the Popups tab (see #1 below).
    2. In Popup Type, choose JCE MediaBox Popups (see #2 below).  (If you do not see the JCE MediaBox Popups, submit a workorder asking us to add the JCE MediaBox Popups plugin to your site).
    3. Select "Internal Links" for the Media Type option (see #3 below).  This will display the article content without the surrounding elements such as the banner and navigation menu.
    4. Click Insert (see #4 below) and then Save & Close the article.
    5. Test the page to check the display.  If the window needs to be a different size, go back to the JCE MediaBox Popups options and adjust Dimensions (see #5 below). The first field after Dimensions is width in pixels; the second field is height in pixels. 

      Joomla 3.x: Link popup window, "Popups" tab

    popup imageOption 2:  Make a popup link to a File or Image

    The "Rutgers Day" image at right is an example of an image that links to a PDF file in a popup window.  If adding a popup to an existing image or file link, skip to step 5.

    1. Click the Insert/Add Image tool and navigate and select the image to be linked to the popup windowIf the image already exists in the article, copy the link from the URL field.
    2. Select the image you uploaded in Step 1.
    3. Click the Insert/Edit Link button on the editor toolbar (See screenshot under Option 1, 2b above).
    4. If  the popup will display the full size version of an image that has already been inserted into the article, click it then the Link tool and copy the URL and continue the next step to add the popup.
      Otherwise, in the Link window, look to the right of the URL field for the "Browse" icon (it looks like a tiny piece of paper).  Click it and browse to the image or PDF that should open in the popup:

      Joomla! 3.x: "Link" popup window, "Browse" icon

    5. In the Link window, click the "Popups" tab (see #1 below).
    6. In Popup Type, choose JCE MediaBox Popups (see #2 below).  (If you do not see the JCE MediaBox Popups, submit a workorder asking us to add the JCE MediaBox Popups plugin to your site).
    7. [Recommended] Enter a short description of the image or the file in the "Title" and/or "Caption" fields.
    8. [Optional] Set dimensions for popup (see #3 below). The first field after Dimensions is width in pixels; the second field is height in pixels. (You may want to do this if what will be displayed in the popup is very large).
    9. Click the Insert button (see #4 below).
    10. Save the article.

      Joomla! 3.x: Link popup window, "Popups" tab options

     

  • Creating a Popup Link to an article, file, or image with standard JCE Editor (Joomla! 4)

    Overview

    You can link an image to a popup window that displays a larger version of the same image, another image, a PDF, or even a Joomla! article.

    Option 1: Make a popup link to a Joomla! Article

    button applyThe "Apply Now" button at right is an example of an image that links to an article in a popup window.

    1) Add the button image.

    1. Click the Insert/Add Image tool and navigate and select the image to be linked to the popup window.

    2) Link the image to the article.

    1. Select the image you uploaded in Step 1.
    2. Click the Insert/Edit Link button on the editor toolbar:

      Joomla! 3.x: JCE Editor, "Insert/edit Image" button

    3. Under "Search...", click Content (see #1 below).
    4. Click the name of the top-level category that contains the article you want to link to (see #2 below).
    5. If your article is in a subcategory, click the name of the subcategory containing the article.  (If the article is in a category several levels down, you may need to repeat this step until you find the article).
    6. Click once on the name of the article you want linked to the button.

      Joomla 3.x: Linking to content

    3) Create the popup.

    1. In the Link window, click the Popups tab (see #1 below).
    2. In Popup Type, choose JCE MediaBox Popups (see #2 below).  (If you do not see the JCE MediaBox Popups, SUBMIT REQUEST asking us to add the JCE MediaBox Popups plugin to your site).
    3. Select "Internal Links" for the Media Type option (see #3 below).  This will display the article content without the surrounding elements such as the banner and navigation menu.
    4. Click Insert (see #4 below) and then Save & Close the article.
    5. Test the page to check the display.  If the window needs to be a different size, go back to the JCE MediaBox Popups options and adjust Dimensions (see #5 below). The first field after Dimensions is width in pixels; the second field is height in pixels. 

      Joomla 3.x: Link popup window, "Popups" tab

    popup imageOption 2:  Make a popup link to a File or Image

    The "Rutgers Day" image at right is an example of an image that links to a PDF file in a popup window.  If adding a popup to an existing image or file link, skip to step 5.

    1. Click the Insert/Add Image tool and navigate and select the image to be linked to the popup windowIf the image already exists in the article, copy the link from the URL field.
    2. Select the image you uploaded in Step 1.
    3. Click the Insert/Edit Link button on the editor toolbar (See screenshot under Option 1, 2b above).
    4. If  the popup will display the full size version of an image that has already been inserted into the article, click it then the Link tool and copy the URL and continue the next step to add the popup.
      Otherwise, in the Link window, look to the right of the URL field for the "Browse" icon (it looks like a tiny piece of paper).  Click it and browse to the image or PDF that should open in the popup:

      Joomla! 3.x: "Link" popup window, "Browse" icon

    5. In the Link window, click the "Popups" tab (see #1 below).
    6. In Popup Type, choose JCE MediaBox Popups (see #2 below).  (If you do not see the JCE MediaBox Popups, SUBMIT REQUEST asking us to add the JCE MediaBox Popups plugin to your site).
    7. [Recommended] Enter a short description of the image or the file in the "Title" and/or "Caption" fields.
    8. [Optional] Set dimensions for popup (see #3 below). The first field after Dimensions is width in pixels; the second field is height in pixels. (You may want to do this if what will be displayed in the popup is very large).
    9. Click the Insert button (see #4 below).
    10. Save the article.

      Joomla! 3.x: Link popup window, "Popups" tab options

     

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

Page 1 of 3