Images

Media library items are stored in the CMS - The items you see in your Media library may not necessarily be being used by the live website. Once an item is used on a webpage it will automatically be uploaded to the live web server. 

As T4 only uploads media items (files/images) to the web server when a webpage is using them, if you stop linking to (or embedding) a media item, or stop publishing the only page that was using it, it will be automatically removed from the web server again, but remain in your Media library.
(Note: Administrators can override this, making individual sub-categories of the media library upload images and/or files - even if those items are not in use.)

How can I browse to media library images (in the CMS)?

If you are in t4, you can go to the media library and see all images there.  Click on the 'Content' option in the left hand menu and choose 'Media Library' from the expanded options.

How can I browse to media library images (on the university website)?

Unlike some other websites, you cannot browse to a university web address to click through all the folders and images that have been published by the CMS's Media Library.    

However, all media library items, which are in use on the website, are stored on the web server, in subdirectories of https://www.universityofgalway.ie/media/.  The exact web address depends on the names of the media library sub-categories (folders) and the number of folders, in the CMS where your file/image is located. If you know the exact location of an individual image, and its filename, you can type the complete path to the image into your browser's address bar to go directly to it.

Normally, only images that are in use by a live page will be uploaded to the live webserver by the CMS - unless an administrator has configured a media library sub-category to always upload its images.

^ Hide answer

This answer is for Power users / Administrators only.

If someone else has created a document / image and you want to link to it / use it, you can simply search for it in the media library - you don't need to know the exact category it is stored in (the folders in the Media Library are called 'categories'). 

If you need to update a document or image, you DO need to know where it was placed in the media library - so that you can open its category first.

There are 2 ways to find out where a media item resides in the media library:

1. Look at the published page that links to the document or displays the image.  If its an image, right-click it and open it in a new tab.  If it's a document, right-click the link and 'Copy Link Location'.
   The web address of the item will begin with https://www.nuigalway.ie/media/...  Each directory after that is the name of each media category to open (without spaces in it).  Except for the very last bit - that's the name of the file.
   E.g. https://www.nuigalway.ie/media/informationsolutionsservices/images/saoirse-704x397.jpg indicates that the file saoirse-704x397.jpg is stored in Media Library - Information Solutions Services - Images.
   
   
2. In the media library, you can do the following:  

   Using the Search field search for the file/image. The more information you have to refine the search will help.

   For example, you could search for 'travel' in the Search box and a list of all items with the word Travel in the information will be displayed. 
   
   An image of the item will be shown in the Preview column, and the Category (media library folder) information where the item resides will show under the Media column.
   
   If you click on the Actions button and choose Edit media you will get more information
   
   Click on the Usage tab to see where the image is currently in use. 
   
   Click on the Categorization tab to include the image in another category - if the item is edited it will change in all categories it resides in
   

   E.g. If your media item is in 'Agresso Files', and this is a sub-category of 'Files' which is, in turn, a sub-category of 'Information Solutions Services', you know you'll find the file in Media Library - Information Solutions Services - Files - Agresso Files.
   

^ Hide answer

If you double click on the actual image (foreground image) the media attributes pop-up will appear.

^ Hide answer

If you are replacing an image, you must make sure the new image you're uploading has a different name - if you don't, browsers will show the old image, remembered from when they visited the page before.

Ensure its filename does not contain any spaces, and don't use any characters that are reserved for web addresses in its filename ( ! * ' ( ) ; : @ & = + $ , / ? % # [ ] ) or you may not be able to load the image. 

To add a foreground image (i.e. one that appears alongside text, they way it would in a word document) to a page:

1. Edit some content.
2. Click to go to the media library.
3. Search the image library for the image to use.
4. Click on the Actions button and choose 'Select media'.
5. Or click on the name of the item.

^ Hide answer

All foreground images are stored in Site Manager's media library.  Most content types use background images - some content types require these are stored in the media library and others expect you to upload the background image directly into the content type.

Regardless of whether you are adding a foreground or background image, you should prepare your new image.  Specifically, it should be sized for the content type you’re planning to use, before you upload.

If you are replacing an image, you must make sure the new image you're uploading has a different name - if you don't, browsers will show the old image, remembered from when they visited the page before.  Also ensure its filename does not contain any spaces or else it might not upload. 
And don't use any characters that are reserved for web addresses in its filename ( ! * ' ( ) ; : @ & = + $ , / ? % # [ ] ) or you may not be able to load the image once it's uploaded. 

Accessibility:  Always add a meaningful description to an image to assist people using a screen reader.

Preparing the image for the web results in better looking images and a quicker loading webpage, which, translates to a higher google ranking.

Step 1: Prepare your image
First, know which content type you want to add it to.
Then size the image for that content type and web-optimise it by following the instructions in the Resizing Images section of the website 
(Going slow, reading and following these instructions takes me under 2 minutes. Once you’ve done it a few times, it’ll take you ~1 minute each time.)

Step 2: Upload it to Site Manager's Media Library (all foreground images and any background images for content types that use the media library)
Because your image doesn’t need to be resized, adding it via the media library is a straightforward task:
Edit your content as usual.  When you need to specify an image (or want to add one):

1. Click the link to go into the media library
2. 2. On the Media categories on the left hand side, , click into the category you want to upload your image to.
3. 3. Click the +Add media button
   
4. To add your image go to Media file and click on the 'Drop file here or click to choose' field to choose your web-ready image from your computer. Or Drag and drop your image into this box.
5. Fill in the name, description and keywords for the new image.
6. Set the media type to ‘Image (foreground)’ or ‘Image Path (CSS)’
   Tip: 'Image (foreground)' is for when you want to include an image via the WYSIWYG editor.  E.g. when using a  'Content', 'Content (no title)', or 'Course template 1' (or 2) content type.  Most other content types require a background image - aka 'Image Path (CSS)'.
7. You will see your new image has bee added to your media library category
8. To insert the new image into your content click on the Actions button and choose Select media

Uploading an image to the media library does not take long. I timed myself from step 2-8. I wasted some time when filling in the fields (and also when deciding on which image to upload) but despite this, my image was uploaded and added to the page in under 2 minutes.

^ Hide answer

After adding your foreground image, you can left- or right-justify it, add a border, and make it circular / oval.  Some options will also display the image's description (from the media library) as a caption below the image.  For complete information, see Foreground Images.

Please note: You cannot centre the foreground images that you add to pages - our design rules prevent it.

^ Hide answer

Print quality images, from a standard digital camera, are anywhere between 4 and 30 times bigger than they need to be for your website.  These slow down your page load times and can cause errors on the user's device by clogging up memory. 
Web ready images are far smaller in size than print-quality images but there's no discernible difference in quality.

Before you upload an image to Site Manager, it needs to be resized, and possibly cropped, to the correct dimensions for your intended content type.  It also should be converted to 96 dots per inch, instead of 300.

We've made this easy for you.  Just follow the steps outlined in the Resizing Images section of the website.

Ensure its filename does not contain any spaces and don't use any characters that are reserved for web addresses in its filename ( ! * ' ( ) ; : @ & = + $ , / ? % # [ ] ) or you may not be able to load the image once it's uploaded.

Accessibility:  Always add a meaningful description to an image to assist people using a screen reader.

^ Hide answer

Foreground images, uploaded to the Media Library, can be added to any content type that uses the WYSIWYG editor.  Once added, they can be turned into links by right-clicking on the image, and clicking 'Insert Link'.

Several Content Types allow you to add an image, making it a link. These are listed on the Images FAQ page: Which Content Types allow me to link to another page?
Some of these content types expect you to select a background image, from the Media Library.
Others expect you to to attach an image directly to the content type.
And each content type expects the image to be a different size.  To see what size to make it, whether to upload the file to the media library or attach it directly, and how to resize it, see the Image Resizing FAQ page. 

^ Hide answer

You do this by first sizing the image for your page and then defining an image map, which tells the browsers which bits of the image are clickable.
Full information is available here: Creating Image Maps

^ Hide answer

Sometimes, you need to make the CMS upload media library images/documents - simply because the CMS doesn't know they are in use!
Often, it's because you've typed in its web address, which isn't enough to let the CMS know it has to upload it.
And, very occasionally, users need to upload a document or image to the website without linking to it from any of their pages. 

Things in the media library are not uploaded to the web server as soon as they are added - putting them in the media library just adds them to the CMS.
The CMS won't upload them to the web server until it knows they are needed (i.e. embedded / linked to) by a live webpage.

If you include the image/document in a content type (using ), it will automatically upload to the web server - so long as that content type is approved, and the section containing it, is also approved.

Conversely, If this content or section ever gets set to 'Pending' or 'Inactive' (aka deleted), the media item will be removed from the web server because the CMS thinks it's no longer being used on the website

If you just type the location of an image/document into some part of the CMS (e.g. into an 'External link' or 'External Address' field), or reference/link to it in some HTML code, the CMS will not know that it has to upload that image.

If you ever need to make the CMS always upload documents / images, see the following instructions: How to make t4 always upload files (media library).

^ Hide answer

That depends on a few things:
Is it a foreground image (embedded into a WYSIWYG editor, using its 'Insert Media' button: ) or a background image (selected when adding / modifying a content type).

Foreground Images

For full information on foreground images (including how wide they can be on different types of webpages), see our Foreground Images Example / Info Page.

Background Images

The image size depends on the content type you need it for.  You can quickly see each content type's required size in the FAQ item:  Which content types need images, where do they go, and what size should they be?
Alternatively, you can get this information in the Component Manual or from our Resizing Images section of the website.

Usually, you can also find out by hovering over the image name or field (a help comment will appear), whenever you're adding / editing a content type.
Video Demonstration: How to know what size image is needed.

^ Hide answer

^ Hide answer

Foreground Images

All foreground images are stored in Site Manager's media library.  You can add these, alongside your content, any time you're in a content type that uses the WYSIWYG editor - just click the editor's 'Insert Media' button.

They can be any width, up to the maximum space on the page.  These maximum widths are:

Normal page (left-nav, no rightbar):  735px
Normal page (left-nav & rightbar):  450px
Widescreen: 990px
Ultra-wide:  1386px 

For full information on working with foreground images , see our example page.

Background Images

Content types that incorporate images use background images - either the background image goes in the media library or else you attach it directly to the content type.

^ Hide answer

When you upload an image to the image library, you must say what type of image it is.
There are 2 types of image: 'Image (foreground)' and 'Image Path (CSS)'.
Think of these as foreground and background images.

In T4, Foreground images are used in the WYSYWYG editor.
Background images are used when a content type asks you to select an image.
If you use the wrong one, you'll see text instead of the image.  E.g:

/terminalfour/SiteManager?ctfn=downloads&fnno=60&ceid=1608966529
or
 " " alt="Some text in here"

To fix this:

1. Open the Media Library and find the image you need to fix.
2. Click on the Actions button and choose Edit
3. First click on the Usage tab to check if the image is in use elsewhere on the website.
   
   If it is in use, First  Download the media file by clicking on the Download button.
   Click the Cancel button to return to the media library
   Click on the +Add media button to upload the image you just downloaded
   Give it a different name and make sure the Media type is set to 'Image (Foreground)'
   Insert the image into your content.
   
   If the image is not in use elsewhere on the website,
   Click on the General tab,
   Go to Advanced options and change the Media type to 'Image (Foreground)'

^ Hide answer

If you are using an 'NUI Code only' or 'PHP Code Only' content type, the CMS doesn't know it has to upload the image you've referenced.  In this case, make sure the media library auto-uploads the image (instructions).

If you have added an image to any other content type and is not loading on the website, this is usually down to one of 3 things:

1. It might not have uploaded to the web server - make sure the content type that uses this image is Approved, so that t4 knows it's in use and will then upload the image.  Spaces in the image's filename can also prevent the upload from working - so rename your images .
2. It may have uploaded but its name contains a reserved character that breaks the instruction (to the browser) to include that image:
   So, always avoid the following characters in the image's filename, as they have special meaning for web browsers:  ! * ' ( ) ; : @ & = + $ , / ? % # [ ] 
3. Media library images are either background images - t4 calls them 'Image Path (CSS)' - or else foreground images - Image (foreground) in t4.  Whenever you upload an image to the media library, you have to specify which type it is.  Most content types require a background image.  Using the wrong type of image will mean it will not load (you may see some random text instead).  To fix this see - Why do I see some text instead of an image?

^ Hide answer