MENU

Spur Help Guide

Welcome to the Spur Help Guide

Add Items from Wrangler

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

Embed in Spur CM4 with Wrangler Integration

1. Search for file name

After selecting the Wrangler Item Type, enter a search term of specific file name in the Search Assets search bar. Then click the 'Search' button to open Wrangler search results.

2. Locate and select desired media item

Locate desired media item from the search results based on your search settings and select the item. The search filters are similar to the search filters on the Wrangler website. 

3. Confirm media settings and click 'Save Media Item' button

After selecting an item, the metadata (FileName, Item Name, and Item Description) should automatically populate in the appropriate fields. If any metadata is missing, please fill the required fields in. When done, click the 'Save Media Item' button to save the item to the Media Library.

Embed in Spur CM4

Images and Videos

Images and Videos 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.

1. Click the 'Share' button

Locate desired media item on the Wrangler website and then click the corresponding 'Share' button.

2. Complete Share settings

To locate the embed code, click on the embed icon (<>). In the Embed drop down, select the ratio of the image you want to pull an embed code (*Refer to Ratios table below to learn more about Spur ratios). Under the Intended Use drop down, select 'Website'. When done, click the 'Show Embed' button for Wrangler to reveal the embed code.

3. Copy embed code

In the embed code field, copy the entire code and return to the Spur website.

2. Paste code in Embedded from Html field

Paste Wrangler item embed code into the 'Embedded from Html' field in the upload embedded media module. Click the 'Refresh' button to view a preview of the embed item. Click the 'Save Media Item' button when done.

PDFs/Infographic Embeds

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.

To embed the thumbnail that will link to the PDF, follow the steps for embedding a Wrangler Images and Videos (above). When selecting a crop for the image, select the Spur 16:9 crop. This will take a 16:9 ratio crop out of the topmost section of the full PDF (most often used for info-graphic thumbnails).

After embedding the thumbnail image in a post, follow the steps below to link the desired PDF:

1. Click the 'Share' button and then copy the link

Locate desired the media item again on the Wrangler website.  Click the corresponding 'Share' button. Set intended use to 'Website', Click on the link icon to reveal and copy a direct link to the full PDF. Link the Wrangler link to the thumbnail image in a 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