Resizing Images

There are 2 types of images you can upload to to the CMS - foreground images and background images.

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

Pixlr is a free online image editing platform where you can edit your image to correct size for any content type you want to use.  To use Pixlr go to Pixlr.com.  This tool is easy to use and you can resize your image in a few short steps.

Paint.net is free image editing software that you can download.  It is an offline tool, so it works when you are unable to connect to Wi-Fi.  Get Paint.net

^ Hide answer

In the example below we will resize a photo from Width 2264 x Height 1271 to the Standard Media Library Full-Sized image size: Width 800 x Height 600

1. Open Pixlr - https://pixlr.com/e/
2. Click on Open Image and choose the image you wish to resize‌.
   
3. For Information. A typical photo, taken on a smartphone is 4290 px wide but a widescreen monitor is only 1920 px wide.  When you click on Open Image and the image is too big, Pixlr will detect this and ask to pre-resize it to 1920 px wide.  Don't amend the dimensions here - just ensure Full HD is chosen and click on Apply.
   
4. Click on the Crop icon‌
   
   The top ribbon will change so you can see the crop options.
   
   
5. a.   Note the current image dimentions
   b.   Ensure the SIZE option is highlighted
   c.   Insert the new dimensions you need (in this case, 800x600)
   
6. If the resize box, that appears, is not over the area of the image you wish to keep, hover your mouse over its centre. Your mouse pointer will change to crosshairs. Click in the Centre of the box (a grid will appear) and you can move the grid over the part of the picture you wish to keep. 
   
   Warning: If you click and drag when you're too close to any edge of the resize box (i.e. when the mouse pointer is directional arrows - not crosshairs), you will change the dimensions you are resizing it to. 
   
   
7. Once you are happy with the placement of the grid box click Apply.
   
   
   
8. Now click on the File Tab and choose Save.
   
9. A Save window will appear, we recommend saving as a JPG as the kb size will be smaller than a PNG image
   

• Change Quality to 80%
• You can confirm that the new dimensions of your image are correct.
• Click on Save As 
  The 'Save as' popup appears. We recommend using a file name that specifies the new width and height of the image.  E.g. myimage-500x90.jpg
  When choosing your file name: Use – (dash) instead of spaces (images may not upload to the web server if they have spaces in their name).
  
  Tip: Don't use any characters that are reserved for web addresses in its filename ( ! * ' ( ) ; : @ & = + $ , / ? % # [ ] ).  If you do, the image will upload but may not load on your page.

^ Hide answer

In the example below we will resize a photo from Width 2264 x Height 1271 to the Standard Media Library Full-Sized image size: Width 800 x Height 600

1. Open Pixlr - https://pixlr.com/e/
2. For Information. A typical photo, taken on a smartphone is 4290 px wide but a widescreen monitor is only 1920 px wide.  When you click on Open Image and the image is too big, Pixlr will detect this and ask to pre-resize it to 1920 px wide.  Don't amend the dimensions here, ensure Full HD is chosen and click on Apply.
   
   
3. Click on Open Image button and choose the image you wish to resize.‌‌
   
4. O‌n the top ribbon, click on the Page tab and choose Smart resize...
   
5. A pop up will appear.‌
   
   
   
6. You can now a‌djust the width or height to the dimensions you need.  To guage which dimension you need to change, you may need to experiment.
7. For example, in this case we first change the Width to 800 and see that the height amends to 449 (which is below the 600 we need).‌
   
   
   
8. Because the height is now too small, we need to redo (Press Ctrl Z to go back to the starting dimensions) and start again.
9. This time adjust the Height to 600, and we have an image which is 1069 x 600, click Apply.
   
   
   
10. We are close to the size we want but we now need to crop the image.
11. Click on the Crop icon.
    
12. The top ribbon will change so you can see the crop options.  Make sure that FREE is highlighted.
    
13. When you change the Width to the size you want, a resize box, sized to the selected dimensions, overlays your image. If the box is not over the area of the image you wish to keep, hover your mouse over it's centre.  You will see it change to crosshairs.  Click in the Centre of the box (a grid will appear) and you can move the grid over the part of the picture you wish to keep. Warning: If you click too near any edge of the resize box, the mouse pointer will be a directional arrow instead of crosshairs.  Dragging this will resize your selection. 
         
14. Once you are happy with the placement of the grid box click Apply.
    
15. Now, click on the File Tab and choose Save. A Save popup will appear. 
    
16. We recommend saving as a JPG as the kb size will be smaller than a PNG image‌.
    
    ‌

1. Change Quality to 80%
2. You can confirm that the new dimensions of your image are correct.
3. Click on Save As 

We recommend using a file name that specifies the new width and height of the image.  E.g. myimage-500x90.jpg

When choosing your file name: Use – (dash) instead of spaces. Images with spaces in their names may not upload to the web server.

Tip: Don't use any characters that are reserved for web addresses in its filename ( ! * ' ( ) ; : @ & = + $ , / ? % # [ ] ).  If you do, the image will upload but may not appear on your webpage.

^ Hide answer

1. First choose the image on your computer which you want to use. Open Paint.net and click on the File Open icon on the top ribbon as shown below and select your image file.
   
2. Click on the Image tab and choose Resize…
   
   ‌
3. A Resize popup will appear
   
   
   1. Click the radial for By absolute size
   2. Make sure Maintain aspect ratio is ticked so the width/height will automatically adjust depending on the measuement option you are adjusting, this will avoid any distortion of your image
   3. Change the width or height to the closest size to the size you need for your content type – correct size is available at https://www.universityofgalway.ie/t4training/faqs/images/#bgImgLocations.  Adjust by the longest edge to ensure the size of your image width or height does not resize to below the dimensions you require, you can crop or trim your image after resizing following the instructions below.
   4. Click OK
      

   

4. Click the File tab and choose Save As if you wish to retain a copy of the original image too.  The 'Save as' popup appears. We recommend using a file name that specifies the new width and height of the image. E.g. myimage-500x90.jpg

   When choosing your file name: Use – (dash) instead of spaces (images may not upload to the web server if they have spaces in their name).

   Tip: Don't use any characters that are reserved for web addresses in its filename ( ! * ' ( ) ; : @ & = + $ , / ? % # [ ] ). If you do, the image will upload but may not load on your page.

5. When you click Save you will see a Save Configuration Popup box – Click OK ‌‌.
   ‌

The resized image will be shown on screen, if you still need to crop or trim your image to meet a content type size, see further instructions on how to do that.

^ Hide answer

1. First choose the image you use which you want to use. Open Paint.net and click on the File Open icon on the top ribbon as shown below and select your image file.
   
2. If your image is 800 x 600px but you want to capture a particular part of your image as a thumbnail image of 200 x 200 you will need to crop your image to reach those dimensions.  
3. Click on the Rectangle Tool in the Tools Pane
   
4. The Tool ribbon will appear at the top of the page
   
5. You have the option of Any Size (You can freehand draw the selection box), Fixed Ratio (You can freehand draw the selection box which will hold the ratio of the dimensions you specify) or Fixed Size (Specify the dimensions you want and click on the image where you want the top left hand corner of your selection box to be).
6. If you need to move the selection box click on the Move Selection tool (there are 2 Move Selection icons please ensure to choose the bottom one as illustrated on image below).
   
   
7. You can now drag your selection box over the preferred section
    ‌
8. Click Image tab and Crop to selection. (image below).
   
9. The area of the image you selected will be cropped from the original image
   
10. Save your new image, click on the File Tab and choose Save As.
    

We recommend using a file name that specifies the new width and height of the image.  E.g. myimage-500x90.jpg

When choosing your file name: Use – (dash) instead of spaces. Images with spaces in their names may not upload to the web server.

Tip: Don't use any characters that are reserved for web addresses in its filename ( ! * ' ( ) ; : @ & = + $ , / ? % # [ ] ).  If you do, the image will upload but may not appear on your webpage.

‌

^ Hide answer

1. You can also trim your image to get an image with specific dimensions.  For example, if your image is 2000x1400px and you need it to be 250x150px. 
2. Click on the Image tab and choose 'Canvas Size' from the dropdown options.
   
   ‌
3. The Canvas Size popupSize popup with appear
   

1. Choose By absolute size
   
2. Leave Maintain aspect ratio unticked
3. Change the width to the required size and change the height to the required size - correct size is available at https://www.universityofgalway.ie/t4training/faqs/images/#bgImgLocations
   
4. You will Anchor your image depending on what element of the photo is important i.e. if you anchor to the center - the image will be trimmed equally as required on all sides, if you anchor to the top left corner the image will be trimmed on the right side and the bottom as required.

Click OK and the image should now be trimmed to your required dimensions.

^ Hide answer