Widgets
Creating | Editing | Including in a Page | Older Templates
In University of Adelaide websites, widgets are information boxes that provide additional content and add interest to a site.
Current standard University templates contain widgets as a default feature. Widgets usually appear in a third column of the page in sites using newer University templates or at the top, right-hand side of the content area of the page in older sites and are primarily used on the front page of the site, although they can also be used to add value to other key pages within the site.
Widgets can be used to either display one specific widget per page or to randomly load different widgets each time the page is refreshed/revisited.
Creating Widgets
To create a new widget, go to the page you want the widget on and in the address bar of your browser, type in after the page link "/widgets/" and search for this.
Eg: http://webdev.adelaide.edu.au/yoursite/pagename/widgets/
An error page will come up, but the first blue box will have a link that says 'create'. Click 'create'.
Now you can insert your information into the widget through TMS, and then upload. Ensuring any image used is the right size in the widget .
To create an additional widget so that your widgets randomly load on the page, simply go to the address bar again and search for the page name followed by /widgets/ (as you previously did), ensuring that you also add on after the /widgets/ the new widgets name, followed by ".html".
Eg: http://webdev.adelaide.edu.au/yoursite/pagename/widgets/new_widget.html
Make sure that you specify ".html" on the end of the filename, otherwise the widget won't work as it should.
The widgets can then be edited in the same way as you would for the main website pages, using TMS.
Editing Widgets
Depending on your site structure and the way you are using your widgets the editing process may differ from site to site.
New Style Widgets
To edit your widget on the homepage, use the 'files' link in TMS to navigate to the widgets_index/ folder and click on the folder to open it. Here you will find one or more html files, these are your widgets. Find which one you want to edit, and click the 'edit' link for the file you wish to edit. Make your changes, then preview, save and upload.
To edit a widget that is NOT on the homepage there are two possible ways in which you can do this depending on the site structure.
- If the widget appears on all content pages within your site:
Navigate to the widgets/ folder through the 'files' link from the homepage and click the widgets/ folder to open it. You can then 'edit' the widget file from there. - If the widget only appears on one page in your site, (or if you cannot find the widget you think should be in the widgets/ folder):
Navigate to the page that the widget is on. Click 'files' and there should be a widgets/ folder within that pages folder. Then click on the folder widgets/ and from there you should be able to 'edit' the widget html file that sits in that folder.
Older Style Widgets
Please see the information below on older templates which includes how to edit older style widgets.
Images within widgets
The newer template widgets are constrained so that the content will not push the widget outside of the template. Therefore, any images that are used within a widget need to be as follows:
Standard images: need to be 180px wide.
Keyline class images: need to be 178px wide, this accounts for the 1px either side of the image that the keyline border gives it so that it will sit nicely within the widget's constraints.
Including Widgets in a Page
New Templates
Newer University templates check the contents of the widgets folder and automatically include the widgets in the page if they are found. Widgets will be displayed as follows:
| Location | Where Displayed |
|---|---|
| widgets_index/ folder at the top level of the site | Widgets located in the widgets_index/ folder will be displayed on the homepage of the site. |
| widgets/ folder at the top level of the site | Widgets located in the widgets/ folder will be displayed in every page of the site. This is useful if you have some general information that you want displayed throughout the site. To avoid displaying widgets in a particular subfolder of the site, an empty widgets/ folder can be placed in the subfolder. |
| widgets/ folder in a subfolder of the site | Widgets located in a widgets/ folder in a subfolder of the site will be displayed in the pages at and below that folder. |
Do NOT place any images, or documents (including pdf's) into a widgets/ or widgets_index/ folder. They should go into your websites images/ or docs/ folder.
|
All new sites have a widgets_index/ and a widgets/ folder at the top level of the site. These folders may have widget files within them (html files) or may be empty. The widgets_index/ is specifically only for widgets on the home page. The widgets/ at the top level of the site is for ALL pages within your site as all subpages inherit their "parent" folder's widget unless specified otherwise. Generally the widgets/ folder is blank, so you don't have a widget on ALL of your pages within your site. If you do have a widget in the top level widgets/ folder and wish it NOT to be displayed on a specific page, then you will need to create a blank widgets/ folder for that page. To create a blank widgets/ folder you need to do the following:
NOTE: to upload this change, you will need to go to the page you took the widget off of, and click the 'upload_dir' instead of the normal 'upload' option. This will upload the empty folder too, so that the widget is removed. |
Older Templates
For widgets to be displayed in sites using older templates, a line of code must be entered into the top of the page's html code specifying if a rand
om widget or an individual widget file are to be included in the page.
- Random Widget
Including the following piece of code in the html code at the top of the page, will load a random widget from the site widget folder each time the page is loaded: <!--WFINC="randominc(/sitename/widgets/;cache=0)" -->
(where sitename is replaced by your website name). - Specified Widget
A specific widget is included in the page by using the following statement:
<!--#include virtual="/sitename/widgets/widgetname.html" -->
(where sitename is replaced by your website name and the widgetname is replaced by the required widget).
Editing Older style Widgets
Older style widget that use the <!-- WFINC... > include will be located in the widgets/ or widgets_archive/ folder. You can edit them by clicking the 'files' link from the homepage, then clicking on the widgets/ or widgets_archive/ folder to open it and then clicking 'edit' to the right hand side of the file you want to edit.
If Your Site Doesn't Have a Widgets Folder
If your website doesn't have a widgets/ folder and you would like to display widgets on your website, please contact the Online Media team who will be able to create this folder for you.
