Spur Help Guide

Welcome to the Spur Help Guide

How to Embed and Link Items from Wrangler

Follow the steps below to embed and link to assets from Wrangler. If you need help, please submit a help desk ticket and a Web Production Manager will assist you. 

Looking for help with CM3? 

Click here to jump to the bottom of the page.

Embed in Spur CM4

Images

Images can easily be embedded from Wrangler. NCBA has created several options to start that work best for Spur CM4. **These options are only available to image media files in Wrangler.

Wrangler Steps

  1. Select the "Share" () button on the image file
  2. To get the embed code, select the "Embed" ( button
  3. From the drop down menu, select a Spur setting (example: Spur 16:9)
    **Refer to the table below for more details
  4. Copy the code

Spur Steps

  1. Open Spur in a new tab or window, navigate to the Media Library
  2. Create a New Embedded Media Item
  3. Paste the embed code from Wrangler in the "Embedded Item Html" field
  4. Select the "Refresh" () button to see a preview of the embedded media item
  5. Enter the details for Item Name and Description
  6. Save Media Item, and place in a post


PDFs/Infographics

Currently, it is recommended to create an image thumbnail to embed PDF and Infographic content and then link to the document from Wrangler in a new window versus embedding the default iFrame. iFrames are not responsive by default, which restrict users to a pre-defined viewing height that does not adjust with different screen sizes or devices. What may work for desktop does not necessarily work for tablet and vice versa. 

How to Embed a Thumbnail of a PDF/Infographic from Wrangler

Wrangler Steps

  1. Open the desired Infographic Category
  2. Filter for "Images" using the filtering options on the left panel
  3. Select the "Share" () button on the image file
  4. To get the embed code, select the "Embed" () button
  5. From the drop down menu, select "Spur 16:9 [Top-Crop]" to crop the image to the top 
    **Refer to the table below for more details
  6. Copy the code

Spur Steps

  1. Open Spur in a new tab or window, navigate to the Media Library
  2. Create a New Embedded Media Item
  3. Paste the embed code from Wrangler in the "Embedded Item Html" field
  4. Select the "Refresh" () button to see a preview of the embedded media item
  5. Enter the details for Item Name and Description
  6. Save Media Item, and place in a post


How to Link to a PDF/Infographic from Wrangler

  1. Return to Wrangler, change the filter type settings from "Image" to "PDF"
  2. Select the "Share" () button on the document file
  3. To get the link, select the "Link" () button
  4. Choose from "Document View & Download" or "Document View"
  5. Copy the link address
  6. Return to Spur where media item has been placed into a post, hover over it to reveal the link icon ()
  7. Check the box that says "Open in New Window," paste the URL and save the post 

Pre-defined Image Embed Crops in Wrangler

  Spur 16:9 [Top-Crop] Spur 16:9 Spur 4:3 Spur 1:1 Spur [Hero/Sub-Hero Images] 600px – Fixed Width 300px – Fixed Width 150px – Fixed Width
Infographics/PDFs as Images              
Images  
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
Crop Settings Top Center Center Center Center No Crop, Resizes to Max-Width No Crop, Resizes to Max-Width No Crop, Resizes to Max-Width

Embed in CM3

Images

Consider if the site is mobile-responsive for proper sizing. 

Wrangler Steps

  1. Select the "Share" () button on the image file
  2. To get the embed code, select the "Embed" ( button
  3. From the drop down menu, select one of the pre-defined options or create a custom embed
    **Can use any option from the drop down if desired, reference the table above for sizing.
  4. Copy the code

CM3 Steps

  1. Open CM3 in a new tab or window
  2. Paste the embed code from Wrangler in the HTML View
  3. Preview the page to ensure placement and save

PDFs/Infographics

Creating a Thumbnail

Wrangler Steps

  1. Open the desired Infographic Category
  2. Filter for "Images" using the filtering options on the left panel
  3. Select the "Share" () button on the image file
  4. To get the embed code, select the "Embed" () button
  5. From the drop down menu, select "# – Fixed Width" to set the fixed width of the infographic 
    **Refer to the table above for more details
  6. Copy the code

CM3 Steps

  1. Open CM3 in a new tab or window
  2. Paste the embed code from Wrangler into the HTML View
  3. Preview the page to ensure placement and save


How to Link to a PDF/Infographic from Wrangler

  1. Return to Wrangler, change the filter type settings from "Image" to "PDF"
  2. Select the "Share" () button on the document file
  3. To get the link, select the "Link" () button
  4. Choose from "Document View & Download" or "Document View"
  5. Copy the link address
  6. Return to CM3 
  7. Highlight the text or select the image, click the Hyperlink Manager button and paste the URL into the text field
  8. Set the Target drop down to "New Window"
  9. Save