Adding your Instagram widget to your Dotclear website/blog 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.
WonderCMS is a completely free open-source Content Management System, or in other words, a free website builder. WonderCMS is a small and simple flat file CMS. Aimed to be extremely light and easy to install. Perfect for simple websites, landing pages or blogs.
For this tutorial we will discuss the Grid and the Slideshow display. As we go along, we will explain the differences. When adding your snippet code (or modifying it), always make sure the Source option is selected on the editor toolbar.
A. Editor used
The editor used, especially for adding Custom HTML as we are going to do, is the Summernote WYSIWYG editor for WonderCMS. To make sure you have this installed, click on SETTINGS and select the PLUGINS tab on the SETTINGS page.
Make sure that the SUMMERNOTE editor is installed and activated.
B. Theme used
For this tutorial we have used the Essence theme. The Essence theme is the default WonderCMS theme (2020). Using other themes will be basically the same process, it all depends on the way the pages are laid out.
C. Start
For this tutorial we accept that you already have a page or pages you want to add your widget to.
Log in to WonderCMS. Your main page (in our case the Home page) will be displayed.
Select the page you want to add your widget to on the main menu. For the first part of this tutorial, we have selected a page to display the Grid Display widget.
The page will open in edit mode, allowing you to add your snippet to your page.
Make sure the Source option is selected on the editor toolbar and insert your snippet code in the text box. The initial lines were created when the Heading and the Horizontal line was inserted. Add your snippet just after (or before) any content you have already on the page.
Click on the Source icon again to display a preview of the inserted snippet.
To save the edit you made, just click on the page outside of the edit box. This saves the changes and also publishes your page.
You will notice that the widget is displayed at 100% of the available webpage display area. If you want a smaller display, you can change the width by changing the width setting of the iframe, i.e., 65%.
Please Note - If you make the width too small, you will have difficulty to click on the item to display it in a lightbox. Your Social Media buttons will also not be displayed properly. Any width <65% will be too small.
This will then display as follows.
You can change the justification of the displayed widget by using the paragraph option on the editor toolbar.
Click outside the edit box to save. Changes are live and shown immediately.
If you click on any of the items in the Grid Display the item will be displayed in a lightbox.
D. Adding your Slideshow Display widget.
In the above we added the Grid Display widget snippet. Adding your Slideshow widget snippet follows the same procedure with a few possible changes which we will explain as we go along.
If you added the Pro Slideshow Responsive widget (with the default iframe width set at 100%), it will be displayed as follows.
You will notice that the widget is displayed left-justified.
Changing the width of the iframe has no effect on the width of the displayed widget but it moves it away from the left edge. The image width stays the same at 100%. This means that if you change the iframe width to 30%, the widget will be displayed as follows.
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 widget on your SnapWidget dashboard. The width and height are not important, you can set them to 200px each.
We are now 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:
This gives us control over the width, height and the justification of the widget. It also causes the non-responsive widget to become responsive.
The standard non-responsive widget snippet contains the following:
Make the following changes to the snippet.
Add 2 <div> blocks with the following styles (the ids are just for explanatory purposes for this tutorial, they are not used for any other purpose so you actually leave them out).
<div id=”Wrapper” style=”width: 35%; margin: auto”>(this sets the Wrapper to 35% of available width and center-justified. With this width setting we can change the width of the widget to any width we want). This ‘Wrapper’ width setting will change the width of your widget to 35% of the available area and the “margin: auto” parameter will display it center-justified. If you still want it to be displayed left-justified, just remove the “margin: auto” or change it to “margin: 0”.Please Note - As with the Grid display, if you make the width too small, you will have difficulty to click on the item to display it in a lightbox. Your Social Media buttons will also not be displayed properly. Any width <35% will be too small.
<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 to 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;).
This will then display the widget as follows.
If you click on any of the images in the slideshow it will be displayed in a Lightbox.
The widget is also responsive.