Spur Help Guide

Welcome to the Spur Help Guide

Image Best Practices

Recommended Image Ratios and Dimensions

  16:9 [Top-Crop] 16:9  4:3 1:1 Hero/Sub-Hero Images 600px – Fixed Width 300px – Fixed Width 150px – Fixed Width
Infographics/PDFs as Images Infographics/PDFs as Images Horizontal Images Vertical Images Square Images, Head shots Hero, Sub-Hero/Banners Logos Logos Logos
Size (Width x Height pixels) 600 x 338 600 x 338 600 x 450 600 x 600 1300 x 731 600 x auto height 300 x auto height 150 x auto height

Which image file type should I use?

JPG/JPEG

  • Most popular image file type; best used for photography and images containing a lot of detail (colors, shapes, etc.). This is because JPGs have a huge color palette to work with
  • JPGs are also best utilized for hero images and sub-hero banners
  • Can be saved at different quality levels meaning it is best for balancing quality and file size

PNG

  • Another popular image file type; best used for handling images with transparency like logos and charts 
  • Can create a high quality image, but at the cost of a larger file size

GIF

  • An option for small images with few colors like small logos or icons
  • Not as popular or high quality as PNGs

TIFF

  • Highest quality image usually with the largest file size
  • Intended for storing digital images, editing, and print
  • Do not recommend for web use

How do I resize and/or crop my images files?

Option 1: Submit a Help Desk ticket to the NCBA Web Team to resize/crop image files

Option 2: Use free photo editing resources. Ex. Fotoram!o – free web photo editor

How do I reduce the file size of my images files?

Option 1: Submit a Help Desk ticket to the NCBA Web Team to resize/crop image files

Option 2: Use free photo compressing resources.  TinyJPG/TinyPNG  – free JPG and PNG compressor

Practices to avoid?

  • Using people or animal-focused imagery for Hero or Sub-hero posts. The viewable area of a website hero changes depending on viewing device. This means that a person’s head might get cropped off in certain views.
    • The exception to this is Raising Beef rancher profiles utilized on State Beef Council Framework websites which have separate resizing and cropping instructions found on the demo website
  • Using images with text or logos embedded on them
    • Text embedded within graphics tend to be cropped or illegible depending on viewing device.

Upload Image to Media Library

1. Click the 'Select Image' button

After clicking the 'Add New Media' button,  select the 'Image' Item Type and then click the 'Select Image' button. This will open up your computer's window files. Locate the desired image and select that image.

2. View uploaded image in the image preview

The image will upload to the image preview area in Spur. Make sure the image is an acceptable crop and file size prior to uploading the image to Spur. See the Media Library Best Practices section to learn more about most Spur-friendly image crops and file sizes.

3. Add Image Settings

When uploading an image to the Image Preview, the filename and item name should automatically populate in the Filename and Item Name fields. Feel free to edit either field if desired. Add a brief description to the Item Description field that describes the purpose or context of the image being uploaded. Optional: Add a tag if your website has tag functionality. Tags are often used on the State Beef Council framework. 

Important Notes:

  • Do not edit or remove the file extension from the Filename (ex. ".png). This will prevent browsers from recognizing the file type and the file will corrupt.
  • The Item Name also displays as tool tip text when a viewer hovers their mouse over a media item. Make sure to name your media appropriately and clearly.

4. Click the 'Save Media Item' button

Click the 'Save Media Item' button to save the image to the Spur Media Library. The admin can now place the image into any new or existing post.

Add Image to Post

Follow the steps of creating a new post up to Step 3 then see below:

1. Add content block with media area

From the content block list, drag and drop a content block into the Post Editor that includes a media item area. Hover the mouse over the grey 'Click to Select a Media Item' area. The edit icon (the pencil icon) should pop-up and display around the center of that area upon hover. Click the edit icon to open the Media Library.

2. Check the 'Use Responsive Image' checkbox. Select desired image.

To assure that the image will resize and respond to the content block, make sure the 'Use Responsive Image' checkbox is checked. The exception for this rule would be when adding an image to a hero content block. Locate the desired image using the search tools if necessary. Select the desired image by clicking on the corresponding checkbox below the image thumbnail.

3. The image is now embedded in the content block.

From the content block list, drag and drop a content block into the Post Editor that includes a media item area. These steps can be repeated when embedding a video or other embed media items.

4. Link an image in a post

Hover mouse over the image. A link icon will display upon hover. Click the link icon and follow the normal steps of linking to either a site page, media item, or external link.