Adding an image with the Rhythm Image structure and template

  1. In the navigation pane, expand the menu under the name of the site.
  2. Select Content & Data > Web Content.
  3. Select Add > Rhythm Image Content.
  4. In the Title field, specify a name for the content in the default language. To specify a name in a different language, click the flag button and select the language.
  5. Specify basic information about the image:
    Structure
    Accept the default value of Rhythm Image Content.
    Template
    Accept the default value of Rhythm Image Template.
    Title
    Specify a title for the image.
  6. Specify the image to use as the primary image. Complete one of these steps:
    • To upload an image from a local file system, click the Browse button next to the Image field and select the image.
    • To use an image that has been uploaded in the Documents and Media form, click the Select button. Ensure that you leave the Image field blank.
  7. In the Hover Options section, specify the actions to take when a user places the cursor over the image:
    Image on Hover
    To display a different image, select the Image on Hover check box. Then, select the image to display. Ensure that the image that you select is the same height and width as the main image. Otherwise, the image is not displayed correctly.

    To display an image that is stored locally, click the Browse button next to the On Hover Image field. To display an image that is stored in documents and media, click the Select button. If you select an image from documents and media, ensure that you leave the On Hover Image field blank.

    Zoom on hover
    Select this check box to zoom into or out of the image when a user places the cursor over the image. In the Zoom percentage field, specify the zoom level. To magnify the image, specify a value over 1. For example, 1.2 zooms in by 20%. To decrease the size of the image, specify a value less than one. For example, 0.8 decreases the size of the image by 20%.
    Content on Hover
    Select this check box to display alternate content when the cursor is placed over the image.
    Overlay on Hover
    Select this check box to display a color over the image when a user places the cursor on the image. Specify the color in the Hover Overlay Color field. You can specify a hex code or the name of a color. In the Hover Opacity Percentage field, specify the opacity. You can specify a value up to 1. For example, to specify 60% opacity, enter 0.6.
    Image Overlay
    Select this check box to display a color over the image. The color is removed when the user places the cursor on the image. Specify the color in the Image Overlay Color field. You can specify a hex code or the name of a color. In the Hover Opacity Percentage field, specify the opacity.
  8. In the Optional Text section, specify text to place on the image:
    Heading
    Specify heading text.
    Heading Text Color
    Specify the color of the heading text. You can use a hex code or specify the name of the color.
    Description
    Specify a description. This text is placed under the heading.
    Description Text Color
    Specify the color of the description text. You can use a hex code or specify the name of the color.
    Text Position
    Click the arrow and select how to position the text over the image.
    Text Overlay
    Select this check box to display the text as an overlay that is removed when the user places the cursor over the image. Clear the check box to always display the text over the image. If you select the check box, specify the color of the overlay in the Text Overlay Color field and the opacity percentage in the Text Opacity Percentage field.
  9. In the Links & Buttons section, specify links to include on the image:
    Link to Page
    To link to another page on your website, specify the page in this field. Use the Link Type field to specify the style of the link, and specify the text to use for the link in the Link Text field.
    External Link URL
    To link to a page that is not a part of your website, specify the URL in this field. Use the External Link Type to specify the style of the link, and specify the text to use for the link in the External Link Text field.
    Link Color
    Specify the color of the link. The color that you specify is applied to internal and external links. You can specify a hex code or the name of the color.
    Button Link
    To use a button to add a link to another page in your website, specify the name of the page in this field. Use the Button Type field to specify the style of the button, and specify the text to use for the button in the Button Text field.
    Lightbox Redirect
    Select this check box to redirect users to a lightbox when they click the image. To redirect to an internal page, specify the name of the page in the Lightbox Local Link field. To redirect to an external page, specify the link in the Lightbox External Link field. Specify information about the appearances of the lightbox in these fields:
    • Lightbox Overlay Color. Specify the color to use for lightbox.
    • Lightbox Opacity Percentage. Specify the percentage of opacity. Specify a value up to 1. For example, to specify 50% opacity, enter 0.5.
    • Lightbox Icon Color. Specify the color of the lightbox icon.
  10. Use the Remove Portlet Spacing check box to specify how the image is displayed when it is placed over multiple columns. Select the Remove Portlet Spacing check box to remove the spacing between columns. When you select the check box, the image spans the columns. Clear this check box to place the image within a single column.
  11. To make the content available to be found with the Liferay Search tool, select the Searchable check box.
  12. Click Publish.