Pages STA Essentials

Posted on November 22, 2021 by ifa243

Overview

Pages is the content management system (CMS) that will be used for the College of Liberal Arts site. 

It comes from GrapesJS, an open-source web development tool that allows developers to add custom CSS elements into blocks in a what you see is what you get (WYSIWYG) interface. This makes things much easier for the client to edit the website on their own.

For a general overview of these different blocks, how to use, and best practices when uploading assets, please review the User Manual here.

That said, while Pages is made to be easy to use and accessible for all clients regardless of web development experience or ability, there are a few things to keep in mind, especially where images are concerned. 

Once you upload an image to a page, regardless of the component it’s situated in (hero image, callout post, button, etc.) how it appears will not change or adjust in any way on the live site. To put it more clearly, size will not auto adjust to fit the page or other elements, and there is no way to change this in code either. 

You must make sure to do any edits before you upload to Pages. 

Types of Images

First, it might be helpful to distinguish between two kinds of images: raster and vector images. 

Raster images are probably the images you see the most and what you’re probably thinking of when I say “images”. They’re composed of pixels, funky little guys that are also a common unit of measurement for pictures. This is all well and good, but unfortunately raster images don’t look great when expanded, since the pixels must stretch to compensate for this increased space. This often results in a low-resolution image. 

Common file formats: JPEG, PNG, and GIF

Vector images are the second kind of commonly used image type and perhaps more commonly known as vector graphics. Instead of using a bitmap of pixels, they are composed of a variable number of lines and curves that contain various shapes. These points, lines, and curves may be scaled up and down as needed, basically infinitely. 

Common file formats: SVG, PDF, and AI

Types of Images to Use for Pages

Always try to export/save your images as a JPEG/JPG. This file type is smaller and loads faster on web servers. The one exception is you have an image with a transparent background, in which case you must use a PNG as this is not supported by JPEG/JPG. 

Pages will not render PDF files. These must be hosted in Minio.

Image Sizes

Maximum image widths:

Max image width for all components but the hero image: 640px

Max image width for hero images: 1400px

Minimum image widths:

Hero images: 1000px

Text with image: 320px

Callout box: 360px

Two card images: 460px

Three card images: 320px

Image buttons: 320px

Always save the highest quality version of the image you possess. If it originates in Photoshop, ensure that you Save for Web. In most cases, Pages will adjust image weight if it’s a little high, so never go with a compressed image unless you must.

Image Sourcing and Basic Editing 

Photo Sourcing

One important aspect of Pages content management is photo sourcing. It’s incredibly valuable knowledge to know how to pick a photo.

Here are a few sites you can depend on for copyright-free OR licensed usage photos. For a more comprehensive list and to fully understand what photo sourcing entails, please complete the Photo Sourcing and Color Grading training.

Unsplash: for general photos unrelated to UT imagery

UT Image Relay: must request access, repository of UT Photography to be used for official UT communications purposes. 

Photo Cropping 

As mentioned before, there is no tool in the system that permits you to crop or auto resize photos. This must be done before upload. 

There are many free resources likely available on your machine as well on the Internet that can resize or crop photos. However, one of the cleanest methods is via Photoshop.

I will demonstrate the process below. This is the raw image I started with (sourced from Unsplash), beside the edited photo, in its final habitat on the live page as an image button. To find out more about how to source images appropriately, scroll above to the “Photo Sourcing” section and be sure to take the Photo Sourcing and Color Grading training [link tba].

Before

After (as a component in Pages

I start by opening a new blank PS file. In this case, I created a PSD with the dimensions I wanted for these buttons. It’s important to keep dimensions standard across these components. Extremely large images (over 1400 px will be automatically sized down). You can always click the “eye”/Preview button in Pages to see how different image sizes will look on the live site before deciding.

Drag and drop your chosen image into the file, and hold shift while adjusting its position on your artboard so as not to distort the image.

If you’re having trouble moving the image, make sure the “move” tool on your sidebar is selected.

You might also like to add a fill layer with low (50% or lower) opacity to tone down the vibrance of the image. I recommend using one of the UT Brand Colors to accomplish this and adhere to the branding.

Once you’re satisfied with the positioning of the photo, navigate to File > Export > Save for Web to save a high quality version of this graphic to your machine. This now can be uploaded to Pages, and if you are creating a set of similar assets, repeat the process. 

How to Save Images / Export , What Size, Specs

It is generally recommended that you export all images as JPG. If exporting from Photoshop, follow the path File > Export > Save For Web.

Sizes are also an important thing to keep in mind.

Naming Photos 

One thing to remember is to not give images the same names, particularly if you wish to have two different images with the same name show up on your Pages site. The way the backend development works, the most recently uploaded image will show up always when identical names are present. 

Moreover, it’s important to choose names carefully when you title them. Instead of a random string of numbers or letters, be intentional when you name files. This will allow caretakers of the site to quickly identify your titles. 

Continuing with the earlier example, saving my crop of the eventual button above, I titled it MaymesterButton-UKEducation.jpg

If you like, you can be more detailed and descriptive with your file name. Just make sure there’s enough to tell what it is at a glance. Remember that in the distant future a content manager or STA might be handling these files, and they should be able to decipher what in the world your asset is supposed to be from the file name. 

Alt Text

Pages will automatically include “College of Liberal Arts” as default alt text, basically removing the possibility of there being no or “null” alt text for an image. However, some images may require custom alt text. 

What is alt text?

Alt text, as it’s usually called, or alternative text (as it’s a contraction of), is text included as an alternative to any images on a site. They are usually short descriptions of any relevant information than an image conveys. 

Why is alt text used? 

Images are often some of the most widely used components on websites. If people cannot access these images, this can create major barriers. Alt text can:

  • Help orient people with disabilities who are using screen readers or dictation software to orient themselves on the page
  • Display information for an image that might be blocked due to internet connectivity or various software
  • To improve search engine optimization (SEO) 

How do I write alt text? 

Is an image decorative (a banner, for instance, or a stock image with no real informative purpose) or includes information already found in the text content of the page? If so, no need to include alt text! Logos are also not recommended to have alt text. Although alt text is sometimes needed, too much alt text can actually impede accessibility improvement as it may clutter screen readers for users and be difficult to absorb. 

Quick reference for cases you should not use alt text:

If it includes information not otherwise found, such as an image that demonstrates or supplements something found in the text, it might be best to add some alt text. 

The key for writing good alt text is to keep things concise and clear. Never begin your alt text with “image of” or make assumptions about what’s in the image. 

For complex images like graphs or charts, you may want to write a longer description if time and resources allow, apart from the alt text input form. More information about complex images and how to write longer image descriptions in conjunction with or in addition to succinct alt text can be found here. 

Here are a couple of practical examples:

Here is a screenshot from the Czech language page. Each language page has its own banner, and here’s one of them. Do we need alt text? 

Answer: No, because it is a banner simply including the name of the language as well as a purely decorative/aesthetic backdrop. 

Here’s another example that I grabbed from the LA 101, under the Student Resources section. 

Does this image need alt text? It’s not a graph or a painting; however, it does add supplemental meaning to the page.

Therefore, it should have alt text. Click on the image and, navigating to the sidebar where the gear icon is highlighted, click into the “alt text” field.

First attempt: 

Students in LA 101P classroom learning and collaborating with one another, a collage

Although this alt text is well-intentioned, it’s pretty verbose. Let’s try to condense it. Also, notice how it’s not one image, but 4 in a collage. Let’s take note of this format to try to convey this to the user.

Second attempt:

A collage of LA 101P students working together in the classroom.

This is a little better, but still makes some assumptions. Are these LA 101P students? Likely, maybe, but we have no way of knowing for certain; there’s no sign or information in these images to suggest these aren’t just a collage of ordinary classroom shots. Also, are they working together? Maybe, that’s a pretty sweet thought, but it shows interpretation. 

Best attempt:

Collage of students in class

It’s short, succinct, and doesn’t suggest that these are students in any particular class with any particular collaborative aspect.

By saving, we can inspect element and see that this alt text is now present in the HTML markup of the image, helping to make the College of Liberal Arts site a little more accessible for all. Yay!

Other resources:

This entry was posted in COLA Web Editor, Pages. Bookmark the permalink.

Comments are closed.