Simple Background image formatter
This module provides a formatter for image fields that displays images as a CSS background on a `div` element. It integrates with Drupal's field UI, Views, and image styles, offering options for inline styles or custom CSS selectors to control how the background image is applied. This allows for more flexible image display, including linking the background image to content or a custom URL.
This module provides an image formatter that allows you to display the image in a div as background image.
The module extends Drupal's images field. Because settings are attached to the entity, it's very easy to setup and manage.
Features
1. No module dependencies (Other than image).
2. Works with Drupal's field UI.
3. Works with Views.
4. Integrates with Drupal's image styles.
5. Offers 2 modes. (Inline Style & CSS Selector)
6. Works with Media image fields.
7. Allows inline background images to link to the content or to a custom URL.
8. Supports tokens in custom links when the Token module is enabled.
9. Provides entity context variables for template overrides.
10. Provides theme suggestions for entity type, bundle, field, and entity ID.
Inline Style
Instead of generating the normal img markup we now generate the div with an inline style.
This
<img src="PATH" />
is changed to
<div class="[YOUR CLASS]" style="background-image: url('[ABSOLUTE PATH]')"> </div>
CSS Selector
This option prevents the img tag from being printed to the dom and instead generates a stylesheet in the dom.
The expected output will be something like this.
<style>
[YOUR SELECTOR]_[ENTITY_ID] {background-image: url('[ABSOLUTE PATH]');}
</style>
Basic Installation and usage.
1. Download and enable the module.
2. Go to Administration > Structure > Content Types (admin/structure/types).
3. Click on Manage Display for the relevant content type. (admin/structure/types/manage/page/display)
4. Change the Format to Background Image for the relevant image field.