On University of Adelaide websites, widgets are information boxes that provide additional content and add interest to a site.
Widgets usually appear in a column on the right-hand side of the content area of the page. They 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.
If you want to have widgets on your website, this page shows you how to create and edit widgets in both the old and new templates.
How Widgets Work
All websites have a widgets_index/ (old template) or widgets-index/ (new template) 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/ or 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:
- Go to the page you want to remove the widget from
- In the address bar where your site page URL is (http://webdev.adelaide.edu.au/yoursite/pagename/), you will need to type after the pagename/ "widgets/". e.g.:
- Once typed in, press Enter on the keyboard to search for this. An error will come up, but you can then click 'create'.
- Once you create this new folder, it will automatically create a page within it and take you into edit mode.
- Click 'cancel' and then click 'files' as you will need to delete this file.
- Once in the files area, 'delete' the index.html file in the folder. By doing this, you have created a blank widgets folder, and therefore stopped this page from inheriting its 'parents' widget.
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.
Creating a Widget
To create a new widget, go to the page you want the widget on and in the address bar of your browser, type in '/widgets/' at the end e.g. http://webdev.adelaide.edu.au/yoursite/pagename/widgets/ and press Enter.
An error page will appear, but the top editing box at the bottom of the page will have a link that says 'create'. Click 'create'.
Now you can insert your information into the widget through TMS. This process will differ depending on whether your site is in the old or new template.
The first thing you'll need to do is click on the HTML icon in the editing toolbar. Delete any existing code from the HTML code view and type/paste in the following to add a widget heading:
<div class="infohead-widget">Widget Heading</div>
Once the widget heading has been added, you can click Update and return to the normal TMS view to continue to edit the widget.
Please note: any images used in these widget must be 180 pixels wide.
To add content to your new widget , take a look at the Widget page on the Pattern Library.
The Widget page will provide you with a number of widget options. Under each option will be a [show source] link which, once clicked, will show you the relevant HTML code for that widget and allow you to copy it.
When you have copied the code, go back to your website editing screen, and use the HTML icon in the editing toolbar to paste in the code you have just copied.
Click Update and you should now be able to edit the content of the widget using TMS as normal.
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'. For example, 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.
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. Make your changes, then Preview, Save Changes and Upload.
Widgets Not on Homepage
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 html 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.
Images Within Widgets
The older 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.
The new template widgets have a specified image size of 230x150 pixels. The Profile Widget page on the Pattern Library has an example widget with a placeholder image of this size.
- If the widget appears on all content pages within your site:
Including Widgets in a Page
The 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/ or widgets-index/ folder at the top level of the site Widgets located in this folder will be displayed on the homepage of the site. widgets/ folder at the top level of the site Widgets located in this 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 the above folders. They should go into your websites images/ or docs/ folder.
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 Web Team who will be able to create this folder for you.