To start managing your website the first step is to login to your website. The website address to edit your website is always your main website and “/admin” at the end i.e. http://mycommunitywebsite.onesuffolk.net/admin
Simply go to this address and then insert your username and password and click “login”
Widgets are nicely formatted boxes that display some form of information – usually in a left or right hand navigation bar. Within the new One Suffolk Silverstripe software there are a variety of different types of widgets you can have on your website. These are listed below with descriptions against them of they are and how you need to work with them.
Requires no further setup or interaction with parts of the system – simply add and go.
Requires no further setup or interaction with parts of the system – simply add and go.
Requires no further setup or interaction with parts of the system – simply add and go.
Requires you to setup the feed in the Services section first
Requires you to add a shortcode to the form in the content area of the page
Requires you to setup the feed in the Services section first
Requires you to setup the feed in the Services section first
Some small setup is required in the widget – simply link to the poll you want to link to
Requires no further setup or interaction with parts of the system – simply add and go.
Requires you to setup the feed in the Services section first
Some small setup is required in the widget – simply link to the gallery you want to link to
Requires no further setup or interaction with parts of the system – simply add and go.
Some small setup is required in the widget – simply add the address
Requires you to change a number of settings in the widget
Requires no further setup or interaction with parts of the system – simply add and go.
Requires no further setup or interaction with parts of the system – simply add and go.
Some small setup is required in the widget – simply add the video website address
Add the service first and then choose the feed in the widget setup
Requires no further setup or interaction with parts of the system – simply add and go.
Requires no further setup or interaction with parts of the system – simply add and go
Some small setup is required in the widget – simply add the social media and feeds you require
Some setup within the widget is required. Copy and paste the HTML code in that you require.
Widgets are set in what we call “Widget Areas”. These are groupings of 1 or more widgets that will get displayed together - think of a widget area as a container for the widgets.
A widget area can be displayed on any page on your website and they can be used multiple times. Widgets can only be displayed on the left or right hand side of a page, so if you see a section of blocks down the left or right hand side then this will be a widget.
To access widget areas click on "Elements" on the left hand side and then click on "Widget Areas" along the top.
To then access a specific widget area click on one of them in the list on the screen (as shown below)
Once you have clicked on them you will then see all the widgets you have in that widget area.
To add a new widget area just click on the "Add Widget Area" button on the screen above and give your Widget a name and start adding widgets to them.
Before adding widgets, if you are unsure which page uses which widget area then simply click on “Elements” down the left hand side and then on the “Elements” page click on “Widget Areas” and then click on the widget area you want to check. As shown on the images below, from here, click on the "show pages using this widget area" link and then on the screen it will show you all the pages on your site using that widget area. If it says "Widgets hidden by template" next to the listing then it means that the widget area is set on the page but the page itself is a full page layout so therefore won't get displayed.
I won’t detail how to add every single Widget as most of them follow the same logic and require no further changes once added but I will give instructions on the core things you need to remember and to show you specifically how to add some of the more critical widgets.
In this version of the One Suffolk Silverstripe software, one of the big differences is that you can choose to have a side bar on the left or right hand side or you can have no sidebar at all – and this is completely changeable on a page by page basis. This means that you are not limited to having side bars or no side bars on the whole site. This gives you a lot more flexibility.
This is important to know because widgets only work in side bars. If you do not set a page to have a sidebar in the “Page Settings” tab (which was detailed in our Pages guide) then widgets will not appear.
To add a widget to any of the widget areas click on “Elements” down the left hand side and then on the “Elements” page click on “Widget Areas” along the top and then you will see a screen like the one below.
To add or remove widgets to these simply click on the one you wish to edit and then you will see any widgets you have in your widget area. To add a new one click “Add Widget” and then you will be greeted with a screen like on the next page.
From here you need to give your Widget a name in the “Widget Heading” box and then if you want for the website to show this name select the “Show Widget Heading” box. If you want the widget to actually work then you will also need to tick the “Active Widget” box.
The final thing you need to is choose the widget you want to add to the widget area by clicking on the “Choose Field Type” dropdown (think of this as "choose widget") and selecting the one from the list. In this example we will add the “Asset Listing” widget to the widget area. The Asset Listing is what a number of Parish Councils use to display a set of files in a set folder on a website down the left hand or right hand side.
Ensure you click “Create” after you have selected “Asset Listing”.
The Asset Listing widget has a number of unique settings – like the ones shows in the screen shot on the next page.
One new feature in this version of the One Suffolk Silverstripe software is the ability to either choose all the files in a folder (like the old software) or you can pick and choose which files from any set of folders you want to add to your box on the website. To set this, click on the “Media to show” dropdown and select “Choose Assets to show” if you want to pick and choose your files.
If you want to just list all of the files in a folder , like it does in the old version of the software then select “All assets in a folder” and select the folder on your Files section which you want to use in the “Folder” box below.
If you do want to pick and choose your files and you have set the “Choose Assets to show” option then the bottom section of the page is where you add your files. You can either just add them from your computer or from your File Store.
If you want to upload some from your computer click “From Your Computer” and then you will be greeted by a box that shows your computer. From here find your files and click Open to upload them. If you want to upload multiple files at once then the new upgraded system allows you to do this. Simply click on the first item you want to upload, then hold down the “CTRL” key on your keyboard and then select all the other files you want to upload and then click Open.
If you want to pick files from the File Store then click “From Files” and then a box with a view of the File Store will appear. From here click on each item you want to add to your image gallery and click “attach files”.
You can also add multiple files at once in the File Store, simply click the first item you want to add then hold down the “CTRL” key on your keyboard and then select all the other files you want to upload and then click “attach files”.
Click "Save" when done.
Setting your widget area on the page
Now that you have created your widget area and widgets the final task is to actually set this on the page so that it displays your widgets. Please Note: You don't have to do this step if you are just adding a widget to an existing area that is already set on a page.
To do this, click on "Pages" on the left hand side and then click on the page you want to display your widget area (and widgets) and then click on "Page Settings". From here ensure that you have set the "Page Layout" to "Sidebar Left" or "Sidebar Right" and where it says "Choose Widget Area" select the widget area you want displayed on your page. Once you have completed this, click "Save and Publish" when done.
Another widget example we could use is if you wanted to add a widget that displayed your organisation’s twitter feed on it. With the Twitter, Instagram, Facebook & Mailchimp widgets you first have to set up the feed on the “Services” option down the left hand side. Click on this and then along the top you will see tabs for each one of these.
Click on “Twitter” and then click the “Add Twitter Feed” button. On the page that comes up (see below screenshot) give your feed a title and then enter in the TwitterID of the twitter page of your organisation (usually this is the bit after the @ in your twitter name.
Click “Create”
Once you have created your feed on the site you can then add the widget to your site. To do this, click “Add Widget” and then From here you need to give your Widget a name in the “Widget Heading” box and then if you want for the website to show this name select the “Show Widget Heading” box. If you want the widget to actually work then you will also need to tick the “Active Widget” box.
The final thing you need to is choose the widget you want to add to the widget area by clicking on the “Choose Field Type” dropdown and selecting “Twitter Widget” from the list. Click “Create” and the final step is to set which feed you want to display as you can setup multiple feeds. In the “Choose Feed” dropdown select the feed and click “Save” and then your website will show your organisation’s twitter feed on the left or right hand bar of the page you choose to show your widget area.
Setting your widget area on the page
Now that you have created your widget area and widgets the final task is to actually set this on the page so that it displays your widgets. Please Note: You don't have to do this step if you are just adding a widget to an existing area that is already set on a page.
To do this, click on "Pages" on the left hand side and then click on the page you want to display your widget area (and widgets) and then click on "Page Settings". From here ensure that you have set the "Page Layout" to "Sidebar Left" or "Sidebar Right" and where it says "Choose Widget Area" select the widget area you want displayed on your page. Once you have completed this, click "Save and Publish" when done.
One Suffolk used to provide an official Instagram widget but due to changes Instagram have made this will no longer be possible. However, there is an alternative method of adding your own Instagram widget to your site - to add it to your site follow the instructions below.
To add the Instagram widget to any of the widget areas click on “Elements” down the left hand side and then on the “Elements” page click on “Widget Areas” along the top and then you will see a screen like the one below.
To add or remove widgets to these simply click on the one you wish to edit and then you will see any widgets you have in your widget area. To add an instagram widget click “Add Widget” and then you will be greeted with a screen like on the next page.
Type in the word "Instagram" into the "Widget Heading" box, tick the “Show Widget Heading” box. If you want the widget to actually work then you will also need to tick the “Active Widget” box. On "Choose Field Type" you need to select the "HTML Widget" and then click "Create". Once you have done that you then need to visit an external site - https://instawidget.net/generate. (keep the one suffolk site open)
Once you are on this site you simply need to type in the username of your Instagram account in the username box on this page (shown below).
Once you have done this click "Preview" and then click "Get Embed Code" and copy and paste all the code in the "Widget Content" box into your One Suffolk page that should still be up. Click "Save" when you are done and your widget should be setup.
Setting your widget area on the page
Now that you have created your widget area and widgets the final task is to actually set this on the page so that it displays your widgets. Please Note: You don't have to do this step if you are just adding a widget to an existing area that is already set on a page.
To do this, click on "Pages" on the left hand side and then click on the page you want to display your widget area (and widgets) and then click on "Page Settings". From here ensure that you have set the "Page Layout" to "Sidebar Left" or "Sidebar Right" and where it says "Choose Widget Area" select the widget area you want displayed on your page. Once you have completed this, click "Save and Publish" when done.
With a Facebook widget you first have to set up the feed on the “Services” option down the left hand side. Click on this and then along the top you will see a Facebook tab.
Click on “Facebook” and then click the “Add Facebook Feed” button. On the page that comes up give your feed a title and then enter in the Facebook website address of the facebook page of your organisation (copy and paste it from the Internet) into the "Facebook ID" box. (see screenshot below)
Click “Create”
Once you have created your feed on the site you can then add the widget to your site. To do this, click “Add Widget” and then From here you need to give your Widget a name in the “Widget Heading” box and then if you want for the website to show this name select the “Show Widget Heading” box. If you want the widget to actually work then you will also need to tick the “Active Widget” box.
The final thing you need to is choose the widget you want to add to the widget area by clicking on the “Choose Field Type” dropdown and selecting “Facebook Feed Widget” from the list. Click “Create” and the final step is to set which feed you want to display as you can setup multiple feeds. In the “Choose Feed” dropdown select the feed and click “Save” and then your website will show your organisation’s Facebook feed on the left or right hand bar of the page you choose to show your widget area.
Setting your widget area on the page
Now that you have created your widget area and widgets the final task is to actually set this on the page so that it displays your widgets. Please Note: You don't have to do this step if you are just adding a widget to an existing area that is already set on a page.
To do this, click on "Pages" on the left hand side and then click on the page you want to display your widget area (and widgets) and then click on "Page Settings". From here ensure that you have set the "Page Layout" to "Sidebar Left" or "Sidebar Right" and where it says "Choose Widget Area" select the widget area you want displayed on your page. Once you have completed this, click "Save and Publish" when done.
To add a Google Maps widget click on “Elements” down the left hand side and then click on “Widget Areas” along the top.
To add or remove widgets to these simply click on the widget area you wish to edit and then you will see any widgets you have in your widget area. To add a new one click “Add Widget” and then you will be greeted with a screen like the one below.
From here you need to give your Widget a name in the “Widget Heading” box i.e. Map, and then if you want for the website to show this name select the “Show Widget Heading” box. If you want the widget to actually work then you will also need to tick the “Active Widget” box.
The final thing you need to is choose the widget you want to add to the widget area by clicking on the “Choose Field Type” dropdown (think of this as "choose widget") and selecting the one from the list. In this example we will choose “Google Maps” so that it adds this widget to the widget area.
Click "Create" when you have done this.
Once you have clicked create you then need to put the Address you want the map to in the "Address" box. Usually this is just the post code but you can enter the full address in here too. Once you are happy with this click "Save"
Setting your widget area on the page
Now that you have created your widget area and widgets the final task is to actually set this on the page so that it displays your widgets. Please Note: You don't have to do this step if you are just adding a widget to an existing area that is already set on a page.
To do this, click on "Pages" on the left hand side and then click on the page you want to display your widget area (and widgets) and then click on "Page Settings". From here ensure that you have set the "Page Layout" to "Sidebar Left" or "Sidebar Right" and where it says "Choose Widget Area" select the widget area you want displayed on your page. Once you have completed this, click "Save and Publish" when done.
Note: The recent posts widget will display the latest 5 news or events items in the system.
To add a Recent Posts widget click on “Elements” down the left hand side and then click on “Widget Areas” along the top.
To add or remove widgets to these simply click on the widget area you wish to edit and then you will see any widgets you have in your widget area. To add a new one click “Add Widget” and then you will be greeted with a screen like the one below.
From here you need to give your Widget a name in the “Widget Heading” box i.e. Map, and then if you want for the website to show this name select the “Show Widget Heading” box. If you want the widget to actually work then you will also need to tick the “Active Widget” box.
The final thing you need to is choose the widget you want to add to the widget area by clicking on the “Choose Field Type” dropdown (think of this as "choose widget") and selecting the one from the list. In this example we will choose “Recent Posts” so that it adds this widget to the widget area.
Click "Create" when you have done this.
Once you have clicked create you then need to decide whether it's the latest news (blog posts) or events you want to display in your widget. In the "Choose Posts to show" box, click either "Blog Posts" or "Events" and then on the "Amount of posts to show" box type in the number of news or events items you want to show in your widget. Once you have done click "Save".
Setting your widget area on the page
Now that you have created your widget area and widget the final task is to actually set this on the page so that it displays your widgets. Please Note: You don't have to do this step if you are just adding a widget to an existing area that is already set on a page.
To do this, click on "Pages" on the left hand side and then click on the page you want to display your widget area (and widgets) and then click on "Page Settings". From here ensure that you have set the "Page Layout" to "Sidebar Left" or "Sidebar Right" and where it says "Choose Widget Area" select the widget area you want displayed on your page. Once you have completed this, click "Save and Publish" when done.
To add a weather widget click on “Elements” down the left hand side and then click on “Widget Areas” along the top.
To add or remove widgets to these simply click on the widget area you wish to edit and then you will see any widgets you have in your widget area. To add a new one click “Add Widget” and then you will be greeted with a screen like the one below.
From here you need to give your Widget a name in the “Widget Heading” box i.e. Weather, and then if you want for the website to show this name select the “Show Widget Heading” box. If you want the widget to actually work then you will also need to tick the “Active Widget” box.
The final thing you need to is choose the widget you want to add to the widget area by clicking on the “Choose Field Type” dropdown (think of this as "choose widget") and selecting the one from the list. In this example we will choose “HTML Content Widget” so that it adds this widget to the widget area.
Click "Create" when you have done this.
On the next screen you will need to go to the website below and generate your code to make the widget work
On this website ensure click in the "Select Location" box and type in the postcode of your location in the "location" box i.e. Ip2 0HH and then click "Get Code". To finish this part of the process, copy and paste the code from the box into the "Widget Content" box and then click "Save"
Setting your widget area on the page
Now that you have created your widget area and widget the final task is to actually set this on the page so that it displays your widgets. Please Note: You don't have to do this step if you are just adding a widget to an existing area that is already set on a page.
To do this, click on "Pages" on the left hand side and then click on the page you want to display your widget area (and widgets) and then click on "Page Settings". From here ensure that you have set the "Page Layout" to "Sidebar Left" or "Sidebar Right" and where it says "Choose Widget Area" select the widget area you want displayed on your page. Once you have completed this, click "Save and Publish" when done.
To add a navigation widget to a left hand side bar or right hand side bar. Please follow the instructions below. You will need to know which widget area is shown on the page you want to add this widget to and to do this simply go to "Pages", find the page you want to check and then go to the "More Settings" tab and on that screen it will tell you which widget area is set on the page by looking in the "Choose Widget Area" dropdown. Once you know that then you can go to “Elements” down the left hand side and then click on “Widget Areas” along the top and select the widget area you need to from the list. Once you are in the right widget area click “Add Widget” and then you will be greeted with a screen like the one below.
From here you need to give your Widget a name in the “Widget Heading” box i.e. Sub Pages and then if you want for the website to show this name select the “Show Widget Heading” box. If you want the widget to actually work then you will also need to tick the “Active Widget” box.
The final thing you need to is choose the widget you want to add to the widget area by clicking on the “Choose Field Type” dropdown (think of this as "choose widget") and selecting the one from the list. In this example we will choose “Site Navigation” so that it adds this widget to the widget area.
Click "Create" when you have done this.
Once you have clicked create it will give you a further dropdown where you can choose whether you want to just show "child pages" i.e. those that are under the page you are adding navigation widget to, "full site" which will show your whole site structure or "Active menu items" which will show your whole site structure but only those pages that are not hidden in anyway. Simply select whatever you require and then click "save" and this will be active.
To delete a widget, click on “Elements” down the left hand side and then on the “Elements” page click on “Widget Areas” along the top. From here click on the widget area you want to delete a widget from and then click on the red cross next to it.
Most widgets we have developed can simply be added to the widget area and this is all you need to do but some do need additional setup like in the case of the Asset Listing, Twitter, Facebook, Instagram, Mailchimp ones.
Or alternatively like the Gallery widget they work with other parts of the system i.e. the “Image Galleries” section under “Elements”
If you have an existing widget area on a page then adding a widget is simply a matter of adding a new widget to the widget area but you will need to know which widget area is shown on the page you want to add this widget to and to do this simply go to "Pages", find the page you want to check and then go to the "More Settings" tab and on that screen it will tell you which widget area is set on the page by looking in the "Choose Widget Area" dropdown. Once you know that then you can go to “Elements” down the left hand side and then click on “Widget Areas” along the top and select the widget area you need to from the list.
Carousels are a slide show set of images usually used on the Home Page of your site.
It is quite straightforward to add a Carousel to your home page. Firstly you need to add that Carousel and then on your Home Page Settings you need to ensure you have set this to be displayed on there.
Adding the Carousel
To add a carousel click on “Elements” down the left hand side and then on the “Elements” page click on “Carousels” along the top and then it will take you to a page which lists any Carousels you may have. From here click “Add Carousel” and then you will be greeted with options shown in the image below.
Give your Carousel a Title by typing into the “Title” box. Set whether you want your Carousel to move your slides in standard slideshow mode or whether you want them to fade out by selecting the appropriate option on the “Slide Animation” dropdown and also set a time in milliseconds in which you want the slides to change (transition) by typing in a figure in the “Slide Transition” box. We recommending using the figure 6000 which is 6 seconds but you have freedom to change this to whatever – just remember this figure is in milliseconds.
We also recommend you select the “Show Slide Controls” and the “Show Slide Indicator” tick boxes as this will allow the user to move through your Carousel at their own pace if they wish. Once you have done all of this click “Create”. Once you have done this a new section will be added to your screen giving you the ability to add your slides. To do this click “Add Slide” and then you will see a screen like the one below.
On this screen, if you want text to overlay your image then type something into the “Title” and “Slide Text” boxes. If you don’t want text to overlay your image we still recommend giving your slide a Title so you can find it on the list easily but if you do this then tick the “hide slide text” box and then it won’t appear on your image. Likewise if you want your slide to link to another website or page on your website then type text into the “Link/Button Text” and “Link Button URL” fields. Please note on the Link Button URL field you will need to enter the full website address to link to i.e. http://www.bbc.co.uk. You can even set whether you want the slide text aligned either left or centre within the slide by choosing the appropriate option on the “Slider Text Alignment” dropdown.
The final element of this is to add your image. Choose whether you want to upload a new image from your computer or from the File store. If you want to upload some from your computer click “From Your Computer” and then you will be greeted by a box that shows your computer. From here find your files and click "Open" to upload them.
If you want to pick files from the File Store then click “From Files” and then a box with a view of the File Store will appear. From here click on each item you want to add to your carousel and click “attach files”.
Once you have done all this click “Create”
Once you have created 1 slide in your carousel you can then go back to your Carousel and duplicate the process you did above to add further new ones. The easiest way of doing this is by clicking on the name of the Carousel (in a blue link) at the top left of the screen and you will be taken back to your Carousel. Confirmation of how you add additional slides to your Carousel is also shown below.
Setting the Carousel to show
The final stage in this process is to actually set the Carousel to show on your page (it can be shown on any page, not just the Home Page).
To do this click “Pages” along the left hand side, click on your Home Page (for example), click on “Page Settings”, ensure you click “Show Carousel” and then underneath that option select the Carousel you want to show by using the “Choose a Carousel” dropdown. Click “Save and Publish” when done.
Editing a Carousel
To edit a carousel click on “Elements” down the left hand side and then on the “Elements” page click on “Carousels” along the top and then it will take you to a page which lists any Carousels you may have. From here click on the Carousel you want to edit. You will then be taken to a screen where you will see all the different Carousel slides you have. From here you can then choose to add additional ones or remove the current one or indeed edit the existing one.
To edit the existing one, click on the white edit symbol (shown below)
From here you can change the text that overlays your slide, change the links that the slide links to and even replace the image with something else. If you want to replace the image then click “Choose Another Image” and this will take you to the place where you can either pick from the File Store or you can upload a new one.
Adding a slide to the Carousel
To add a slide click “Add Slide” and then Choose whether you want to upload a new image from your computer or from the File store. If you want to upload some from your computer click “From Your Computer” and then you will be greeted by a box that shows your computer. From here find your files and click “Open” to upload them.
If you want to pick files from the File Store then click “From Files” and then a box with a view of the File Store will appear. From here click on each item you want to add to your carousel and click “attach files”. If you want your slide to have text overlaying on it then type that into the Title box. Once you have done all this click “Create”
Deleting a slide from the Carousel
To delete a slide, simply click the red cross next to the slide you want to delete.
Changing where the Carousel shows and the size of the Carousel
Within the One Suffolk system you can now even change the position of the Caorusel within a page. You have the default option of setting it to appear "Above the Title Bar" but you can also set it to "Below the Title Bar" or "Above the Content". This can be changed by going to “Pages” along the left hand side, click on your Home Page (for example), click on “Page Settings” and then where it says "Select Carousel Position", click on this dropdown and select the preferred option.
You can also change the size of the Carousel using 3 different options. You can use the default option of "Tall" or "Medium" or "Short". These options are available using the same instructions as above except you need to click on the "Carousel Height" dropdown and select the preferred option. Click “Save and Publish” when done.
There is an important distinction in this system between the Image Gallery Page type and Image Galleries. Image Galleries are what are used in Widgets, whilst the Image Gallery Page type is what is used if you want a full screen image gallery to be shown on a page.
Adding an Image Gallery (as a page)
To add an Image Gallery to your website as a page (like the one shown below) then please follow these instructions.
Click on "Pages" down the left hand side.
Click on "Add New" and then you will be greeted by a screen like the one below.
From here choose where you want to create the page i.e. where do you want it to appear in the menu. If you want it to appear in the top menu then choose "Top Level", whilst if you want it to appear as a sub page underneath another page then choose "Under Another Page" and select the page from the drop down that you want it to appear under.
Also on this page you will need to select "Gallery Page" from under the second set of options. Once you have done this click "Create" and you will be greeted with a screen like the one below.
On this screen, in the "Page Name" box type in a relevant page name for your image gallery and do the same for the "Navigation Label" box and once you are happy with that then start adding your images in the "Choose Images" section. From here you can choose to upload new images at this point by using the "From Your Computer" option or you can add images to your image gallery that have already been uploaded by using the "From Files" option. If you use the "From Your Computer" option then once you click on this you will be greeted by a screen which shows your computer. From here, choose the images you want to upload and then double click on them to upload and add the image to your gallery. Please note if you upload them at this point they will go to the default "Uploads" folder. We recommend that you always upload files or images before you start to work with them. If you choose the "From Files" option then you will be greeted by a screen that shows you all the images already uploaded. To add one of these to your gallery, simply click on the specific image and then click "Attach image" and your image will be added to the gallery. Continue adding images until you are happy with the ones you have added.
Once you are happy with your gallery click "Save and Publish" to put your gallery live onto your site. If you still wish to edit your gallery then simply click "Saved" and continue working on it.
Once you have published your gallery then if you ever want to edit it further, click on "Pages" down the left hand side, choose your gallery page and then in the "Choose Images" section simply start adding new images to it by using the "From Your Computer" option or "From Files" option.
Captions & Titles
If you want to add a caption to display under the image on the gallery page then ensure that in the Image Properties (click on the "edit" button on the image you have uploaded) that there is some text in the caption box and then click "save" at the bottom. Once you have done this you need to ensure you tick the "show captions" box underneath all your images and then click "Save and Publish".
If you set a piece of text in the "title" field then this will be displayed on the image. This may help inform visitors about what the image is about. To get to the "Title" field on your gallery page simply choose the image you want to add the caption on and then click "edit" and then type in the text you want in the "Title" field.
Adding the Image Gallery (as a widget down the left or right hand side)
To add a image gallery click on “Elements” down the left hand side and then on the “Elements” page click on “Image Galleries” along the top and then it will take you to a page which lists any Image Galleries you may have. From here click “Add Image Gallery” and then you will be greeted with options shown in the image below.
Simply give your gallery a title by typing into the “Title” box and then you can go straight into adding your images.
Choose whether you want to upload a new image from your computer or from the File store. If you want to upload some from your computer click “From Your Computer” and then you will be greeted by a box that shows your computer. From here find your files and click "Open" to upload them. If you want to upload multiple images at once then the new upgraded system allows you to do this. Simply click on the first item you want to upload, then hold down the “CTRL” key on your keyboard and then select all the other images you want to upload and then click "Open".
If you want to pick files from the File Store then click “From Files” and then a box with a view of the File Store will appear. From here click on each item you want to add to your gallery and click “attach files”. You can also add multiple images at once in the File Store, simply click the first item you want to add then hold down the “CTRL” key on your keyboard and then select all the other files you want to upload and then click “attach files”.
Once you have done all this click “Create”
To then use your image gallery on a page, using our previous instructions on adding widgets and add the “Image Gallery” widget to the “Default Widget Area” and within this ensure you set the right image gallery to show using the “Choose Gallery” dropdown.
Forms (for users to fill in and complete, and the results to be emailed to a set email address) can be setup on your One Suffolk website. There are 2 elements to this process – setting up the form and then adding it to your page.
Creating your form
To add a form, click on “Elements” down the left hand side and then on the “Elements” page click on “Forms” along the top and then it will take you to a page which lists any forms you may have. From here click “Add Form” and then give your form a title by typing in text into the “Title” box you and then finally click “Create” and then you will be greeted with options shown in the image below.
Once on this screen, click “Add Form Field” to add a field to your form. Once you have done, a following screen will ask you for the “Title” or Name of the field and also ask you what field type you want it to be. You can select which field type by clicking on the “Choose Field Type” dropdown and selecting from the list. Please note the Title will also be the "Placeholder" text of your field on the form that the user sees.
The field type list includes 10 different options – listed below.
Checkbox – Select one box from many
Date/Time – Date & Time Field
Dropdown – Select from a drop down list
Email Address – Limited to Email addresses
Multiple Select – Select 1 or many from a sect of options
Numeric – Number only field
Phone Number – Phone Number only field
Read Only – Displayed a non editable field to the user
Text Area – A large area for users to input text
Text – A small character restricted area for users to input text
Once you have chosen your field, click “Create”
Depending on the field type it may then prompt you with additional options about that field. Those screens should be self explanatory but because there are so many it is not possible to detail them all in this guide.
Adding your form to your page
Now you have created your form you then need to add it to the page.
First, we recommend that you find your “Shortcode”. This can be found by going to the main “Forms” section (Click on Elements and then Forms) where all your forms are stored and your “Shortcode” will be listed next to the form in question.
Once you have the “Shortcode”, you need to add a text area to the page you want to add the form to. To do this, click on “Pages” along the left hand side and then select the page you want to add the form to.
Once on there you will need to add a new “text area” by using the controls below. We recommend clicking on the “Single Column” option on the left of the 3 black options. On here click the + symbol and then your text area will be added to the page.
Now you have your text area you can then add your form to it. Copy and paste the “Shortcode” into the text area you created and then click "Save and Publish" and then your form will be added to your page.
When a user submits their form the email set in the “Email Settings” tab should get a response. However, you can also check any submissions by clicking on “Elements” down the left hand side and then by clicking on “Form Submissions” along the top.
Adding a Captcha to your page
To add a Captcha to your page to help prevent unwanted spam go to your form, there are 2 elements to this process. Firstly, go to your form by clicking on “Elements” on the left hand side and then “Forms” along the top. Once you have clicked into the form click “Add Form Field” and then select “Captcha field” and give it a title. Click “Save” when you are done.
Secondly, you need to sign up for a Google "Recaptcha" account. Go to https://www.google.com/recaptcha/admin and sign up to a Google account if you don't already have one. Once into the Recaptcha page, click the "+" symbol and complete the form that is presented to you. Within this, you will need to give it a label i.e. the name of your website, select "reCaptcha v2", type in the website address of your main site i.e. mycommunity.onesuffolk.net into the "domain" box and then accept the terms and conditions. Once you have done this, click "Submit" and you will then be taken to a page which will list the "Secret API Key" and "Website Key". Copy these and then go to "Settings" on the left hand side of your website editor, and click on "Recaptcha" at the top and paste these into the relevant boxes. Once you have done this click "Save" at the bottom. Your Recaptcha should then work.
Form Notification Emails
As part of the forms system, you can also get notifications by email when a form has been completed. The email is not automatically setup, so you do actually need to set this up to receive these emails. To set the email notifications up, simply open your Form up from "Elements" and “Forms” along the top and then once in the form, click on "Email Settings" along the top. You will be greeted with a screen like the one below.
From here, you need to first type in the email address that you want form completion emails to go to, into the "Send Emails to" box. Once you have done that, you should notice a section called "Available Variables". We recommend simply copying and pasting all of the text under this heading into the "Email Template" box. This will ensure that you get the results of all fields from the form.
The final thing you need to do is add a small element to improve the formatting of the email that you get back - as standard it may all come in one line, rather than seperate lines. To get round this, we recommend adding "<br>" (without the speechmarks) at the end of the line as per the screenshot. Once you have done this, click "Save"
Polls are short surveys you may want your users to engage in. These can only be used in widgets on a left or right hand navigation bar.
To create a poll, simply click on “Polls” down the left hand side and a page with all your Polls (if you have any) will be shown. From here click “Add Poll” and a screen like the one below will be shown.
Give your Poll a Title (or question if that is what you are asking) in the “Poll Question/Title” box and if you want to allow users to choose multiple answers then put a tick in the “Allow Multiple Answers” tick box. Once you have done this, click “Create” and then you will have the option of adding your “Poll Answers”. To do this click “Add Answer” and then type in some text into the next screen where it says “Poll Answer” and once finished click “Save”
To add more than 1 poll answer go back to the Poll and continue to add them until you are happy.
Adding your Poll Widget
To then use your image gallery on a page, using our previous instructions on adding widgets and add the “Poll” widget to the “Default Widget Area” and within this ensure you set the right poll to show using the “Poll” dropdown.
You also need to ensure that you have set the “Default Widget Area” to display on the page of your choosing.
On your page that you are using the widget area your page should now be showing. The results of the poll can be seen on the live website as soon as you start getting results. There is a small “View Results” link below the poll when these start coming in.
Classified Ad’s (Adverts) are one of the new elements of the upgraded One Suffolk Silverstripe system. It essentially offers any organisation the ability to display adverts on their website in a nicely displayed format. Using a widget you can even allow for users to submit their adverts via the website if desired.
Classifieds work very similar to News and Events. To add a Classified Advert to the system simply click “Classifieds” on the left hand side and then a list of all your classifieds will appear. Click “Add Classified Advert” and you will be greeted with a screen like the one below.
As with the News and Events sections, simply fill out as much information in the boxes that you want or need to. I would hope that it is fairly self explanatory. If you do have an image for it then I recommend inserting one using the “Images” section at the bottom of the page.
Choose whether you want to upload a new image from your computer or from the File store. If you want to upload some from your computer click “From Your Computer” and then you will be greeted by a box that shows your computer. From here find your files and click "Open" to upload them.
If you want to pick files from the File Store then click “From Files” and then a box with a view of the File Store will appear. From here click on each item you want to add to your advert and click “attach files”.
Click “Create” when you are done.
Adding the Classified Ad’s Page to your site
The final step is to create your classified ad’s page. To do this, click “Pages” on the left hand side, click “Add new”.
From here you can choose whether you want this to be a “top level” page i.e. one that appears in the main menu or “under a page” i.e. a sub page underneath another page. Select which one you wish to select. Once you have done this select the type of page you wish to create (in this case it will be a “Classifieds Page”) and then click “Create”.
Once you have done this it will then simply display all your adverts on your site. No further setup is required.
There are 2 options with RSS feeds in your One Suffolk website. You can pull in a feed from another provider and add them to a widget or you can use your news items to create your own RSS feed and then other people can use this.
Pulling in a Feed from another provider
Click on "Services" down the left hand side and then click on "RSS Feeds" along the top and then you will be greeted with a screen like the one below.
From here click on the "Add RSS Feed" button and then you will be greeted with a screen like the one below.
On here, give your feed a Title by typing into the "Title" box.
Put the feed address into the "Feed URL" box (this must be a full website address) for example "http://feeds.bbci.co.uk/news/rss.xml?edition=uk"
And then finally set how many posts from the feed you want to display on the widget in the "Post Limit" field. We recommend 5 but you can have as many as you like.
Once done click "Create".
We have completed a handy video guide on how to use widgets with your One Suffolk website. Please visit https://youtu.be/8cqihA2SyJw to view this 25 minute guide on all things widgets and widget areas.