Adding your Instagram, Facebook or Twitter widget to your Joomla! 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.
A. Editors used in Joomla! 4.3.x.
The following options are available for editors used in Joomla! 4.3.x
TinyMCE,
CodeMirror and
None
The default editor used in Joomla! 4.3.x is TinyMCE and by default doesn’t allow iframes, JS scripts and links to stylesheet (CSS) files. To allow iframes, JS scripts and stylesheet links you will have to change the default editor to CodeMirror. CodeMirror allows all the above items.
Log in to your Joomla! website.
Set CodeMirror as your default editor.
Select System on the Home Dashboard toolbar.
Select Global Configuration under Setup on the System Dashboard page.
Select the Site tab and under Site settings change the Default Editor to
Editor - CodeMirror.
Click on Save & Close.
Note: If an error occurs when saving (Could not write to the configuration file) then you will have to set write permissions on the configuration.php file in the top folder on your hosting server. If you have access to your Joomla! folder structure you can do it yourself else you will have to contact your Service Provider to do this for you. The following was done via File Manager in the webhost Control Panel. Set write permission for Owner only.
Now you will be able to add your widget (which contains an iframe, JS scripts and a link to a CSS file) to your Joomla website.
B. Adding your Grid Display widget to your Joomla! website.
Log in to your Joomla! account.
On the Home Dashboard, select Articles on the Content list.
Select the Article you want to add your widget to in the list of available articles.
Insert widget below existing content (if any) of the article.
Click on Save and view your website. This will display the widget as follows.
Due to the iframe width setting of 100%, the widget fills the whole available display area. If you change the width to e.g. 75%, the widget will display smaller but will be left justified.
To center the widget on your page, you can add a <div> tag, i.e., encapsulate the widget snippet in a <div> area. You can also set the width of the displayed widget in the <div> style setting. Remember if you make the size of the grid 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. The margin setting sets the iframe to center justification.
When using this setting, leave the iframe width at 100%.
Your widget will then be displayed as follows. You can click on the items and also select any of the 3 Social Media buttons
Clicking on any of the images in the grid will display it in a Lightbox display.
To end the editing process, click on Save and Close.
C. Adding your SlideShow Display widget to your Joomla! website.
If you added your Standard responsive SlideShow widget, it will be displayed as follows on your website.
The widget will be displayed 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: 30%; margin: 0 auto;”>
This sets the wrapper to 30% 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.
<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=30%. The widget will also be responsive.
Clicking on any of the images in the grid will display it in a Lightbox display.
