Web Development Documentation

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:

    Insert/Edit Image button location in WYSIWYG editor
  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 Insert when all properties have been set.
  12. Save & Close the article.

 

Joomla-Workshops-Button-Hugo