香蕉视频

We're thrilled to share these new image formatting options with you!聽

Note that these options are only available in the new WMS. If you haven't migrated yet, don't worry - you'll have access soon!

Before we begin, make sure you know聽how (and how not) to use images on your site. Images are just one tingredient in your design and content strategy! Bear in mind that the best sites:

• Focus on image聽quality聽rather than quantity.
• Use images to support user needs (skip images that don't add real value).
• 鲍蝉别听chunking,听negative space, and text formatting options to break up content-heavy pages. Don't rely solely on images.
• Write in plain language to make sure key messages are clear.

How image collections work

The new WMS allows you to create collections of images that can be inserted in pages on your site. When you insert an image collection, you have three display options:

Default

The default view will just stack your images:

Anything wider than the main content area will be scaled down to fit, but otherwise the images are unstyled and unprocessed.听

In most cases, this looks bizarre and disorganized. We don't recommend using this view.听

Carousel

Carousels show one image at a time:

Users can navigate through images using the left and right arrows, and the聽dots below the carousel show where they are in the collection. Users can also "jump" to specific images by clicking the corresponding dot.

Images in carousels are scaled to fill the width of the content area. On regular desktop screens, this means all images will be 1164 pixels wide. (Smaller images will be scaled up to fit, which may lead to blurry or pixelated images.) Images won't be cropped, so the height of the carousel will vary depending on the height of each image.听

Carousels are great for allowing users to concentrate on one image at a time. They help users take in details that are only visible at larger sizes.听

Grid

This shows all images stacked in a grid:

Users can click images in the grid to open an individual image as a page. This will reveal the file name, which is used as the page title. As with the carousel view, opening the image as a page will make it fill the content area. Images smaller than 1164 pixels wide will be scaled up to fill the space, but they won't be cropped. The height will remain proportional to the image.听

Grids are a great way to allow users to skim collections of images. Grids let them see all the available options, compare between images, and choose which (if any) to look at in detail.听

Prepare your images

To get the most out of your images, you'll need to do a little prep before you head into the WMS admin interface.听

Establish a strategy

A content strategy that considers images聽is the best way to make sure your imagery works well on your site. This doesn't need to be elaborate. Even simple concepts or guidelines can help your images feel more meaningful and cohesive. Ensuring your image gallery fits into this strategy helps it reinforce the aesthetic or the message of your site.听

In some cases, image collections are more documentary and less carefully integrated into your content strategy. In these cases, it's okay to bend the rules a little. Try to find images that match your message, signature color, or style, but don't worry about nailing every single one. If your site's audience benefits from an image, that's a good reason to include it - even if it's not a perfect aesthetic match. (We'll look at strategies to handle stylistically diverse galleries in a moment.)

Consider size and composition

Start with the largest and highest-quality versions of your images. Ideally they'll be at least 1920 pixels wide. This will work for many features in the WMS, including hero images which are scaled to full screen. At a minimum, images in galleries and grids must be 1164 pixels wide. (Any smaller will mean they're blurry or pixelated when full size.)

For carousels,听we recommend you crop all your images to a standard size. Otherwise, the carousel will expand and shrink as users navigate through it. This can be disconcerting, and it might mean that content lower down on the page moves in and out of sight as people click through.听

For grids, you don't need to crop. However, the system will render each photo in your grid in landscape format. You may want to crop (or at least test) to get the best results. Set a focal point when you upload each image to avoid awkward cropping.

You may want to crop images yourself to get a more desirable composition. For example, you may want to zoom in on important elements, or cut out distracting or irrelevant parts of the image. You might improve the visual impact of your image by following (or strategically breaking!)聽.听

Upload your images

You can find detailed information for how to do this in the聽McGill IT Knowledge base. In short, you need to create a collection of images to populate your carousel or grid:

1. Navigate to the "Content" admin menu and select the "Media" content type.
2. Click "Add media" and select the "Image collection" type.
3. Name your collection and use "add media" to add images to it.
   1. Make sure you also add informative alt text for each image.
   2. Use captions or credits if you need them. If you plan to use captions, it'll look more consistent if you use them for all images.听
4. Drag and drop the images into the desired order.

Choose the ordering

Carousel

The order of images in your carousel will depend on your objective, but it's best practice to go from most-to-least important. People's attention will drop off as they move through. The earlier an image appears in the carousel, the more likely people are to see it.听

Some examples:

• If your goal is to promote students living in residences, you might pick the most popular housing options or most appealing photos first, and put the niche accommodations or less attractive photos later in the set.
• If your goal is to showcase an event, you might want to lead with shots of the most important moments or images that convey the spirit of the event as a whole. Later in the set, you might include close-ups, incidental moments, or other shots that require context to be meaningful.听

Grid

For grids, people's path through is less predictable. Where they direct their attention will depend on:

• What they're looking for and how closely individual images match their target;
• How large their screen is, and how many images they can see at one time; and
• Relative or subjective comparisons between images (such as which look most impactful, beautiful, or comprehensible).

This means there's no obvious usability-based recommendation for how to order the images.听However, from an aesthetic point of view, paying attention to order might improve the appeal of your grid.

You might consider using a consistent style within each collection of photos, or ordering photos so that obvious differences (such as people vs. landscapes, color vs. black and white, or wide angle vs. close up) are evenly distributed.听

Regardless of the format and order of presentation,听quality is key. A collection of great photos will always look better than a collection of mediocre ones!

Build your carousel or grid

Once your images are optimized, uploaded, and organized, you'll add them to your layout. Note that you should only put image collections in 蹿耻濒濒-飞颈诲迟丑听regions. Although they are responsive for mobile devices, they don't scale well enough to be used in the "highlighted" region, nor do they perform well in half-width or smaller layout regions.

Otherwise, adding a carousel or grid is pretty simple:

1. Go to the page where you want to use the images. In the WYSIWYG editor, click "Add media" and choose the "Image collection" option.
2. Click on the image collection in the WYSIWYG, and choose your desired format:
3. Enjoy!

Need more help?

All the features of the WMS (including these) are described in detail in the聽聽(also called the KB). If you're having trouble finding or using a feature, start with the KB!

Still feeling lost?聽聽to get hands-on help.听