Rich Image

Enriches the core Image field with properties such as Attribution, Caption Title, Caption and Link. Works with D8.8+ and D9.

Introduction:

A number of times, an image needs to be accompanied with image credits (aka attribution, image source, etc.), a caption, optionally a caption title, and a link that the image hrefs to. In order to have this, either the core image's Alt and Title properties are used (which isn't the right way, since these have specific purposes), or a Paragraph entity needs to be created (which makes it more complex for the images to be used, e.g. in views, and may have performance hits). This module enriches the core Image field with these additional properties.

Features:

1. Adds optional Attribution (plain text), aption Title (plain text), Caption (formatted text), Link (with link target) properties (each optional) to an Image field. Note: It does not introduce a new field type, it extends the core Image field.
2. Supports revisions.
3. Even though it extends the core Image field, it uses its own tables (two only). This makes it quite independent of the core Image data, and hence quite safe to use.

Example:

Lets say you have a content type bundle - Article, which already has an Image field before you installed this module (it works even if you add an Image field after this module is installed). After this installing this module:

Steps:

1. Go to Structure » Content types » Article » Manage fields » Any field of Image type » Edit.
   • You should now see the new Default Image » Attribution input. Type in a value or leave blank. This behaves very much like the core Alt and Title default values.
   • Scroll down to see the Rich Image Properties block, and enable, set required, and link type allowed (internal or external) for the new properties.
   • Save.
2. Now go to Structure » Content types » Article » Manage display » field of Image type that we modified earlier.
   • Select the Rich Image formatter.
   • Save.

   .
3. Add new or edit an existing Article, with the image field, you should now see the properties you enabled. Change these properties as required and save.
4. Visit the page to see the properties now added.
5. As a developer, you can style these new properties (these come wrapped in their own classes, use browser Inspect for details) in CSS as desired.

@todo:

There are various popular sliders and image formatters out there (Flexslider, Slick Carousel, Colorbox, which do not see these new properties. Each one of the most popular ones need to be changed to make use of these new properties. This module however works absolutely fine with the core Image field.

Similar Projects:

• Image Field Caption: Supports caption, does not support revisions.
• Linked Image Field: Supports Image links.

Endnote:

README.txt in the module root directory has further detailed information.