Images

Media library images are stored in the CMS - Images you see there are not necessarily used by the live website, and therefore may not be on the live web server.
Normally, T4 uploads media items (files/images) to the web server only when a webpage is using them.  And 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.
(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 browse to the media library and see all images there.  Just hover over the 'Content' drop-down menu and click on 'Media Library'

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 are stored on the web server, in subdirectories of https://www.nuigalway.ie/media/.  The exact web address depends on the number and names of the media library sub-categories, 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.
And it assumes you're in the media library's preview mode - if you're in detail mode, click that rightmost button (with the 6  blue squares) first:

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 ('sections' in the media library are called 'categories'). 
For example, you could search for 'travel' and filter it for 'Microsoft Office Documents" (in the top-right of the Media Library page).
When you find what you're looking for, hover over it and click 'Select'. 
If you want to preview a document first, hover over it, click 'Advanced' and then 'Download'.  Then press 'Cancel' to return to your search results.

But 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:
 a. Hover over the media item you're interested in, click 'Advanced' and then 'Modify'.
 b. Go to the categories tab - search for one that's ticked - that's the category this piece of content is in.
      Look at the indentation to see what its parent (and ancestor) sections are - so you'll know how to navigate to this category in the media library.
      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 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. Hover over the image and click 

^ 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 ususal.  When you need to specify an image (or want to add one):

1. Click the link to go into the media library 
2. On the left hand side, click into the category you want to upload to
3. Click 
4. Fill in the name, description and keywords for the new image. Then click the first  button.
5. Select the web-ready version (on your hard disk) that you want to upload and click ‘Open’
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. Click .
8. You’re brought to the page of the media library that contains your new image (so there’s no need to find it again).
Simply hover over it and click – your image is then included in your content type.

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.

Video Demonstration: Adding new images to webpages

^ 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 discernable 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 iinch, 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

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 or ), 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.

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, usng 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 field's i icon, whenever you're adding / editing a content type.
Video Demonstration: How to know what size image is needed.

^ Hide answer

There are 2 types of images you can upload to to the CMS - foreground images and background 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.
For more information on adding foreground images (including the maximum size they should be), see our example page.

Content types that are designed to incorporate images use background images - some of these expect the background image to be in the media library but many expect you to attach the image directly to the content type.

^ Hide answer

This happens in chrome and Edge, and all the chromium-based brosers (e.g. Vivaldi, Brave, Epic) – one of the chromium updates introduced it.
Try dragging the image to the right a few pixels and then letting go (see https://www.universityofgalway.ie/t4training/course/#fgImgLinks)
If you see little squares around the edge of the image, you can right-click it to edit its Media Attributes (or else double-click it).

 If the image goes blue but you get no little squares around the edge, (this can happen if the image is already floated right, for example), there’s no easy way to get to the image attributes – so you need to delete the image (hit the delete key while it's blue) and then add it from the media library again – then you can select it (by dragging it a tiny bit) and edit its attributes.

 Note: There’s no such issue in Firefox – you just double-click the image to get the image attributes.

^ 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:

a) Open the Media Library
    If you're in the media library's 'Preview Mode' (Icon View), hover over the media item and click 'Advanced'
    If you're in its 'Detail Mode' (List View), click on the media item's name

b) Click the 'Usage' tab to see where it's being used

If it's not being used anywhere else:
c) Click Modify
d) 4 lines down, there's a line called 'Type'.  On the far right, click 'Change Media Type'
e) Click on the correct type

If it is already being used elsewhere, it is not safe to change its type, so instead:
(c) Click the 'Download' button to download the image to your computer
(d) Click the 'Cancel' button to return to the media library
(e) Click 'Add Media' button and upload the image you just downloaded.
       Give it a different name and make sure its type is the correct one.
(f) Modify the content type that was showing text instead of an image - make it reference the updated / new image.

^ 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.  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). 
The fix for this is straightforward: First, go into the media library, find your image and click into it.  To see where this image is used, look in the 'Usage' tab.  If the image is not being used anywhere else, simply click Modify and change its media type.  If it is used elsewhere, click Download, to place a copy of that image on your computer.  Then add the downloaded image to the media library, this time as the correct image type, and use that media item in your content instead. 

^ Hide answer