Website Demo Page: Images
Learn about different ways images can be displayed on our website.
General Considerations
Our patrons are looking at our site on a wide range of devices, that are often significantly different than the screens staff typically use. Because of this we need to carefully test our content using the developer tools in Edge or Chrome, and by trying out pages on a mobile device.
Staff tend to be on standard 1080p desktop monitors, but patrons tend to be using lower resolution screen laptop screens and about 65% are on smart phones. Every year the portion of mobile users grows, making it important to focus on. You can view more details in this PDF report from GA4. Note the differences in average engagement time (it is significantly longer in desktop).
Testing In Mobile Using Microsoft Edge
This is a very handy tool, and much easier than using your cellphone.
Also note we can embed video in pages. They need to be hosted in our Youtube channel. They look great but if you reload the page you can note they can be a little slow to load, especially on slower connections.
Inline vs Media Blocks
Images can be place on pages using either a few different media blocks or by placing them inline in body blocks (text boxes). Both methods have their strengths but often media blocks look a little more polished.
Inline Image Pro/Con
+ Can be used in a couple smaller sizes to add colour or visuals alongside text
+ Work well in text heavy pages
+ Don't break up the text as much
+ Can accommodate images intended to be smaller, like logos, or images in portrait orientation
- Size isn't 100% customizable
- Where text wraps can unpredictable, and depends on the screen size/resolution
- Often will look great on some screens but not others. Often looks better in desktop than in mobile.
- End result often looks less 'clean' compared to media blocks
- Some inline container sizes default full frame in mobile, limiting their usefulness for the majority of users.
Media Block Pro/Con
+ Image is in it's own block and doesn't interact with the text
+ Consistent across a wide range of screens
+ Usually looks better in mobile than an inline image
+ Images are larger and often more impactful
- Breaks up text more and often works best at the beginning or end of blocks of other content
- Takes up more space on a page
- On lower res desktop screens (like a 1080p laptop screen) they can kind of dominate
Types of Media Blocks
There are a few different options:
- Banner images
- Standard media blocks
- Feature content blocks
- Billboard images
Banner Image
The first image on this page is an example of a banner image.
We have removed most of these from the site. They are the first thing the user sees on the page. They look great in mobile and on higher resolution desktop screens but on lower resolution laptop screens they put the text too far down and on some screens the user can't see the page heading without scrolling. This can make it hard for the user to confirm they are on the right page.
Standard Media Blocks
These are smaller than banner images but still take up most of the page width. These look very consistent across different types of screens and you can use these without having to worry as much.
Feature Content Blocks
These are also very consistent across screen types. Big banks of FCB's will feel fairly long on a mobile device though. These are used to link to other content across the site but also add colour and visual impact.
Stream a quality collection of kid's movies, TV series, and storytimes. There is also great math, science, and language learning content. App available.
Hear stories and sing songs. Parents and caregivers can share books and language with children to encourage a lifelong love of reading.
In the 21st century, everyone's literacy will count... it's worth the investment.
Come talk about books with other teens and make new friends in a monthly Book Club at Clayton.
Join us for our monthly book club! We will read a new title each month, and have a friendly discussion!
Request delivery of library materials, try assistive technology, borrow accessible books. Available for eligible patrons.
Billboard Images
These can be used to link to other content, in the same way you might use an FCB (feature content block). We haven't used these on the site yet and in my opinion they look a little unfinished.
Inline Image Options
Images placed within body text blocks have their own 'containers' that help the image scale up or down depending on the screen. They can also be left, centre or right aligned.
Container Sizes
The first three options are the ones we typically use. We can ask for further options from Coldfront if the need arises but whatever we ask for would need to be a commonly required image size and a fully customizable image container isn't an option.
Full Container Width
1/2 Container Width
1/3 Container Width
Default
Default and embedded were the original container sizes when the site launched. They are more or less the same as full and 1/3.
Embedded
Inline Image Alignment/Text Wrapping Options (1/3 Container)
How text wraps around an image will vary a lot depending on the screen. If you opt to use this please test.
Left + Break Text (default)
In the heart of the Enchanted Forest, where the trees whispered secrets and the rivers sang lullabies, lived a curious fox named Fennel. Fennel had a coat as red as autumn leaves and eyes that sparkled like the morning dew. One day, while exploring a hidden glade, Fennel stumbled upon a peculiar sight: a tiny door carved into the trunk of an ancient oak tree.
Intrigued, Fennel knocked gently. To his surprise, the door creaked open, revealing a spiral staircase that seemed to descend into the very roots of the forest. With a mix of excitement and caution, Fennel ventured down the steps, each one glowing softly under his paws.
Left + Text Wrapping
At the bottom, he found himself in a cozy underground chamber filled with glowing mushrooms and shelves lined
with ancient books. In the center of the room sat an elderly owl named Orin, who looked up from his reading and smiled warmly.
"Welcome, young Fennel," Orin hooted. "I've been expecting you. The forest has chosen you for a special quest."
And so began Fennel's adventure, filled with magical creatures, hidden treasures, and the timeless wisdom of the Enchanted Forest.
Centre + Break Text
In the heart of the Enchanted Forest, where the trees whispered secrets, the rivers sang lullabies, and the squirrels held impromptu dance-offs, lived a curious fox named Fennel. Fennel had a coat as red as autumn leaves and eyes that sparkled like the morning dew—basically, he was the George Clooney of foxes.
One fine day, while Fennel was busy perfecting his moonwalk in a hidden glade, he stumbled upon a peculiar sight: a tiny door carved into the trunk of an ancient oak tree. "Well, that's not something you see every day," he muttered, scratching his head with a paw.
Right + Text Wrapping
Intrigued and slightly hungry (he was always slightly hungry), Fennel knocked gently. To his surprise, the door creaked open, revealing a spiral staircase that seemed to descend into the very roots of the forest. "Great, a stairway to nowhere. Just what I needed," he sighed, but curiosity got the better of him.
With a mix of excitement and caution, Fennel ventured down the steps, each one glowing softly under his paws. "Fancy lighting, must be an expensive place," he thought.
At the bottom, he found himself in a cozy underground chamber filled with glowing mushrooms and shelves lined with ancient books. In the center of the room sat an elderly owl named Orin, who looked up from his reading and smiled warmly. "Welcome, young Fennel," Orin hooted. "I've been expecting you. The forest has chosen you for a special quest."
"Special quest? Does it involve snacks?" Fennel asked hopefully.
Orin chuckled, "Patience, my furry friend. All will be revealed in time."
And so began Fennel's adventure, filled with magical creatures, hidden treasures, and the timeless wisdom of the Enchanted Forest. Along the way, he discovered that even the most serious quests could have a touch of humor, especially when you're a fox with a knack for finding the funny side of life.
Inline Image Options with 1/2 Container
The same options are available but this will give you an idea of how the slightly larger container might look.
Left + Break Text (default)
In the heart of the Enchanted Forest, where the trees whispered secrets and the rivers sang lullabies, lived a curious fox named Fennel. Fennel had a coat as red as autumn leaves and eyes that sparkled like the morning dew. One day, while exploring a hidden glade, Fennel stumbled upon a peculiar sight: a tiny door carved into the trunk of an ancient oak tree.
Intrigued, Fennel knocked gently. To his surprise, the door creaked open, revealing a spiral staircase that seemed to descend into the very roots of the forest. With a mix of excitement and caution, Fennel ventured down the steps, each one glowing softly under his paws.
Left + Text Wrapping
At the bottom, he found himself in a cozy underground chamber filled with glowing mushrooms and shelves lined
with ancient books. In the center of the room sat an elderly owl named Orin, who looked up from his reading and smiled warmly.
"Welcome, young Fennel," Orin hooted. "I've been expecting you. The forest has chosen you for a special quest."
And so began Fennel's adventure, filled with magical creatures, hidden treasures, and the timeless wisdom of the Enchanted Forest.
In the heart of the Enchanted Forest, where the trees whispered secrets, the rivers sang lullabies, and the squirrels held impromptu dance-offs, lived a curious fox named Fennel.
Centre + Break Text
Fennel had a coat as red as autumn leaves and eyes that sparkled like the morning dew—basically, he was the George Clooney of foxes.
One fine day, while Fennel was busy perfecting his moonwalk in a hidden glade, he stumbled upon a peculiar sight: a tiny door carved into the trunk of an ancient oak tree. "Well, that's not something you see every day," he muttered, scratching his head with a paw.
Right + Text Wrapping
Intrigued and slightly hungry (he was always slightly hungry), Fennel knocked gently. To his surprise, the door creaked open, revealing a spiral staircase that seemed to descend into the very roots of the forest. "Great, a stairway to nowhere. Just what I needed," he sighed, but curiosity got the better of him.
With a mix of excitement and caution, Fennel ventured down the steps, each one glowing softly under his paws. "Fancy lighting, must be an expensive place," he thought.
At the bottom, he found himself in a cozy underground chamber filled with glowing mushrooms and shelves lined with ancient books. In the center of the room sat an elderly owl named Orin, who looked up from his reading and smiled warmly. "Welcome, young Fennel," Orin hooted. "I've been expecting you. The forest has chosen you for a special quest."
"Special quest? Does it involve snacks?" Fennel asked hopefully.
Orin chuckled, "Patience, my furry friend. All will be revealed in time."
And so began Fennel's adventure, filled with magical creatures, hidden treasures, and the timeless wisdom of the Enchanted Forest. Along the way, he discovered that even the most serious quests could have a touch of humor, especially when you're a fox with a knack for finding the funny side of life.