Images

Images can direct a viewer’s attention and invite the viewer to explore different content areas on the page.

To add an image to a page:

1. Navigate to the page you want to edit and make sure that is set to Edit.
2. Add the component to the page. The image component shows a placeholder image until you select the image you want to use.
   
   
   
3. To select an image, double-click the component on the page to open the image selection panel directly, or click the menu icon , choose Settings, and click Select next to the Image field to open the selection panel.
4. Select an image from the site repository, from a documents folder that's been shared with you, or upload an image to a documents folder. You can also add an image to the repository first from the image selection panel by clicking Add and selecting Add from Documents or Add from this computer. Once the image is added, you must then find and select it.

   Note:

   The window displays all available files. You must choose the file type that’s appropriate for the context. For example, if you’re choosing an image file, you must select a file with a valid image format (GIF, JPG, JPEG, PNG, or SVG).
   1. Locate and select the image you want to use.

      If you don't see any digital assets, click , and change the collection filter to All.

   2. If you selected an image from a documents folder, you can link to the file rather than copying it to the site. To link to the file, select Use a reference to the original file instead of copying the file to the site. If you don't select this option, a copy of the file is stored with the site and is referenced from the site. Linking to the original file avoids duplicating the content. The link allows site visitors to see the content even if the permissions on the file change or would otherwise restrict viewing.
   3. Once you've selected an image, click OK to close the image selection panel.
   4. If you selected a digital asset, you can select a specific rendition. If you don't select a rendition, the original size will be used. If you want the latest version of the asset to be published when the site is published, select Use latest version of asset.
5. To edit the image, click , and edit the image with any of the following actions:
   • To crop the image, click Crop. Select one of the predefined image ratios in the cropping toolbar, or drag the cropping handles on the image as desired. When you're satisfied, in the cropping toolbar, click Crop.
   • To rotate or flip the image, click Rotate. In the rotation toolbar, enter a custom rotation degree, use the buttons to rotate the image left or right, or select whether to flip the image horizontally or vertically.
   • To add a watermark to the image, click Watermark. Add text to the image, changing the text size, style, color, and opacity as desired with the watermark tools.
   • To change the image format, click Options, then select a new format from the Format drop-down list.
   • To change the background color, click Options, then select an option from the Background Color drop-down menu.
   • If you're editing a .jpg or a .webp (available on Google Chrome browsers), you can change the image quality to create a smaller file size. Click Options, then enter the new percentage in the Quality box.
   • To undo or redo your change, click or . To remove all changes you made, click Reset.
   • To change the magnification of the image, use the zoom controls ().
6. Use the General panel of the Settings menu to add a caption or to modify spacing, alignment, style, and other options.
7. You can associate a link or other actions with an image:
   1. In the Settings panel, click Link.
   2. Select one of the following options:

      • No Link: The image performs no action when the user clicks it.

      • Web Page: Specify a full URL to an external page or site, and select where to open the link.

      • Site Page: Use the page picker to select a page on the current site, and select where to open the link. You can specify additional URL parameters in the format key1=value1&key2=value2. Empty values are supported; for example, key1=&key2=value2. You can also specify a URL anchor, but need to add a special Anchor section layout to the place on the target site page where you want the anchor link to resolve, and specify the same anchor name in layout settings that you used when defining the trigger action.

        Note:

        The Anchor section layout required to use URL anchors is distributed in the Oracle Content Management Toolkit. For information on how to get the toolkit, see Develop with Oracle Content Management Toolkit.

      • File Download: Download a selected file from the repository. Select a file.

        If you select a digital asset, you can select a specific rendition. If you don't select a rendition, the original size will be used. If you want the latest version of the asset to be published when the site is published, select Use latest version of asset. If you don't select Use latest version of asset, then the most recent published version is used rather than a more recent draft version if there is one.

      • File Preview: The selected file will appear as an overlay on the page.

      • Content Item: Select a content item from an associated asset repository, choose the detail page you want displayed and target the page to open in the same or new window.

      • Email: Specify a valid email address and, optionally, a subject. The resulting message is opened in and sent through the default email client.

      • Image Preview: The selected image will appear as an overlay on the page.

      • Map: Enter a valid address or coordinates, and select where you want the map to open in desktop and mobile browsers.

      • Phone call: Enter a valid phone number.

8. When you've finished, close the image settings dialog.