Widgets
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.
Note: no new widgets should be created on a TMS site. Important content should be at the top of the page or within the page content as the widget zone will not be available in Drupal. This is due to the way in which responsive sites work, whereby your important content (in the widget zone) would be placed at the bottom of the page on mobile/tablet as it is a secondary column to the main content.
- How Widgets Work
All websites 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 empty, 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.:
http://webdev.adelaide.edu.au/yoursite/pagename/widgets/ - 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.
- Additional Widgets
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.
- Editing Widgets
Homepage Widget
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 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/ 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.
