Documentation

Item Types

Image

Last Updated: 

The Image Item type allows you to custom images to your Ditty. For general information on working with items check out the following articles:

Image Settings

Select the Gear/Edit icon shown on your Image item to adjust the settings.

General Settings

Set the general settings of the Image.

  • Image Type – Select the type of image to display.
  • Image – Upload or select an image.
  • Add custom image data – Check to add custom image data. If left unchecked, data attached to the Media Library attachment will be used.
  • Image URL – Add a URL to an image.
  • Alt Text – Add the alt text for the image.
  • Title – Add a title for the image.
  • Caption – Add a caption for the image.
  • Description – Add a description for the image.

Links

Configure link settings for the image.

  • Link – Select the link type for the image.
  • Link Target – Set a target for the link.
  • Link No Follow – Enabling this setting will add an attribute called ‘nofollow’ to the link. This tells search engines to not follow this link.
  • Link URL – Add a custom link to your image.
  • Link Title – Add a title to the custom link.
  • Link Target – Set a target for your link.
  • Link No Follow – Enabling this setting will add an attribute called ‘nofollow’ to your link. This tells search engines to not follow this link.

Customize (Layout Tags)

Customize the layout tags used in the layout for an Image item. Keep in mind that your layout may not use all of the tags shown on this panel. If the tag is not included in your layout, modifications in this panel will have no effect.

  • Click the checkmark next to each tag to toggle visibility.
  • Click the gear icon to open the available attributes for each tag.
  • If you want to modify an attribute, click the pencil icon next to the attribute name. This will open a field to set a custom value for the attribute.

For more information view the documentation here: https://www.metaphorcreations.com/article/ditty/general/adding-new-items/#customize-tab

Image Layout Settings

Select the Pencil/Brush icon shown on your Image item to modify the layout for the item. Read more about what Layouts are and how they are used here: https://www.metaphorcreations.com/article/ditty/general/using-layouts/

HTML Tags

The following tags are available to use with the Image Item type.

  • {author_avatar} – Render the item’s author avatar.
  • {author_bio} – Render the item’s author bio.
  • {author_name} – Render the item’s author name.
  • {categories} – Render the item’s categories.
  • {caption} – Render the item’s caption data.
  • {content} – Render the item’s description data.
  • {icon} – Render the item’s icon.
  • {image} – Render the item’s image.
  • {image_url} – Render the item’s image url.
  • {permalink} – Render the item’s permalink.
  • {time} – Render the item’s date/time.
  • {title} – Render the item’s title.

CSS Selectors

The following css classed are available to use with the Image Item type.

  • .ditty-item__elements – The container wrapping around the item’s content.
  • .ditty-item__author_avatar
  • .ditty-item__author_bio
  • .ditty-item__author_name
  • .ditty-item__caption
  • .ditty-item__content
  • .ditty-item__icon
  • .ditty-item__image
  • .ditty-item__image_url
  • .ditty-item__permalink
  • .ditty-item__time
  • .ditty-item__title