Adding your Instagram, Facebook or Twitter widget to your Drupal 9 website is easy. Follow these steps to create your widget.
Once you've created your widget, follow the appropriate steps below to add it to your website.
NB! First things first - Drupal 10 uses the CKEditor 5 editor to allow editing article, page and block content. There are a few options that you have to set up to allow Custom HTML such as <script>, <link> and <iframe> tags. If you do not set this up the editor will just strip these out of your snippet.
A. Set up CKEditor 5 to allow Custom HTML.
Log in to your Drupal 10 account.
On your Dashboard, select Configuration on the Admin toolbar.
Under Content Authoring, select Text formats and editors.
In the Name column, move the Full HTML set to the top of the list and click on Save. This will set the Full HTML option as the default selection when editing content.
Click on Configure under Operations to configure the Full HTML set.
On the setup page for Full HTML make sure that Administrator is selected under Roles.
Select CKEditor 5 under Text editor.
To allow proper formatting during content editing (when you insert your snippet) make the following changes to the Editor Toolbar under Toolbar Configuration.
(a) Below is a possible original Toolbar layout (this depends on how Drupal 10 was set up / used before you started adding the SnapWidget snippet).
Add the Text Alignment button to the Active toolbar if not already added. (Drag the items from the Available buttons group onto the Active toolbar formatting group). This will allow you to change the justification of your displayed widget (only applicable to the Grid Display widget).
The Active toolbar should now have the following items available.
Under Enabled filters make sure the following options are NOT selected:
Click on the Save configuration button at the bottom of the Configuration page.
CKEditor 5 has now been set up to allow adding Custom HTML in any Content area on your Drupal 10 website.
B. Adding your widget to your website.
Drupal 10 uses blocks to display content that can be displayed in regions (such as content, footer or sidebar) on your page. You can create Custom blocks, i.e. it allows the user to create blocks with Custom content which makes displaying your widget a lot easier.
See Working with blocks and Block module for documentation regarding the use of blocks in Drupal 10.
Drupal 10 also allows Custom HTML to be added directly to content such as basic pages and articles. For the purpose of this tutorial we will be looking at adding the widget directly to a web page via Custom HTML.
Note: In this tutorial the Drupal 10 website has been set up with the default Olivero 10.1.2 theme. The process for adding your snippet to any other theme is exactly the same. The only difference will be the resulting displayed website.
C. Adding your Grid Display Widget to your website.
Log in to your Drupal 10 account and on your Dashboard, select Content on the Admin toolbar.
Click on Edit for the Content item (in this case, Basic page) you wish to edit on the displayed Content list.
On the Edit Basic Page form, make sure the Source option is selected to allow adding Custom HTML.
Insert your snippet in the Body part.
Click on the Source button again to return to the normal editor to preview your widget (please note that this can sometimes differ from the actual display on your live webpage).
Your widget will display as follows on your live website.
The widget will be displayed full width, i.e. the full available area on your web page. This is due to the iframe width set to 100%. If you want to display the widget smaller you can change the width to e.g. 50%. Please note that if you make the widget width to small the Social Media buttons won’t be displayed and you also won’t be able to click on an image to display it in a lightbox.
This will display the widget smaller but it will be left justified.
If you want to center the widget in the display area, return to the editor but do not click on the Source button (the preview will be displayed). Select the HTML object and click on the Align center button on the Formatting toolbar.
Your widget will now be displayed center justified.
Clicking on any of the images in the widget will display the image in a Lightbox.
D. Adding your SlideShow Display Widget to your website.
If you added the standard responsive SlideShow widget, it will be displayed as follows.
The widget will be displayed at ~30% of available area and left justified. The size as well as the justification cannot be changed. If this is OK for you, skip the following steps.
To enable us to change the width (and height to keep it at a 1:1 ratio) we will have to make some changes to our widget.
Create a non-responsive SlideShow widget on your SnapWidget dashboard. The width and height are not important, you can set them e.g. to 200px each.
The non-responsive SlideShow widget will display as follows.
We are going to add some HTML and CSS code to our snippet to create an area where the snippet will be displayed. The area will be basically as follows:
Make the following changes to the snippet.
Add 2 <div> areas with the following styles (the ids are just for explanatory purposes for this tutorial, they are not used for any other purpose so you can actually leave them out).
<div id=”wrapper” style=”width: 40%; margin: 0 auto;”>
This sets the wrapper to 40% of available width and center-justified. With this width setting we can change the width of the snippet to any width we want but please note that if you make the width < 30% the social media buttons won’t be displayed properly on the images. This all depends on the screen size where your page is displayed on.
<div id="container" style="top: 0; height: 0; width: 100%; padding-bottom: 100%; overflow: hidden; position: relative; margin: 0 auto;">
This sets the area used to display the iframe at 100% of the wrapper width as well as height = 100% of the width.
Remove the width and height attributes of the style part of the iframe and replace them with the indicated attributes
left: 0; width: 100%; height: 100%; position: absolute;
Your widget will be displayed as follows with a Wrapper width=40%. The widget will also be responsive.
Note: Remember if you make the size of the widget too small it won’t be able to display the Social media icons and you will also not be able to click on an image to display it in the Lightbox.
Clicking on any of the images in the grid will display it in a Lightbox display.
