Adding your Instagram, Facebook or Twitter widget to your GRAV 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.
1. Some info on GRAV
GRAV is a Fast, Simple, and Flexible file-based Web-platform. The built-in editor is based on Markdown but also allows HTML coding and it allows scripts, links and iframes. In this tutorial I have used HTML because it makes it easier to format text.
Adding your widget to any GRAV page or blog post is done in exactly the same way. Just select the page (or blog post page) that you want to add the widget to.
2. Ensure your editor is set up correctly
Log in to your GRAV website.
Select Configuration.
On the System tab under Content, make sure Markdown and Twig are both selected.
Click on Save (top right-hand) to save the configuration.
3. Adding your Grid Display widget
Select Pages. You will see an indicator of how many pages do exist in your GRAV web site - this includes blog posts as these are handled as normal pages in GRAV.
Your pages will be listed as follows. If you do have child pages or posts in your blog, they will be indicated as shown.
Select the page you want to edit.
You can select Normal or Expert editing. For this tutorial we will stick to Normal.
Select the Content tab
Insert your snippet below any existing content. Note that the warning refers to the <link>, <script> and <iframe> tags which are seen as ‘dangerous_tags’.
Although the Preview option doesn’t display the widget exactly as it will be on your live page, you can click on the Preview button to see what the widget would look like. Remember to click on the Editor button when you want to edit the code again.
To see the real live display, click on Save and view your page in a web browser.
You will notice that the widget fills the whole width of the page which is OK if you want it this way. If you want to reduce the width of your widget you can do this via the width setting of the iframe in your snippet, i.e. width:50%; "></iframe> will have the following effect.
This will then display the widget left justified on your page which is perhaps not so pleasing to the eye.
To centre the widget on your page without modifying the iframe width, 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 also 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.
<div style="width:50%; margin:0 auto; text-align:center;">
Clicking on any of the images in the grid will display it in a Lightbox display.
4. Adding your SlideShow Display widget
Adding your SlideShow widget is a little bit different from the Grid Widget.
Select your SlideShow page.
Adding a Standard responsive SlideShow widget
The widget will be displayed small and left justified with the Social Media icons displayed properly. 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 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 id’s 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: 100%; margin: 0 auto;”>
This sets the wrapper to 100% 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 < 40% 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 following:
left: 0; width: 100%; height: 100%; position: absolute;
Your widget will be displayed as follows with a Wrapper width=100%. The widget will also be responsive.
Change the Wrapper width to 40%. 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.
Your widget will be displayed as follows with a Wrapper width=40%.
Clicking on any of the images in the grid will display it in a Lightbox display.
That's it.
Enjoy adding your widgets to GRAV.