The Image Tile

Settings

Tile

Width – Adjusts the width of the tile, in pixels.
Height
– Adjusts the height of the tile, in pixels. This option is only available if Fixed Height has been selected
Aspect Ratio
- This option allows you to choose a fixed height or to choose an aspect ratio which will allow the image to scale based on the screen size.
Background Color
– Changes the background color of the tile using the color picker.
Highlight on Mouse over
– Toggle whether the tile changes color when it is hovered on.
Mouse Over Color
– Changes the background color when the tile is hovered on. Only available when Highlight on Mouse Over is checked.

Image

Image Path – Sets the location of the image.
Image Layout Style
– Changes how the image is displayed, either Tile, Stretch, Fit, Fill or Center.
Image Padding
- Adjusts the padding (the gap between the image and the edge of the tile) to the left, right, top or bottom of the tile, in pixels.
Edit Image - Opens up the Image cropper.

Text

Text: Adds in text to the tile.
Subtitle
: Adds in a subtitle to the text on the tile.
Vertical Alignment
: Chooses the vertical alignment of the text. Selectable via a dropdown list.
Horizontal Alignment
: Chooses the horizontal alignment of the text. Selectable via a dropdown list.
Text Padding
: Adds in padding for the text.
Override Page Font
- This allows you to override the font family that has been selected if the checkbox is checked.
Font Family
– Changes the font family of the items text. Selectable via a dropdown list. (Note: This is only available if Override Page Font has been selected)
Font Size
– Changes the size (in pixels) of the text within the Text field.
Font Color
– Changes the color of the text within the Text field. Selectable via the color picker.
Font Style
– Changes the style of the text within the Text field. Either Italic and/or Underlined.
Font Weight
– Changes the weight of the text within the Text field. Selectable via dropdown list.

Hover Detail

Text: Adds hover text to the tile.
Vertical Align
: Chooses the vertical alignment of the hover text. Selectable via a dropdown list.
Background Color
: Chooses the hover over colour.
Hover Effect
: Allows for a choice between no hover effect, fade in/out, image zoom in/out and slide up/down effects. Selectable via a dropdown list.
Padding
: Adds in padding for the text.
Override Page Font
- This allows you to override the font family that has been selected if the checkbox is checked.
Font Family
– Changes the font family of the items text. Selectable via a dropdown list. (Note: This is only available if Override Page Font has been selected)
Font Size
– Changes the size (in pixels) of the text within the Text field.
Font Color
– Changes the color of the text within the Text field. Selectable via the color picker.
Font Style
– Changes the style of the text within the Text field. Either Italic and/or Underlined.
Font Weight
– Changes the weight of the text within the Text field. Selectable via dropdown list.

Links

Path – Sets the location of the link.
Target
– Changes where the links open, either Modal Dialog, New Window, In Place or Slide.
Modal Width
– Sets the width of the Modal Dialog. Only visible when Modal Dialog is selected.
Modal Height
– Sets the height of the Modal Dialog. Only visible when Modal Dialog is selected.
Modal Style
– Sets the border style of the Modal Dialog either Frameless, Framed or SharePoint. Only visible when Modal Dialog is selected.
Slide Position
- Sets which side of the page of the side panel will slide out from (left or right). Only visible when the slide option is selected.
Slide Width
- Sets the width of the side panel. Only visible when the slide option is selected.

Layout

Layer – Changes the depth of the tiles within the page. Selectable via dropdown either Foreground, Background or Custom.
Reorder Within Layer
- Changes the depth of the tiles within the layer. Selectable via dropdown either ‘No Change’, ‘Bring to Front’ or ‘Send to Back’.

Advanced

Tile Visibility – Changes which groups can or cannot view the tile. Selectable via dropdown either Everyone, ‘Only for’ or ‘For everyone except’. When ‘Only for’ or ‘For everyone except’ is selected, a dropdown menu will appear where you can assign groups to the category that was selected.
Lock Tile for Non-owners – Toggles whether only tile can be only modified by an owner.
Custom CSS Classes - This section allows you to add multiple Custom CSS classes to the product, allowing you to be able to add custom CSS classes to the tile.

Did this answer your question?