The Covid-19 pandemic has shaken the entire world. The future seems uncertain and things aren’t going the way as planned. Yet, businesses must hang in there and assure their users on what they should expect from them. We have helped some of our clients create banner announcements on their Drupal websites to let their customers know –
- They are still operational
- Their working hours
- How they can help better in these uncertain conditions
- Precautionary actions that are underway
- Restrictions on available services
Of course, these announcement banners can be leveraged for any kind of informational messages that need to be displayed for a certain period of time. Let’s take you through this in two different ways. One is by creating a custom pop-up for announcements using Bootstrap modal in Drupal 8. This method offers more flexible customizations and detailing. The other option is a simpler one using the Drupal 8 Site Alert module.
Creating a custom pop-up for announcements using Bootstrap modal In Drupal 8
For a fully customized announcement banner with a decent theming, editable announcement based on the user’s selection, we can go with this option. Showing banners to the visitors depends on the selection made in the configuration form.
Step 1: Since we are building a custom announcement banner, we need to have a custom module as every feature in Drupal is a module. Build the custom module according to these instructions.
Step 2: Also, the announcement needs to be configurable. We need to create an editable configuration form with required field. Follow these instructions to create configuration forms.
Step 3: Create a plugin block for fetching the configuration form values in a custom module. Follow these instructions to create the custom block. All the validations and access should be handled within the plugin block. We will need to attach the configuration value to Javascript to build a modal pop-up in JS.
Step 4: Create a libraries.yml for defining the libraries for displaying the modal popup using bootstrap. Also, write a Javascript logic to render the announcement data into the modal. Follow these instructions to add JS to the Drupal 8 module.
Step 5: Create a menu link for easy navigation in the custom module according to these instructions.
Step 6: Place the created block in a region for the configurations provided in the custom configuration form.
Now you should be able to see the pop-up in the region for the specified path based on the configuration selection.
Creating site announcement banners using the Site Alert Drupal module
This Drupal module has been around since Drupal 7. The Site Alert Drupal module is lightweight and simple which lets you create a site-wide informational message. It allows you to specify a start date and expiration date, the severity of the alert message that is symbolized by the background color of the announcement and the content.
Setup –
1.Enable the Site Alert module
Configuration->System->Manage Site Alerts in path
2.Create the announcement/alert
admin/config/system/site-alerts
3. Place and configure the Site alert block from block layout according to your requirements
Structure -> blocks
https://www.drupal.org/">Drupal.org</a></em></strong>" data-entity-type="file" data-entity-uuid="c06704e0-bf09-441a-83be-5471339c4a91" src="/sites/default/files/inline-images/drupal-org.jpg" class="align-center">
