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. <\/p>\n\n\n\n
Once you upload an image to a page, regardless of the component it\u2019s 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. <\/p>\n\n\n\n
You must make sure to do any edits before you upload to Pages. <\/p>\n\n\n\n
Types of Images<\/strong><\/h2>\n\n\n\nFirst, it might be helpful to distinguish between two kinds of images: raster and vector images. <\/p>\n\n\n\n
Raster images<\/span><\/strong> are probably the images you see the most and what you\u2019re probably thinking of when I say \u201cimages\u201d. They\u2019re 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\u2019t look great when expanded, since the pixels must stretch to compensate for this increased space. This often results in a low-resolution image.\u00a0<\/p>\n\n\n\nCommon file formats: JPEG, PNG, and GIF<\/strong><\/p>\n\n\n\nVector images<\/strong> 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. <\/p>\n\n\n\nCommon file formats: SVG, PDF, and AI<\/strong><\/p>\n\n\n\nTypes of Images to Use for Pages<\/strong><\/h2>\n\n\n\nAlways try to export\/save your images as a JPEG\/JPG.<\/strong> 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. <\/p>\n\n\n\nPages will not render PDF files. These must be hosted in Minio.<\/p>\n\n\n\n
Image Sizes<\/h1>\n\n\n\nMaximum image widths:<\/h2>\n\n\n\n
Max image width for all components <\/strong>but the hero image:<\/em><\/strong> 640px<\/p>\n\n\n\nMax image width for hero images:<\/strong> 1400px<\/p>\n\n\n\nMinimum image widths:<\/h2>\n\n\n\n
Hero images:<\/strong> 1000px<\/p>\n\n\n\nText with image:<\/strong> 320px<\/p>\n\n\n\nCallout box:<\/strong> 360px<\/p>\n\n\n\nTwo card images:<\/strong> 460px<\/p>\n\n\n\nThree card images:<\/strong> 320px<\/p>\n\n\n\nImage buttons:<\/strong> 320px<\/p>\n\n\n\nAlways save the highest quality version of the image you possess. If it originates in Photoshop, ensure that you Save for Web<\/strong>. In most cases, Pages will adjust image weight if it\u2019s a little high, so never go with a compressed image unless you must.<\/p>\n\n\n\nImage Sourcing and Basic Editing <\/h1>\n\n\n\nPhoto Sourcing<\/strong><\/h2>\n\n\n\nOne important aspect of Pages content management is photo sourcing. It\u2019s incredibly valuable knowledge to know how to pick a photo.<\/p>\n\n\n\n
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<\/a>.<\/p>\n\n\n\nUnsplash<\/strong>:<\/a> for general photos unrelated to UT imagery<\/p>\n\n\n\nUT Image Relay<\/strong>:<\/a> must request access, repository of UT Photography to be used for official UT communications purposes. <\/p>\n\n\n\nPhoto Cropping <\/strong><\/h2>\n\n\n\nAs mentioned before, there is no tool in the system that permits you to crop or auto resize photos. This must be done before upload. <\/p>\n\n\n\n
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.<\/p>\n\n\n\n
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 \u201cPhoto Sourcing\u201d section and be sure to take the Photo Sourcing and Color Grading training [link tba].<\/p>\n\n\n\n
Before<\/strong><\/p>\n\n\n\n![\"\"](\"https:\/\/lh6.googleusercontent.com\/PrWOuByL4wlNffe7tA_Jn0-nz2ZtrV6x3Z_7xWBcUBRgT5IrL1Mgr0EiGKyjgdVaykOa2sWycirK5sUfpXg-T3rbO_yP8SGfPL5ijqDGhRTsvuYkKwZI0Kw1BJaSyiTedbA3RwnZ\")
<\/figure>\n\n\n\nAfter (as a component in Pages<\/strong><\/p>\n\n\n\n![\"\"](\"https:\/\/lh5.googleusercontent.com\/uocSOWjYRu6DE8NDYeKnLdizFJii4SyT2oHAjjb5OFiCt20GrjjQJyus_BVpev6UYo2i56q4_EaufdoDsd2qYDiBKoWMt3KX6Bqq434BY-3qy1lDKGBRv-lma7otRz-qtPXcE4k8\")
<\/figure>\n\n\n\nI start by opening a new blank PS file. In this case, I created a PSD with the dimensions I wanted for these buttons. It\u2019s important to keep dimensions standard across these components. Extremely large images (over 1400 px will be automatically sized down). You can always click the \u201ceye\u201d\/Preview button in Pages to see how different image sizes will look on the live site before deciding.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
If you\u2019re having trouble moving the image, make sure the \u201cmove\u201d tool on your sidebar is selected.<\/p>\n\n\n\n![\"\"](\"https:\/\/lh6.googleusercontent.com\/myYsRb8R3mQx2Gcp_BHIP_nFyxms-nLWb-KDM3Al_HxDtddjap09PUEND9nGihFU0XH4dPoIgmed9YM1Qv1bdgUdsn-efLz4Il20kzsp_xbfd42wGsMOAaZzvqqRZSKhsBr2ge_T\")
<\/figure>\n\n\n\nYou 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<\/a> to accomplish this and adhere to the branding.<\/p>\n\n\n\nOnce you\u2019re 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. <\/p>\n\n\n\n
How to Save Images \/ Export , What Size, Specs<\/strong><\/p>\n\n\n\nIt is generally recommended that you export all images as JPG. If exporting from Photoshop, follow the path File > Export > Save For Web.<\/p>\n\n\n\n
Sizes are also an important thing to keep in mind.<\/p>\n\n\n\n
Naming Photos <\/strong><\/h2>\n\n\n\nOne 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. <\/p>\n\n\n\n
Moreover, it\u2019s 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. <\/p>\n\n\n\n![\"\"](\"https:\/\/lh3.googleusercontent.com\/hr5CxlvM-q6FtxvWVCom6gFfp5hRzhsiASvf9GG-ZpvaeiuhNNm5ReFOx2j5NCGBAmyoJSovfiZ35MzWacwtDoIbdkPs8HECNM6k6PLL-ks3YOuQwehMharmIP-SfU-1ztHqNrft\")
<\/figure>\n\n\n\nContinuing with the earlier example, saving my crop of the eventual button above, I titled it MaymesterButton-UKEducation.jpg<\/p>\n\n\n\n
If you like, you can be more detailed and descriptive with your file name. Just make sure there\u2019s 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. <\/p>\n\n\n\n
Alt Text<\/strong><\/h2>\n\n\n\nPages will automatically include \u201cCollege of Liberal Arts\u201d as default alt text, basically removing the possibility of there being no or \u201cnull\u201d alt text for an image. However, some images may require custom alt text. <\/p>\n\n\n\n
What is alt text?<\/h2>\n\n\n\n
Alt text, as it\u2019s usually called, or alternative text (as it\u2019s 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. <\/p>\n\n\n\n
Why is alt text used? <\/h2>\n\n\n\n
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:<\/p>\n\n\n\n
- Help orient people with disabilities who are using screen readers or dictation software to orient themselves on the page<\/li>
- Display information for an image that might be blocked due to internet connectivity or various software<\/li>
- To improve search engine optimization (SEO) <\/li><\/ul>\n\n\n\n
How do I write alt text? <\/h2>\n\n\n\n
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. <\/p>\n\n\n\n
Quick reference for cases you should not use alt text:<\/p>\n\n\n\n
- Logos (branding) <\/li>
- Decorative images (What are decorative images?<\/a>)<\/li>
- Complex charts or graphs (How should I handle these?<\/a>)<\/li>
- It already has a caption <\/li><\/ul>\n\n\n\n
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. <\/p>\n\n\n\n
The key for writing good alt text is to keep things concise and clear<\/strong>. Never begin your alt text with \u201cimage of\u201d or make assumptions about what\u2019s in the image. <\/p>\n\n\n\nFor 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<\/a>. <\/p>\n\n\n\nHere are a couple of practical examples:<\/p>\n\n\n\n
Here is a screenshot from the Czech language page. Each language page has its own banner, and here\u2019s one of them. Do we need alt text? <\/p>\n\n\n\n![\"\"](\"https:\/\/lh5.googleusercontent.com\/ANJv3cimWDHqxOFC84ELNFyVJ9sGhzIdUwT8nEg5CwSvl30omltXHW2j_gfxGbS59qovaHMvhLAHDPtNWfXs-PRFfBgESpsERXXct16JO77WhvGPSwPJ4aa68GEvLeH7I0voWNks\")
<\/figure>\n\n\n\nAnswer:<\/strong> No, because it is a banner simply including the name of the language as well as a purely decorative\/aesthetic backdrop. <\/p>\n\n\n\nHere\u2019s another example that I grabbed from the LA 101, under the Student Resources section. <\/p>\n\n\n\n![\"\"](\"https:\/\/lh4.googleusercontent.com\/XUKYJmBjk_zlL-U1zl_GjpFzmLUPX-WoiVkecnTE3M5WtA_kRq5QjJtyNVvn4xXuiDNpMPYcqOegZQrCKtQ7xuShAWP02Y5J6V3WLTGeBHRbup6wX_Kv8ZqWBxxtciGpOZmbm7C5\")
<\/figure>\n\n\n\nDoes this image need alt text? It\u2019s not a graph or a painting; however, it does add supplemental meaning to the page<\/strong>.<\/p>\n\n\n\nTherefore, it should have alt text. Click on the image and, navigating to the sidebar where the gear icon is highlighted, click into the \u201calt text\u201d field.<\/p>\n\n\n\n
First attempt: <\/strong><\/p>\n\n\n\nStudents in LA 101P classroom learning and collaborating with one another, a collage<\/em><\/p>\n\n\n\nAlthough this alt text is well-intentioned, it\u2019s pretty verbose. Let\u2019s try to condense it. Also, notice how it\u2019s not one image, but 4 in a collage. Let\u2019s take note of this format to try to convey this to the user.<\/p>\n\n\n\n
Second attempt:<\/strong><\/p>\n\n\n\nA collage of LA 101P students working together in the classroom.<\/em><\/p>\n\n\n\nThis 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\u2019s no sign or information in these images to suggest these aren\u2019t just a collage of ordinary classroom shots. Also, are they working together? Maybe, that\u2019s a pretty sweet thought, but it shows interpretation. <\/p>\n\n\n\n
Best attempt:<\/strong><\/p>\n\n\n\nCollage of students in class<\/em><\/p>\n\n\n\nIt\u2019s short, succinct, and doesn\u2019t suggest that these are students in any particular class with any particular collaborative aspect.<\/p>\n\n\n\n
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!<\/p>\n\n\n\n![\"\"](\"https:\/\/lh3.googleusercontent.com\/WFrgBExVnhiYCFPt_gOA_6jZVQfbDLgbqzGB1tc9rZZds7VnCp78Vd4sVfxBmeGCSYZF1YMiHut1ggrem-a5TcVspD5FWup4Ofk1lIHdstLyKv4dJ9pbi1a9GBtC8txoTe8Gy4xU\")
<\/figure>\n\n\n\nOther resources:<\/h1>\n\n\n\n- Minio<\/a> for hosting PDF files. Please remember to honor web paths when placing images. Log-in info is available on UT Austin Stache<\/a><\/li>
- UT Liberal Arts Wiki<\/a> for transferring internal unit documentation<\/li>
- Decision tree for when and what kind of alt text to write<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"
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 … Continue reading
Common file formats: JPEG, PNG, and GIF<\/strong><\/p>\n\n\n\n Vector images<\/strong> 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. <\/p>\n\n\n\n Common file formats: SVG, PDF, and AI<\/strong><\/p>\n\n\n\n Always try to export\/save your images as a JPEG\/JPG.<\/strong> 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. <\/p>\n\n\n\n Pages will not render PDF files. These must be hosted in Minio.<\/p>\n\n\n\n Max image width for all components <\/strong>but the hero image:<\/em><\/strong> 640px<\/p>\n\n\n\n Max image width for hero images:<\/strong> 1400px<\/p>\n\n\n\n Hero images:<\/strong> 1000px<\/p>\n\n\n\n Text with image:<\/strong> 320px<\/p>\n\n\n\n Callout box:<\/strong> 360px<\/p>\n\n\n\n Two card images:<\/strong> 460px<\/p>\n\n\n\n Three card images:<\/strong> 320px<\/p>\n\n\n\n Image buttons:<\/strong> 320px<\/p>\n\n\n\n Always save the highest quality version of the image you possess. If it originates in Photoshop, ensure that you Save for Web<\/strong>. In most cases, Pages will adjust image weight if it\u2019s a little high, so never go with a compressed image unless you must.<\/p>\n\n\n\n One important aspect of Pages content management is photo sourcing. It\u2019s incredibly valuable knowledge to know how to pick a photo.<\/p>\n\n\n\n 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<\/a>.<\/p>\n\n\n\n Unsplash<\/strong>:<\/a> for general photos unrelated to UT imagery<\/p>\n\n\n\n UT Image Relay<\/strong>:<\/a> must request access, repository of UT Photography to be used for official UT communications purposes. <\/p>\n\n\n\n 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. <\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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 \u201cPhoto Sourcing\u201d section and be sure to take the Photo Sourcing and Color Grading training [link tba].<\/p>\n\n\n\n Before<\/strong><\/p>\n\n\n\n After (as a component in Pages<\/strong><\/p>\n\n\n\n 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\u2019s important to keep dimensions standard across these components. Extremely large images (over 1400 px will be automatically sized down). You can always click the \u201ceye\u201d\/Preview button in Pages to see how different image sizes will look on the live site before deciding.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n If you\u2019re having trouble moving the image, make sure the \u201cmove\u201d tool on your sidebar is selected.<\/p>\n\n\n\n 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<\/a> to accomplish this and adhere to the branding.<\/p>\n\n\n\n Once you\u2019re 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. <\/p>\n\n\n\n How to Save Images \/ Export , What Size, Specs<\/strong><\/p>\n\n\n\n It is generally recommended that you export all images as JPG. If exporting from Photoshop, follow the path File > Export > Save For Web.<\/p>\n\n\n\n Sizes are also an important thing to keep in mind.<\/p>\n\n\n\n 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. <\/p>\n\n\n\n Moreover, it\u2019s 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. <\/p>\n\n\n\n Continuing with the earlier example, saving my crop of the eventual button above, I titled it MaymesterButton-UKEducation.jpg<\/p>\n\n\n\n If you like, you can be more detailed and descriptive with your file name. Just make sure there\u2019s 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. <\/p>\n\n\n\n Pages will automatically include \u201cCollege of Liberal Arts\u201d as default alt text, basically removing the possibility of there being no or \u201cnull\u201d alt text for an image. However, some images may require custom alt text. <\/p>\n\n\n\n Alt text, as it\u2019s usually called, or alternative text (as it\u2019s 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. <\/p>\n\n\n\n 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:<\/p>\n\n\n\n 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. <\/p>\n\n\n\n Quick reference for cases you should not use alt text:<\/p>\n\n\n\n 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. <\/p>\n\n\n\n The key for writing good alt text is to keep things concise and clear<\/strong>. Never begin your alt text with \u201cimage of\u201d or make assumptions about what\u2019s in the image. <\/p>\n\n\n\n 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<\/a>. <\/p>\n\n\n\n Here are a couple of practical examples:<\/p>\n\n\n\n Here is a screenshot from the Czech language page. Each language page has its own banner, and here\u2019s one of them. Do we need alt text? <\/p>\n\n\n\n Answer:<\/strong> No, because it is a banner simply including the name of the language as well as a purely decorative\/aesthetic backdrop. <\/p>\n\n\n\n Here\u2019s another example that I grabbed from the LA 101, under the Student Resources section. <\/p>\n\n\n\n Does this image need alt text? It\u2019s not a graph or a painting; however, it does add supplemental meaning to the page<\/strong>.<\/p>\n\n\n\n Therefore, it should have alt text. Click on the image and, navigating to the sidebar where the gear icon is highlighted, click into the \u201calt text\u201d field.<\/p>\n\n\n\n First attempt: <\/strong><\/p>\n\n\n\n Students in LA 101P classroom learning and collaborating with one another, a collage<\/em><\/p>\n\n\n\n Although this alt text is well-intentioned, it\u2019s pretty verbose. Let\u2019s try to condense it. Also, notice how it\u2019s not one image, but 4 in a collage. Let\u2019s take note of this format to try to convey this to the user.<\/p>\n\n\n\n Second attempt:<\/strong><\/p>\n\n\n\n A collage of LA 101P students working together in the classroom.<\/em><\/p>\n\n\n\n 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\u2019s no sign or information in these images to suggest these aren\u2019t just a collage of ordinary classroom shots. Also, are they working together? Maybe, that\u2019s a pretty sweet thought, but it shows interpretation. <\/p>\n\n\n\n Best attempt:<\/strong><\/p>\n\n\n\n Collage of students in class<\/em><\/p>\n\n\n\n It\u2019s short, succinct, and doesn\u2019t suggest that these are students in any particular class with any particular collaborative aspect.<\/p>\n\n\n\n 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!<\/p>\n\n\n\n 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 … Continue reading Types of Images to Use for Pages<\/strong><\/h2>\n\n\n\n
Image Sizes<\/h1>\n\n\n\n
Maximum image widths:<\/h2>\n\n\n\n
Minimum image widths:<\/h2>\n\n\n\n
Image Sourcing and Basic Editing <\/h1>\n\n\n\n
Photo Sourcing<\/strong><\/h2>\n\n\n\n
Photo Cropping <\/strong><\/h2>\n\n\n\n
Naming Photos <\/strong><\/h2>\n\n\n\n
Alt Text<\/strong><\/h2>\n\n\n\n
What is alt text?<\/h2>\n\n\n\n
Why is alt text used? <\/h2>\n\n\n\n
How do I write alt text? <\/h2>\n\n\n\n
Other resources:<\/h1>\n\n\n\n