A testimonial showcase quotes, feedback, or endorsements from students, faculty, or researchers.
It can be used to highlight real people’s experience with a program, unit, or the University in general.
Development
The Folwell Testimonial component is unique in the following ways:
- The template uses the Content Block Template module, which allows the style of the Testimonial to be consistent when used in Views and content references.
- The three different display styles are created and templated using custom View Modes. Users can easily switch between View Modes in the Block UI, and Views can be created that use the View Modes for style output.
- The Testimonial is made responsive using CSS container queries, rather than media queries. This makes it more flexible when placing in a layout as the component responds to the size of the region rather than the size of the screen.
- Style adjustments have been built-in, so if the Testimonial is placed on different Fowell backgrounds, certain design elements change.
Feature view mode
I love that Minneapolis is a working city, not just a college town. Plus, the University of Minnesota has incredible opportunities for research and medical development, with strong connections to top companies and hospitals, giving students a head start on their careers.
Testimonial - image on right
The idea of a story is that it can take people to places that we may not have been ourselves. So when I think about story and marginalized communities and experiences, I think about the opportunity to share stories with people who may have never heard or experienced such things before.
Default view mode
My experience with the National Association of Black Accountants student group on campus has been phenomenal, from the very first time I walked in for a ‘meet the board’ event. I could tell everyone was driven. But their purpose for being there wasn’t just, ‘This is going to help me get a job.’ It was, ‘How do I cultivate a community on my campus for students who look like me?’ I thought that was really fantastic.
My favorite thing about the University of Minnesota Twin Cities campus is ... the turkeys. And I just love a big campus full of students with diverse life experiences! Plus, the campus is unbeatable for walkability.
I love that Minneapolis is a working city, not just a college town. Plus, the University of Minnesota has incredible opportunities for research and medical development, with strong connections to top companies and hospitals, giving students a head start on their careers.
It’s such a lively campus and it’s easy to connect with other people. And I love the football games so much! My high school was big on football, so having that in college is amazing. Everybody there is always so proud to represent Minnesota, and it’s always a blast to attend games.
Text-only view mode
My experience with the National Association of Black Accountants student group on campus has been phenomenal, from the very first time I walked in for a ‘meet the board’ event. I could tell everyone was driven. But their purpose for being there wasn’t just, ‘This is going to help me get a job.’ It was, ‘How do I cultivate a community on my campus for students who look like me?’ I thought that was really fantastic.
It’s such a lively campus and it’s easy to connect with other people. And I love the football games so much! My high school was big on football, so having that in college is amazing. Everybody there is always so proud to represent Minnesota, and it’s always a blast to attend games.
My favorite thing about the University of Minnesota Twin Cities campus is ... the turkeys. And I just love a big campus full of students with diverse life experiences! Plus, the campus is unbeatable for walkability.
I love that Minneapolis is a working city, not just a college town. Plus, the University of Minnesota has incredible opportunities for research and medical development, with strong connections to top companies and hospitals, giving students a head start on their careers.
Create new component with Layout Builder
This will create a new Testimonial component with the Layout Builder UI to be used on the page.
After creating and publishing a page, click on the layout button. This will allow you to design and edit the layout of the page.
From Layout Builder, select + Add Block
In the right-sidebar menu, select + Create content block
Select Folwell Testimonial
The Configure block window will appear for the Folwell Testimonial component. Add a Title to the block. You may optionally display or hide the title you've added to the block.
Upload an image or images. There are two image fields, each with a best implementation, but the component will work with only one uploaded.
Portrait image - This image field is used in the Default view mode.
It should be roughly square in dimension, and will appear as a circle shape. The subject should be centered in the image for best results.
Feature image - This field is used in the Feature display and Feature display - right view modes.
The Feature image can be any dimension, and the subject does not need to be centered in the image.
Enter the Quote text. You do not need to add quotation marks.
Enter the Name of the subject
(Optional) Enter the School/Unit/Department.
This field is optional and will not appear unless it has a value.
(Optional) Add a Link
Choose a View mode
This determines how the component will be displayed.
Feature
Feature displays are meant to use the full width of the page, typically 1200px.
The image and text each have a 50% width.
Default
The default view mode styles the image as a circle and places it next to the Name, School/Unit/Department, and Link fields. This is a more compact presentation, never wider than 617px.
Text-only
Use this view mode if you’d like to have a Testimonial, but don’t have access to a good image.
Click Add block to complete the component build
Scroll to the top of the page and click Save layout to save the changes
Create Testimonial component as reusable content block
Creating the component this way saves it in the Block library, allowing it to be reused as many times as needed. It can be placed on individual pages with Layout Builder, multiple pages with Block Layout, and in custom Views.
Navigate to:
Content → Blocks → Add content block – Folwell Testimonial
- Create the Block as you would in the Layout Builder steps
Add the Testimonial to a page with Layout Builder by clicking +Add block
Search for the title of the Testimonial, or look under Content block section
Choose the View mode
Click Add block to add the component to the page
Scroll to the top of the page and click Save layout to save the changes
Feature images
These images have no specific ratio or size requirement, but it is recommended to have the image size be a good match for the amount of text, or be roughly 1:1 (square) or 3:2 ratio.
For example, a tall image with short text would not be a good match:
In smaller containers (mobile devices, narrow column layouts), the image will stack above the quote, and a tall image will take up a lot of vertical space.
Quote text
The Quote field is a normal Folwell CKEditor field which allows adding media, callouts…etc, but it’s recommended to only enter simple text. Some basic text styling (bold, italics) could be used, but best to keep it as simple as possible.
Adding quotation marks to the text is not necessary.
- Images must always have "alt" text. See the Accessible U website to learn more about the importance of "alt" tags and how to use them.
- Use keywords in the alt-text descriptions that label photos. Meaningful alt-text helps not only with accessibility, but also SEO.