vvjh

The Vanilla Views suite F.L.A.S.H.C.R.P.T.B FlashCrptb is a collection of ten powerful Drupal modules designed to enhance the visual and interactive experience of Drupal Views using pure, lightweight Vanilla JavaScript. Originally developed as Paragraphs Bundles, these modules Accordion, Basic Carousel, 3D Carousel, 3D FlipBox, Hero, Lightbox, Parallax, Reveal, Slideshow, and Tabs.

Additionally, I have created a demo for each module: Accordion Demo, 3D Carousel Demo, Carousel Demo, 3D FlipBox Demo, Hero Demo, Lightbox Demo, Parallax Demo, Reveal Demo, Slideshow Demo, and Tabs Demo.
To get started, check out our Video Demo for a step-by-step guide on using the module effectively. Explore our mixed demos here: Live Demo One | Live Demo Two. The site for the live demo is built with the Solo Theme.

Overview

The Views Vanilla JavaScript Hero module (machine name: vvjh) allows you to create visually appealing, full-width hero sections on your Drupal site using pure vanilla JavaScript, without any dependencies on jQuery. A hero section typically consists of a large background image with text or other content overlayed on top, making it ideal for highlighting key messages or calls to action. This module integrates seamlessly with the Views module, offering a new display style that can be selected when creating or editing views. Additionally, when used with Drupal's responsive images, the hero section becomes fully responsive, ensuring it looks great on all screen sizes. Beyond traditional hero sections, you can also use this module to build "Hero Cards," which combine visual impact with structured content presentation. These features make the module perfect for landing pages, headers, or any other prominent areas of your site where you want to make a strong visual impact.

Features

• Hero Display Style: Adds a new "Hero" display style to Views, allowing content to be displayed in an impactful hero section.
• Customizable Options: Provides various settings to customize the hero section, including:
  • Overlay Position: Choose where the content overlay appears within the hero section.
  • Background Color: Set the background color for the overlay that appears behind the content.
  • Animation Style: Select from different animation styles, such as fading, sliding, or zooming, to bring your hero section to life.
  • Animation Speed: Control the speed of the hero section's content animation.
  • Animation Easing: Choose the easing function for the content animation, providing smoother transitions.
  • Hero Card Width: This feature allows you to set the width of each Hero Card in units such as vw, vh, px, em, or rem. Depending on the value set, hero items can be displayed as individual Hero Cards or in a list format. If set to zero, each Hero Card will expand to the full available width, creating a list layout. This is useful for controlling the presentation of multiple hero items.
  • Height Value: Define the minimum height of the hero section in different units.
  • Max Content Width: Determine the maximum width for the content within the hero section as a percentage of the hero’s total width.
  • Overlay Background Opacity: Adjust the opacity of the background color for the overlay behind the hero content.
• Responsive Design: Includes configurable breakpoints to ensure the hero section adapts seamlessly to different screen sizes. It works perfectly with Drupal's responsive images for full-width, responsive hero sections.
• Lightweight and Fast: Built with pure vanilla JavaScript, ensuring a modern, fast, and efficient user experience.
• Hero Card: Use this feature to build "Hero Cards," which are visually appealing, responsive cards that can either fill the entire width or be arranged in a grid or list format, depending on the configuration.

Accessibility

The Views Vanilla JavaScript Hero module is designed with accessibility in mind, ensuring that all users, including those with disabilities, can fully engage with your hero sections. Key accessibility features include:

• ARIA Roles and Properties: Proper ARIA roles and attributes are utilized to provide clear context and state information to screen readers.
• Keyboard Navigation: Ensures that users can navigate through the hero section using keyboard shortcuts.
• Focus Management: The currently displayed content is properly focused, enhancing the experience for keyboard and screen reader users.

Configuration

Once the module is installed and enabled, you can configure it via the Views UI:

1. Overlay Position: Choose the position of the content overlay within the hero section (e.g., middle, left, right, top, bottom).
2. Hero Style: Select the animation style for the hero content, including options like fade, zoom, and various slide directions.
3. Hero Speed: Adjust the speed of the animation, from fast to slow.
4. Overlay Background Color: Customize the background color of the overlay to match your site's design.
5. Overlay Background Opacity: Control the transparency of the overlay background.
6. Breakpoints: Define the screen widths at which the hero section will adjust or disable itself for responsiveness.
7. Hero Card Width: Set the width of each Hero Card in pixels or other units. Use this setting to display hero items as Hero Cards or a list. Note that if the width is set to zero, the Hero Cards will expand to the full available width, creating a list layout. This feature requires multiple items to be effective.

Custom Token for views header/footer from first row

In Views header/footer, if you add a field using Global: Text area or Global: Unfiltered text, there is an option called "Use replacement tokens from the first row."
The default tokens will not work in this case. Please use the custom tokens created by VVJA instead.
For example:

• The default token {{ title }} should be replaced with [vvjh:title].
• The default token {{ field_image }} should be replaced with [vvjh:field_image].

You can append :plain to the token to strip any HTML.

Example: [vvjh:title:plain]

Note: The [vvjh:*] tokens pull data directly from the rendered View fields.
Fields using complex rewrites (e.g., Global: Custom text with {{ tokens }}) are not supported by default for token replacement. Please use individual field tokens like [vvjh:title], [vvjh:field_image], etc.

Example Usage

1. Install and enable the Views Vanilla JavaScript Hero module.
2. Create or edit a view using the Views module.
3. In the Format section, select Vanilla JavaScript Hero from the available display styles.
4. Configure the various options in the Format Settings to customize the hero section according to your preferences, including the new Hero Card Width feature.

Additional Information

Animation Type Compatible Positions Fade Middle, Left, Right, Top, Bottom, Top-Left, Top-Right, Bottom-Left, Bottom-Right, Top-Middle, Bottom-Middle Zoom Middle, Left, Right, Top, Bottom, Top-Left, Top-Right, Bottom-Left, Bottom-Right Slide From Top Top, Bottom, Top-Middle, Bottom-Middle, Top-Left, Top-Right, Bottom-Left, Bottom-Right Slide From Right Right, Left, Top-Right, Bottom-Right, Top-Middle, Bottom-Middle Slide From Bottom Bottom, Top, Top-Middle, Bottom-Middle, Bottom-Left, Bottom-Right Slide From Left Left, Right, Top-Left, Bottom-Left, Top-Middle, Bottom-Middle

Notes for Users:

• Fade: This animation is versatile and works well with almost all positions, including center-aligned (middle), edge-aligned (left, right), and corner positions.
• Zoom: Best suited for positions where the content is centrally located (middle, left, right). It may not look ideal when content is at the corners or edges like top-left or bottom-right.
• Slide From Top: Works best with positions at the top and bottom (top, bottom, top-middle, bottom-middle). It might not align well with middle or side positions (left, right).
• Slide From Right: This animation works well with right and left-aligned content (right, left). It’s also compatible with edge positions like top-right, bottom-right, top-middle, and bottom-middle.
• Slide From Bottom: Similar to Slide From Top, this animation is best suited for top and bottom positions but can work with edge or corner positions like bottom-left and bottom-right.
• Slide From Left: Works well with left and right-aligned content (left, right) and edge positions (top-left, bottom-left, top-middle, bottom-middle).

Incompatible Combinations:

• Zoom may not look ideal when applied to corner positions like top-left or bottom-right because the effect can appear lopsided or unbalanced.
• Slide From Top and Slide From Bottom may cause unexpected visual results when used with middle or edge-aligned positions (left, right), as the content could slide from an unexpected direction.

• Dependencies: The module has no dependencies on other contributed modules, making it easy to install and use.
• Compatibility: Fully compatible with Drupal 10 and follows Drupal best practices.

Installation

1. Download and install the Views Vanilla JavaScript Hero module from Drupal.org:
   

   composer require drupal/vvjh

2. Enable the module through the Drupal admin interface or using Drush:
   

   drush en vvjh

3. Clear caches to ensure the new plugin is available:
   

   drush cr

Support and Contributions

If you encounter any issues or have suggestions for improvements, please open an issue in the module's issue queue on Drupal.org. Contributions are always welcome and appreciated!

Hero - Developer & Site Builder Tips:

• Every view created with this plugin has a CSS class vvj-hero placed alongside js-view-dom-id.
• You must choose "Row Style" as the format, with at least two fields.
• The first field must be an image. Under the formatter, it could be an image or responsive image; you cannot use a URL to an image. It can be clickable.
• All other fields will be grouped for the hero overlay text.
• The hero will collapse into a regular card on small devices.

Module Limitation Notice: Grouping Field Feature

Please note that the current version of this module does not support the
Grouping Field feature available in Drupal Views. The
"Grouping Field" option allows you to group records by a specified field,
but this functionality is not compatible with the module's current implementation.

We recommend avoiding the use of this feature with this module to ensure
proper functionality and display of your Views.

back to top ☝️

Developed & Designed By: Alaa Haddad

A Personal Thank You for Your Support

Every project you see here, including this one, reflects countless hours of work driven by my passion for making Drupal better for everyone. Your support truly makes a difference, and there are a few simple ways you can help these projects grow and reach others who might benefit:

• Use & Share Feedback: Have you found this project (or any of my other work) helpful? Let me know what worked well or how it could be improved. Real user input drives better tools for the entire community.
• Click "Like" on Drupal.org: It may seem small, but liking this project on Drupal.org helps others discover and trust these tools.
• Spread the Word: Share these projects on social media, Slack groups, or anywhere Drupal folks connect. Your word of mouth helps these tools find the people who need them.
• Explore More of My Work: Check out my other projects on Drupal.org to see what else might support your workflow or inspire your next build.

W3CSS Theme (d8w3css) - Solo - W3CSS Paragraphs - Paragraphs Bundles - Amun - Amunet - Anhur - Acquia Purge Varnish - Cloudflare Purge - Reference Blocked Users - Solo Copy Blocks - Solo Utilities - PB Import - VVJA - Accordion - VVJC - 3D Carousel - VVJB - Basic Carousel - VVJF - 3D FlipBox - VVJH - Hero - VVJL - Lightbox - VVJP - Parallax - VVJR - Reveal - VVJS - Slideshow - VVJT - Tabs - Module Matrix - Selectify - Utilikit

If you have any questions, ideas, or feedback about my Drupal.org projects, I’d love to hear from you! To keep things open and helpful for the entire community, I encourage you to post directly in the project's issue queue on Drupal.org. This way, your questions and the answers can benefit others who may have the same needs.

At the end of the day, my goal is to make Drupal easier and more enjoyable for everyone, especially small businesses and site builders who want to create professional sites without extra hassle. Together, we can build something even better. Thank you for your support, and for being part of this journey!