ASSETS, SNIPPETS & COMPONENTS KELLY BOSTICK Associate Director Outreach and Support Digital Design and Development University Relations University of Arkansas

AGENDA What are Assets, Snippets and Components What are the differences between them When should you use what Let’s build an Asset Let’s build a Snippet Let’s build a Component Questions

What is an Asset An asset is content that you can create once and use on multiple pages on your site. Edits to assets can only be done to the asset itself, not on the page content.

Types of Assets There are six types of assets currently available: Web Content: Web content assets are used for entering HTML-formatted text or media items such as images and videos. Plain Text: Plain text assets are used for entering text without any formatting, though they are still affected by page styling. Source Code: Source code assets are used for entering source code or scripts such as JavaScript or PHP. Image Gallery (LDP): Image gallery assets are used for entering multi-image slideshows. Form (LDP): Form assets are used for entering forms, surveys, and polls. A database is required to store form submissions. Comments (LDP): Comments assets are unique in that they are not their own asset type; instead, they are a source code asset with code from the platform Disqus inserted.

When to use an Asset When you want to use the same exact content on multiple pages Reusable text like contact info, phone numbers and addresses Article quote Image galleries Basic forms Comments and discussions Code, JavaScript or other client-side scripting

Who can build an Asset Assets can only be built by the highest level admins

Who can use a prebuilt Asset Anyone can use a prebuilt asset as long as assets have been built and given access to

Let’s build an Asset Begin by going to the index page in your section Check the page out, click edit and go into the page source (<> in the wysiwyg editor toolbar) Copy source from page for the quicklinks Content Assets Select what asset you want to make Create asset

What is a Snippet Provide format or layout of information styled with editable text Becomes part of page source code Editable by user Content structure can be reused Can be edited at snippet level or page level For independent content per page Can break code in edit mode on page

When to use a Snippet Tables (including easy accordion tables) Images with captions Table transformations Formatted text to be editable on individual pages

Who can build a Snippet Tables (including easy accordion tables) Images with captions Table transformations Formatted text to be editable on individual pages

Who can use a prebuilt Snippet Anyone can use a prebuilt snippet as long as snippets have been built and given access to

Let’s build a Snippet Make an accordion table, then go into the source editor (<> in wysiwyg editor and copy the html) Content Snippets Category (if needing to create a new category) New snippet Name snippet Copy in html code

Let’s build a Snippet Name Choose category Available (all or specific sites) Description Snippet source code

Let’s put a Snippet on a page Page edit Insert snippet Choose snippet Insert on page Fill out snippet content

What is a Component Components are a form-based type of reusable content that simplify entering information into complex design elements.

When to use a Component Components are best when you want nicely styled content added to your web page

Who can build a Component Components can only be built of the highest level of OU access If you would like to request a specific component you can send a request to webhelp.uark.edu

Who can use a prebuilt Component Anyone with access to prebuilt components can use them If you don’t have the Components option in your WYSIWYG editor notify webhelp.uark.edu

Types of Component Components are great for styled content added to pages that can be updated without breaking the code. Examples of components include: Jumbotrons Funnels Cards

Let’s Create A Component Content Components Create New

Let’s create a component (continued) New Form Create form fields Add design elements html or xml code Drop form field elements into code Save and publish Add component to page

Let’s create a component (continued)

Let’s create a component (continued) Search: Bootstrap Select : V3.3.7 Components Jumbotron Hello World Jumbotron with button Copy code

Let’s add a component to a page Go into page edit Click on the components icon Select the component you want to add to the page Fill out the component form Save

Component example https://nurs-dev2.uark.edu/

Component Issues Components may not be available to you at this time Currently, using the same component multiple times on a site can cause duplication