Image Effects and Alt Text

Image Effects


After you have added an image to your page (instructions on adding a page), you can configure it with special effects. Select the picture while in edit mode, and an image toolbar will appear below the image.

Screen capture showing toolbar

Image Size

The number at the far left shows the current size of the image in pixels. You can click on the buttons with the different-sized boxes to change the size of the image on the page. On the left, the smallest box will turn the image into a thumbnail. Click on the button named "Original" to return the image to its original size.

Border

Click on the "Border" button to add a simple, black border around the picture.

Click on the "Link" button to associate the picture with a web page. If someone clicks on the picture, they will then be taken to that web page. Once a link has been associated with an image, new buttons will appear on the image toolbar. You can use these button to edit the link associated with the image and to remove the link from the image.

Screen capture showing toolbar linked

Properties

The "Properties" button can be used to add visual effects around the picture:

Screen capture showing examples of effects

Image Titles and Alt Text


Select the "Image Properties" button and then "Title" from the left hand menu.  You can now add an image title that will appear when someone hovers their mouse over the image.  Alt text is crucial for webpages to be uniformly accessible, helping individuals with screen readers understand and navigate your pages. Please see Web Accessibility for more information on creating meaningful alt text.

Screen capture of Properties settings, showing where to place Title text and Alt text

 

com.atlassian.confluence.content.render.xhtml.migration.exceptions.UnknownMacroMigrationException: The macro 'ivy-ai' is unknown.