The W3CSS Image Wide bundle is a versatile and user-friendly sub-module within the Drupal W3CSS Paragraphs module. Specifically designed to enhance the presentation of images on Drupal-based websites, this bundle allows for the creation of responsive, wide (rectangle) images. It leverages Drupal's core modules such as media, media library, and responsive image to ensure seamless integration and optimal performance.

Display Tab Features

1. Background Colors:
   • Offers a selection of 30 different colors, enabling users to choose the ideal background that complements their image.
2. Background Color Hover:
   • Provides 30 color options for hover states, adding an interactive element to the image.
3. Text Colors:
   • Includes 30 color options for text, ensuring readability and aesthetic appeal.
4. Text Color Hover:
   • Comes with 30 choices for text color on hover, enhancing user engagement.
5. Border Color:
   • Users can select from 30 different colors for the border, adding a distinct frame to the image.
6. Border Color Hover:
   • Features 30 color options for border hover states, offering dynamic visual effects.
7. Background Color Opacity:
   • Allows adjustments from 5% to 95% (in 10% increments) after selecting a background color. This feature provides 330 color variations, adding depth and texture to the background. Note: Opacity applies only to the background color.
8. Width:
   • Offers a range of width options from 30% to 100%, accommodating different layout needs.
9. Borders:
   • Includes 11 different styles to choose from, giving a variety of framing options.
10. Round Borders:
    • Provides 6 styles, enabling the creation of softer, rounded edges.
11. Margin:
    • Offers 6 styles, aiding in the proper spacing of the image within the page layout.
12. Padding:
    • Comes with 8 different styles, allowing for space adjustment within the border of the image.
13. Box Shadow:
    • Enables adding a 2px or 4px bordered shadow, enhancing the image's prominence and depth.

Content Tab Features

1. Title:
   • A field for the content title, allowing users to assign a descriptive or catchy title to their image.
2. Media Field:
   • This field is used to upload the image. Accompanying the upload are two additional fields:
     • Alternative Text: Essential for SEO and accessibility, providing a text alternative for the image.
     • Title: An additional title field for the image, which can be different from the content title.
3. Link Field:
   • If the image is intended to be clickable, this field allows the addition of a link, directing users to a specified URL upon clicking the image.
4. Image Link Title Field:
   • This is an attribute for the image link, enhancing the link with a title attribute that can provide additional context or instructions when hovered over.

Conclusion

The W3CSS Image Wide bundle in the Drupal W3CSS Paragraphs module is a comprehensive tool for creating and customizing responsive wide images. Its extensive range of styling options under both the display and content tabs ensures that users can create visually appealing and functionally rich image presentations, tailored to their specific needs and the overall design of their Drupal site.