Tag: images

Image Sizes in Blog Posts

Adding images to your blog posts help break up the content, makes them visually appealing, and enhances your storytelling. By using keywords in the image filenames you can also help boost your Search Engine Optimization (SEO). Alternative text should always be included and captions are highly recommended, unless the reader can already understand the image content based on surrounding text.

Sizing Images

WordPress has a few size options available when you are adding your image. The sizes listed are the maximum size and may be reduced to fit the space available on various devices and will also vary based on the layout of sidebars on your blog site.

  • Thumbnail: 150 px by 150 px (square)
  • Medium: 300 px by 200 px (wide or tall)
  • Large: 1024 px by 680 px (wide or tall)
  • Full Size: the original size of your image

For original images larger than the Large size you should avoid using the Full Size option. The image will not display any bigger, but the Full Size image will slow down the webpage loading speed.

The system will not scale or stretch any images to be larger than their original size. If your original image dimensions fall below one of the listed maximum sizes, that option will not be available for you to insert.

Vertical Images

Vertical images work well for portraits of people or tall structures. Due to the length of the images on the page, the medium version is the optimal size for these images. A thumbnail could also be used. The large option should generally be avoided, because it takes up so much space.

Two students sitting at a conference table studying.
This is the thumbnail version of a vertical image.
Two students sitting at a conference table studying.
This is the medium version of a vertical image.
Two students sitting at a conference table studying.
This is the large version of a vertical image. This option should not generally be used because it takes up so much space.

Horizontal Images

Horizontal images can be used to simulate the layout of a CMSvwebpage by inserting the image without a caption at the top of your post. They can also be used for non-portrait images throughout the body of your post. A good rule of thumb for horizontal images is to insert the largest size available, except Full Size if it is larger than the Large option.

A view of campus from across the waterway.
This is the thumbnail version of a horizontal image.
A view of campus from across the waterway.
This is the medium version of a horizontal image.
A view of campus from across the waterway.
This is the large version of a horizontal image.

Images Smaller Than 150×150

When your image is smaller than the thumbnail dimensions of 150 px square, you will only be able to insert the Full Size image. Notice that a caption may not work so well for an image that is extremely small!

insert snippet icon
This is the full size version of a tiny image.

Continue Reading


Image Gallery Snippet

This snippet will create a grid of thumbnail images that pop up into a scrollable gallery when a thumbnail is selected or a gallery of larger images that the user can scroll through that also pop up into a larger image. For the thumbnail option, only the pop-up image will display the title caption, but they will be displayed on the page for the gallery option.

An example of the thumbnails of an Image Thumbnails with Gallery widget.

An example of a gallery image of an Image Thumbnails with Gallery widget.

An example of the gallery style Image Gallery snippet.Image Gallery snippet.

  1. Using the Image Editor, crop the images.
    1. For the thumbnail option, crop the Square type and either the Banner, Card, or Vertical type. The image must be at least 800 pixels wide in order to have a pop-up.
    2. For the gallery option, crop a Banner, Card, or Vertical image type. The original image must be at least 800 pixels wide in order to have a pop-up.
  2. Select thumbnail or gallery from the dropdown menu to select the gallery display type.
  3. Insert the image in the Image field.
    1. For the thumbnail option, insert the square170 image.
    2. For the gallery option, insert the size that you want displayed on the page.
  4. Enter the title in the Title field to the right of the image, if desired. Linking this text will display a link on the pop-up image for the thumbnail option or both the page image or pop-up image for the gallery option.
  5. Enter the accompanying caption in the Caption field to the right of the title. Linking this text will display a link only on the page image for the gallery option. No links will appear in the pop-up images.

If you are including more than three images, press the Tab key to get more fields.

Continue Reading


Image Auto Grid Snippet

This snippet will automatically flow multiple images or other items into a grid layout. The size of the image will be maintained. This is a great option for displaying multiple logos or other images that do not fit into the predefined Image Editor sizes.

Example of several logos in a grid layout.Image Auto Grid snippet.

  1. If your images do not fit within the predetermined Image Editor sizes, upload the jpg or png file into the CMS as you would upload a file. Be sure to publish your images.
  2. Insert an image or other content to be arranged into each cell of the snippet.
  3. If you need additional cells in the snippet, press tab at the end of the last cell.

If you uploaded images directly into the CMS instead of using the Image Editor, you can resize the images within OU Campus. From the Pages List View hover over the image and choose Edit. You can resize, crop, or rotate the image. Save your changes using the button at the bottom of the page and publish. DO NOT use this method to edit Image Editor items!

Continue Reading


Images

Images are created in the CMS using a gadget. You can crop specific sizes using the gadget, insert the cropped images in pages, and replace existing images. The image editor will automatically publish the images.

Create New: Uploading and Cropping

You will use the Image Editor gadget to upload and crop your images to the appropriate size(s). It’s located in the Gadget Sidebar. Open it by clicking the plug icon gadgets-icon  in the upper right corner of the screen.

You must have a page open to see the Image Editor option in the Gadget Sidebar. Whatever page you have open will determine the folder location for the images folder that the Image Editor will create.

Scroll up or down in the Image Editor gadget to see all the field options.

Image Editor gadget.

  1. Open the page where you intend to insert an image.
  2. Open the Image Editor gadget in the sidebar.
  3. Click the Upload Image button to select an image file from your computer. The file must be a .jpg or .png.
  4. Once your image is selected, you can change the image filename by typing in the Image Filename field.
    1. The title will be the name of the file from your computer with any capital letters made lowercase and spaces or other characters changed to hyphens.
    2. When the gadget saves your cropped images the image type name will be added to the end of your Title.
  5. Check one or more boxes for the image size(s) you want to create. You can also select All to crop all image sizes.
  6. Click the blue Begin Cropping button
  7. A new window will open to allow you to crop each image size you selected. Move and resize the crop box as needed. For all types except Vertical you will not be able to change the aspect ratio.
    1. The image size currently being cropped will be displayed at the top of the page.
    2. For the Vertical type click the Select Whole Image button to select the entire image.
    3. The Preview at the bottom of the window will show you what the final image will look like, to scale.
      Example of a Banner crop screen in the image editor.
  8. Click the Previous button to go back one screen, click the Next button to go to the next screen, or click the Exit button to leave this window without saving.
  9. The final screen you will reach when clicking Next will be the confirmation screen. Preview all sizes of your images. Click Previous to go back and recrop images, Exit to leave the window without saving, or Confirm to save your changes and create the images.

Edit Existing Image

If you need to edit an existing image that was created using the Image Editor gadget, you can follow the same instructions, except choose the Existing Image button instead of Upload Image in step 2. This will let you choose an original image from within the CMS. Once selected, you will be able to continue with cropping.

Insert Image

Once your images have been created you can use the Insert/Edit Image icon from the toolbar to place the picture.

insert-image-window

  1. Click the Insert/Edit Image icon in the toolbar. insert-image
  2. Click the file chooser icon.
  3. Navigate to and choose the correct sized photo that you cropped.
  4. Enter a description for the image. This is the alt text used by screen readers and other assistive technology.
  5. Click the blue OK button.

Replace Existing Image

You can change an existing image and its crops to a new image and have it automatically update across all pages where it is used.

  1. Open the page in the folder that has the images folder where the image you want to replace is stored.
  2. Follow the instructions for creating a new image, making sure that the file on your computer is named the same as the original image that you are replacing (without the -orig part).
    1. If the filename is different, change the filename in the Image Editor to match after you select it.
    2. Make sure you select at least the same crop sizes that already existed.
  3. Publish the page(s) that the images are on.
Image Options
Image Type Name Dimensions Suggested Use
Banner 450, 800, 1024, 1200, 1600, 2400
(px width)1200 x 540 aspect ratio
  • Page Banner Image
  • Gift Box Snippet
  • Image w/Caption Snippet
  • Image Gallery Snippet Gallery Option
  • Image Gallery Snippet Thumbnail Option
  • Pop-Up Image Snippet
Card 400, 800, 1200
(px width)1200 x 800 aspect ratio
  • Card Snippet
  • Gift Box Snippet
  • Image w/Caption Snippet
  • Image Gallery Snippet Gallery Option
  • Image Gallery Snippet Thumbnail Option
Personnel 170 x 230, 340 x 460
(px width x height)
  • Personnel Item
  • Profile Snippet
Square 170, 250, 500
(px width and height)
  • Image Gallery Snippet Thumbnail Option
  • List Spread Tout Snippet
  • Named Testimonial Snippet
  • Profile Snippet
Vertical 400, 800, 1200
(px width)Adjustable height
  • Image w/Caption Snippet
  • Image Gallery Snippet Gallery Option
  • Image Gallery Snippet Thumbnail Option

Learn more about using a banner image on a page with MultiEdit Content.

Continue Reading


Gadgets

A gadget is a little program that provides additional functionality or streamlined access to functionality within OU Campus. Additional gadgets may be created at any time and gadget access may be limited by a user’s permissions. Some gadgets are only located on the Dashboard or on the Gadgets sidebar, while others are available in both locations.

Each individual user can choose which gadgets to show or hide on their Dashboard or Gadgets sidebar; some gadgets are context-specific, meaning that they will only appear when viewing a page or inside an editable region.

Dashboard Gadgets

The Dashboard gadgets generally have site-wide functionality or provide shortcuts to content. The system gadgets available on the Dashboard are:

  • Activity: shows content with recently performed actions such as a scheduled publish, expire, or upload.
  • Bookmarks: Bookmark frequently-used pages, reports, or other OU Campus screens for easy navigation.
  • My Checked-Out Content: shows content checked out by you and the date/time stamp when the content was checked out. Content is linked and can be clicked to for editing or approving. The light bulb icon indicates that the page is checked out and clicking it checks the page back in.
  • Inbox: provides a scrollable list of recently received messages.
  • CheckIn Gadget: check in all content you have checked out with a single click.

dashboard-image

The Configure Dashboard link can be used to choose which gadgets to display on the Dashboard.

Clicking this link brings up the Dashboard Configuration modal.

dashboard-modal

This screen shows the gadgets that are available to you and they can be filtered by name. Functionality includes:

  • Filter: Enter two or more characters to filter by gadget name.
  • Hide: To hide a gadget from view on the Dashboard, click anywhere within the green gadget box or click the checkbox to clear the selection. A gadget configured to be hidden is shown in grey.
  • Show: Click anywhere within the gadget box or the checkbox to select a gadget to show on the Dashboard. A gadget configured to be shown is shown in green.

Gadgets can be reordered on the Dashboard by clicking and dragging the grey title bar to a new “tile,” shown by a dotted line.

Gadgets Sidebar

The Gadgets sidebar is a global element that can be shown or hidden by the user. It can be shown by clicking on the Show Gadgets button that looks like a plug at the top right of the screen.

gadgets-icon

Once the Gadgets sidebar has been expanded, individual gadgets can be collapsed or expanded and you can configure which gadgets appear in the sidebar. The gadgets that are available are dependent upon your access permissions.

Some of the available gadgets include:

  • Activity: Shows content with recently performed actions such as publish, expire, or upload.
  • AssetsDrag and drop any asset into an edit view.
  • Bookmarks: Bookmark frequently-used pages, reports, or other CMS screens for easy navigation.
  • CheckIn Gadget: Check in all content you have checked out with a single click.
  • Dependency Tag Info: Search for and display information regarding dependency tags in the site.
  • Image Editor: Michigan Tech’s image editing gadget used to crop images to the sizes used in the CMS.
  • Images: Drag and drop images from any folder into editable regions or the Source Editor.
  • Link Check: Check for all broken links on a page in the CMS and send a report to any user.
  • Live URL: When a page or story is open this will display the live URL for the item, even if it is not yet published. There is also a Copy Link button.
  • My Checked-Out Content: Shows the content checked out by the current user and the date/time stamp that the content was checked out. Pages are linked and can be clicked to for editing or approving. Clicking the light bulb icons checks the page back in.
  • Notes: Allows users to make public or private notes on any page in the CMS.
  • Page Info: Displays information about the file currently being viewed or edited.
  • Page Parameters: Edit page parameters directly from the gadget without having to navigate away from the Preview or Edit view.
  • Request Help: Sends page and user information along with a custom message to cmshelp@mtu.edu.
  • Snippets: Drag and drop any snippet into an edit view.

gadgets-sidebar

To show and hide gadgets in the Gadgets sidebar, click the Choose Gadgets icon (circled in the image) to be taken to the Manage Sidebar modal.

This screen shows the gadgets that are available to you in the sidebar and they can be filtered by name. Functionality includes:

  • Filter: Enter two or more characters to filter by gadget name.
  • Hide: To hid a gadget from view on the Dashboard, click anywhere within the green gadget box or click the checkbox to clear the selection. A gadget configured to be hidden is shown in grey.
  • Show: Click anywhere within the gadget box or the checkbox to select a gadget to show on the Dashboard. A gadget configured to be shown is shown in green.

gadgets-sidebar-modal

You can relocate the gadgets on the sidebar by dragging them into a different order. Click and hold the gadget’s title bar and move it up or down in the list.

Continue Reading