Using Assets

This transcript document is associated with the sixth video, "Using Assets", in the Using Omni CMS Udemy course.

Let's talk about assets. Assets are a way for you to have repeated content on your site, where the actual content itself is only updated in one spot. So several types of assets exist. We have the web content, plain text, and source code. These three are primarily focused on that. You can have a bit of content of either of these types. Source code gives you more of a raw HTML, JavaScript, PHP code editor. You can do whatever you want there. Plain text is just going to be a blank bit of text, not really meant to have any formatting or code language there. And web content, you'll get more of a web visual editor like we've been using. But they're all meant to have some code snippets or content bits that you can use across your website. It's kind of hard to describe how assets can be used, because it's fairly open-ended on how they would be used. We used to work with a department that would use a plain text asset for a newsletter they would send out. So they would have some newsletter, with links to the current issue. But then they had all, of those links that were going to their current issue, there was a plain text asset in the middle of the link that whenever they updated the plain text asset, it would just update those URLs. So it would be issue number and then the plain text asset. In that plain text asset, it would be 25. So then the URL would cascade down to be issue 25 and the URL would go off. Maybe a better example of something like we had recently updated the United Supermarkets Arena website. Currently right now, they have this right sidebar with this upcoming events table, this event booking information, the Backstage Pass newsletter sign up, and then these links to TTU Athletics. I don't think technically this is using an asset, but it easily could. So having all of this content, all of the code to drive this sidebar, have that all be in an asset. So if you changed what your event booking form would be, or maybe changed this helper text that you wanted to have, or changed what the newsletter was called, or maybe added more athletic departments that you wanted to link to, you could do that fully from the asset. And so that's kind of what these web content, plain text, source code assets would be. If you have a bit of information that you want repeated across your site, I think an example I gave in a previous video might be, let's say you want your mission statement on the bottom of all of your web pages. Well, you can just make an asset, put the mission statement in there, and then just put that code snippet on every page, wherever you want it to be. So that's one way of using assets is kind of that generic content.

Next, we can talk about images or image galleries. So image galleries are ways that you can kind of show and display sets of images on your site. I am actually going to edit an asset I already have so I'm going to go find the image gallery asset that I want to edit. We go to properties first, whenever you are creating an asset, you may have noticed in the asset list. Sometimes there are assets here that there are some for various sites. You can see here's a couple from the Provost site. Here's from a couple other websites. Even though I'm on the Omni training site, I'm seeing assets from other sites. It's always best then on your name of your asset to prefix it with your site name, just to help group those together. So even though I have all of these other ones in this site, if I scroll through to where the Omni training ones are, I can still see the block that are assets for this site specifically. So because I've named them consistently, even with this time I misspelled Omni training, this time I put a space there, the other times look okay, that one, that user changed the text a little bit, they're all still roughly in the same spot. So keep that in mind, it's a practice I try to do, is prefix it with the name of your site, give you some kind of thing to separate it often with a dash, and then a name for whatever the asset is. A lot of these names on things, this name is not shown to users, it's more you give it a name that's descriptive of what the asset is, what the image gallery is, how it's used, when it's updated, those kinds of things. So whatever name makes sense for what it is, go ahead and give it that. Kind of the same with the description field, not ever shown to users, nothing that we require, fully on you and your documentation, so things like where do these images come from, who gives them to you, what time of the year do you get them at, what pages are including this image gallery, those kinds of things, purely documentation for you to know what this is, who updates it, that kind of thing, when it gets updated. So those are some tips there, you can kind of ignore the tags and the lock to site fields.

We're going to go here to edit. Here we have some tools to edit the image gallery whenever it shows up, so maximum thumbnail size. The images I have here, I think they're roughly 800 by 500, so maybe we'll do, so that's 6.25. So 125-ish would be a good height for those. So just doing a bit of math. It's often best whenever you have image, whenever you're showing multiple images on your site, if you make them all about the same aspect ratio, if not the exact same aspect ratio, you're going to have a lot easier of a time. In this case, I think they're all roughly 800 by 500, I think they're a little bit off from that, so I just try to roughly find their aspect ratio and then make it a size that makes sense. So it shouldn't squish or shrink these images too much. And then do you want the original aspect ratio or do you want to crop images down? I'm going to say go ahead and crop, if an image is too big, we can go ahead and crop. I don't have anything to put here in the advanced. And here we have the images, I've already added some images here. We have titles and description and caption fields that you can populate with information. These also serve as alt text image descriptions for the fields, so they're read off by screen readers. I forget exactly which field is read off, but setting these with appropriate values can give some context to your users. Someone annoyingly with the image gallery asset, it's not tying to a folder of images on your site. You do have to upload them separately from your computer, from a location that you have. So you'll need to download the images that you want and upload them through here. It kind of stores them. You can't reference these images from within Omn, kind of the data storage of them is a little bit different. So that's a little bit funky there, but just make sure you have the images and upload them. Honestly, for adding these images, I actually put the web address here in the file name box because you can do that with file uploaders. You can point to public web addresses as long as it was a .jpg image or like an actual image file. And so I did that to add these images. I just went to the site and grabbed their URL. So you could do that as well, but just keep that in mind. So I have the settings here how I want. I've got three images added. I'm going to go ahead and hit publish. Probably need to hit publish again, just like on the others. Well, it may take a minute. So we'll just be patient when I hit publish. It is saving these images for the first time. So that likely is going to take a minute where it's saving off these images in a way that the website can reach. So that might take a minute.

I will go ahead and move over to the page. So I have the example page I was working on in a previous video. I'm going to go ahead and edit on that. I'm going to find a spot on our page. I'm going to do the insert asset button, which is like this two arrows kind of going in a circle with the label insert asset. And I'm going to find that image gallery I made before. So it should be this Omnitraining-BC image gallery. So I'm going to go ahead and select that and hit insert. There's not really much to see here, but it's telling me that it's been inserted there. Note here that I'm shown the name. So if you're for editing a site and you see asset, something like this cannot be shown in the WYSIWYG. This is giving you the name of that asset. So Omnitraining-BC image gallery. And sure enough, that's what this is called is Omnitraining-BC image gallery. So I know that's how I can go find it and know how I can go edit it. Go ahead and hit publish here. Added an image gallery. Okay, we can see a little preview of that, but we can go over here. And if I refresh my page, we have our image gallery. So we have our images here. It looks like those thumbnail settings didn't come through. I wonder if there's just something a little weird with that setting. So that's fine for now. We can see those images showed up. And when I click on these, I get more context here and I can scroll through those images. That's kind of the default way that these image galleries are showing up on a page.

But we do have other things that we can do with that. So one other way you can use the image gallery asset is to actually have a slideshow of images on your site. We've talked about components in a previous video. I'm going to go into Insert Component. And I'm going to look for Image Slideshow Photo Gallery. I'm going to insert that. I'm now shown a tool to pick the gallery asset. So I'm going to go find the one that I made. Insert it. Now I have some options to fill out. So I'm going to make it a Cycle2 slideshow. I'm going to have the slides be the same height as the first image. Again, if you are working with images that are all the same aspect ratio, and ideally the same size, things are a lot easier. So I'm going to make them all the same height. I can have them be the order of an image gallery. You can also choose to randomize them. You can reorder these images as you would want in the asset. But for me, it's fine how they are. I do want it to pause on hover. That's kind of a good accessibility thing. I'll have it show the title of the description as an overlay. That's good. Yes, I want to show the controls for the next and previous arrows to help users navigate. That's going to be a good thing to do. Showing pagination to let users select specific parts of a slideshow, that would be a good thing to do. We'll have a medium time between transitions. Okay, yeah, so how long a given image is shown. You can even set a custom if you want. Hopefully long enough to make it so your users can capture in those images. And we'll make the transitions medium speed. You can kind of play with some of these settings. Some of them we should maybe make default and maybe not editable. We probably want to always have controls and always have paginations. But there we go. I've made that there. You can kind of think about this now. The gallery asset itself is hosting the images and their metadata. I think also their link targets. So if you click on one, where it would go. But everything else here is the actual settings from a slideshow. So that's kind of how you can build this on your site. I'm going to go ahead and hit publish. Added image gallery component to create a slideshow. Let's spell component correctly. And so now we see the original way those images were shown. And then the newer way where we have this slideshow on our site. And you can see it cycle through the images. Should take about four seconds between each one. But we see the left and right pagination arrows, or controls. We can see the pagination buttons here on the bottom. Like one for each image we have. All of that is there. We have our title and descriptions that were being shown. So all of that is working as we would expect. Those are all settings we enabled. If we wanted to change those, we could do that in there. But this is a kind of quick and easy way you can make a slideshow on your site. You just again make an image gallery asset. Add your images to it. And then on your actual page, go in and add that image gallery component. And that will draw it out on your page. So it's an easy way to have. Again another use of the components where it would be a kind of complex thing you could add to your site. But you could do it without writing a single line of code. So definitely a good thing that we're providing for you.

The last thing we're going to be talking about is online forms. So again I'm going to go back to assets. I'm going to find my contact form. We'll take a look at properties. Again you want to prefix all of your assets with the name of your site. So you can easily find it and then end it with something descriptive of what the form is, where it's used, why it's used, that kind of thing. For description you have quite a bit of space to provide what this form is, when it's used, how it's used, who gives you the data to update it, who it needs to be delivered to, anything like that that you have about what this form is and why it's being used. That can just give you a spot for you to put that kind of description. If I go over here to edit, we have a variety of form fields. I will say currently the Omni Form Builder is not the best form builder out there. That's not really anything disparaging to say. It's great at what it is. It's great as a very simple form that you can use and put on your websites that would be on a TTU website that can do simple data entry. It's going to be great for things like a newsletter sign up or a basic contact form or something like an event RSVP that's very basic. Those kinds of things are going to be great for a job application or a scholarship application, something where you have lots of fields of information with file uploads or form logic where entering one data on one field would show different data from other fields. It's not really built for that. If you are someone that is good at programming, you could make a webpage that's behind eRaider and have an Omni Form and then you inject eRaider data onto the form, name, email, those kinds of things, hide them. You could do JavaScript form logic to show and hide fields. All of that stuff would likely be a great use of an Omni Form. If you know how to do those kinds of things, it would be a great tool for you. If you didn't really understand the last things I said in the last 20 seconds, then you may not have that kind of use for you. Keep that in mind. It's a very basic form. You can use it. As with other TTU software solutions, you need to make sure you're using an approved software vendor to collect data, especially institutional data, especially FERPA data from students, publicly identifiable information from staff, from anyone affiliated with Tech. Your options are going to be this Omni Form, Microsoft Forms, and SurveyMonkey are your only options with a few exceptions here and there. Make sure you're always using those to collect data.

We have some pretty basic form elements. Just looking at the list, single line text fields, so great for things like a your name, email address, phone number, that kind of stuff. Multi-line text, so a paragraph box entry, any kind of short answer comments kind of field. Please describe your experiences. Let us know how we did. Anything that's more long form, you can have that. Radio buttons, check downs, drop downs, those are things where you can give users a list of things to select and they select some number or one of those to have. You can have some validated data. Instead of someone typing in the 20 different ways Rawls College could be listed, you have it the one way that you want to find. Date and time picker, if you need to collect things like a birth date or event start or an event end date, you could have fields for that. Instructional text, that's useful for providing helper text on the form, kind of in the middle of some fields saying that hey, here is what we're expecting here or maybe even at the end of the form, you want to have some additional information. When I worked with Staff Senate, one of the things we would do, you'd have an event signup form here, but often need users to go pay some admission fee through a TouchNet storefront. So at the bottom of the form, we'd have some instructional text that said, "hey, thanks for applying or thanks for RSVPing for this event. You also need to go here to make a payment." So any kind of final step instructions you can use an instructional text field for.

Here over on the right, we do have the fields already in this form, so please enter your name as the label. The label is what's being shown to users, so you want that to be as descriptive as possible, letting users know what information you want to enter into that field. Here we want a name, so we're going to ask please enter your name. You know, we could give it a label of like"You can call me...". You could kind of fill in that sentence to be like oh, you must want my name, but there's no reason to be cutesy about it. You can just say please enter your name and have that field there. The label is what's being shown to users. The name field is more of an internal unique field value that is referring to that field. You want this to be long enough to be descriptive of what the field is, but short enough that it's easy to work with. Whenever you go to make a new field, I'm going to just say like, "What do you do on a typical Sunday?" When we look at the name that was generated from this field, it tries to slam all those words into one line, which does come across. I might want to shorten it to "typical Sunday", just so it's a lot shorter, a lot easier to type. You do have a couple things that you would work with this value. It's not immediately shown to end users, so you don't have to worry about that too much, but it is referenced in a couple places. You want it long enough that you know what the field is, but short enough that you're not hating yourself every time you have to go use it. There's the label in the name field. Helper text, just some additional information about what the field is and how you can fill it out. Default text, if you want to pre-fill the text out with information, you can do that. You can mark fields as required. There are some very basic validation rules you can have, so email address, minimum length, or regular expressions. If you are someone that knows regular expressions, I'm definitely not one of those people, but you can fill in that information there about what would be relevant or what relevant checks to pass whatever expression was entered. We're going to go with none here. It is important for your failure messages to be descriptive of how a user could have messed that up. I believe here on our email address field, we have validation of email address. Our failure message, it's more than just "This field is required". It's saying, "Please provide a valid email address." We're pointing to what a user could be doing that could have failed this field. If it's like, "Please enter a tech ID," it's like, "Well, it needs to be an R followed by eight numbers." Or if you're collecting dates on the field, you may want to compare those dates to make sure the end date is after the start date. You wouldn't want to just say, "The dates are wrong." You'd want to say, "Oh, it looks like your end date is before your start date. You should just fix that." Anywhere that you can kind of give those clues. You're not just saying that something is wrong. You're also saying, "Hey, here are some things you could have messed up." The advanced field, we can leave blank for now because we don't really have anything advanced to do here. We have that name field, an email address field. The name there is email. It's needing to be a valid email address. It's required. Nothing in the advanced. Please describe the degree to which you enjoyed this course. It's our next question. It's a multi-line text field. We have a big text entry there. We shortened that big long label down to just be "enjoyment". That's helpful, but not required. We don't have anything here. The last thing on your form should be a CAPTCHA field. CAPTCHA is useful for if you want to make sure that only humans are filling out your form. You don't have robots. You're not getting bad submissions. That's where CAPTCHA is useful. For that, you need to label it as ReCaptcha with the R and the C capitalized. You want to make sure it's not required. In the advanced field, you need to enter capthca equals true semicolon. Just like it's shown here, capthca the equals sign true and a semicolon to fill that out. That will draw the CAPTCHA field on your page. If for anything, TTU does have security bots that are actively scanning TTU websites for security issues. If you don't have this field, the security bot might find your form, maybe on like a Sunday at 1 A.M. and fill it out a couple hundred times just to try to break it and see if it can get any kind of information out of the form and out of the databases. If anything, adding the CAPTCHA field will stop that bot from filling it out. It's good that we have bots scanning our own systems when I'm sure malicious actors are doing the same things too. Always do this on your form to make sure that you are protected. That's everything with the form. Here it's just a basic contact feedback kind of form.

We now have email address. I always like to send an email back to the user. Here in the to address, I have the two curly brackets, email, followed by two curly brackets. These curly brackets are how you can reference the form data from above. It's using the name field. Here in our email address field, the name is email. Basically, all that I'm doing in this to box is saying go look at that email field, whatever was entered, put that in the to of this email. The from, it's going to be from no reply. That's fine. The subject, form confirmation, any kind of clue of what the form is and just confirming what it was. Then the email body itself, hello name, again, referencing the name field from above. Thank you for submitting this form. And then all the data that they entered onto the forms. Your email address and then please describe the degree to which you enjoyed this course and then enjoyment. You could select the include all submitted values. The problem with this box is it's going to use these internal name codes followed by whatever they entered, which isn't great. You wouldn't want someone, there's a certain pay grade of people that probably wouldn't want to see those internal codes that would more likely want to see the actual labels of those fields. Reduce confusion, that kind of thing. That's why I always write emails out this way where I put, manually type out the label of the field and then put the curly bracket kind of notation to include the form data. Do things like this. You can have multiple emails on here, so sending one back to the user is going to be a good idea. Also not a bad idea to send one off to your own inbox. If you're using this kind of form as like a space or equipment reservation, you may want to get some notification every time a form is filled out because you may have some active work you need to do. In that case, you would probably want to set up an email here. Probably not going to you specifically, but some group mailbox owned by you or your department that would get an inbox no matter who was on staff or who was currently working. It always gets the appropriate message. Try to set that up with your team. Don't just make it your address. Try to make it something that's more generic that you can call to.

Let's see, other settings on this form... Okay, yeah, you also have what message you want to show users on a success. In this case, I just have, "Hey, we received your submission." You could also redirect users to another spot on submission. I kind of like just showing a success message, but you can redirect users somewhere else if you needed to. You also have failure messages. Again, it's helpful with failure messages if you describe how a user could have failed. Please ensure you have filled out all required fields, the email address field requires a valid email address. We had one field that had a specific validation, and so my error message, I'm calling out that one validation rule they could have missed. If you had a more complex field, be like, "Okay, well, the email address needs a valid email address. You could have entered your birthday in the wrong format. This other field is required. You need to say yes or no." You know kind of plant those breadcrumbs of where someone could have messed up. We're going to save results in a database because we want this to be a form we can use. We can have the submit button say, "Submit." That's fine. We don't have anything advanced here, so we can hit "Publish" to save off this asset. This is where I should note also, assets always publish all pages that they are included. Everywhere this asset has been included, it will now republish to have this updated form. You don't have to update the asset and then go publish the page again. Publishing the asset will also publish the web pages. That's handled for you. Right now, I don't think this is included on any sites, so we're going to go back to our test site.

I'm going to hit the "Insert Asset" button again. Let me give me some space to do that. Now I'm going to look for our contact form. There it is. I'm going to hit "Insert." Again, we just get a message that can't be shown in the WYSIWYG, but we do get labels for what that contact form is. I'm going to go ahead and hit "Publish." Added the contact form. Our page is published. We can see in the previewer we have a form there. Sure enough, as I refresh our page, we have our form here in the middle of the page. We have "Please enter your name, email address, please describe a degree to which you enjoyed this course. It was awesome." Then I have the CAPTCHA. I'm not a robot. Select all squares with motorcycles. [completes a CAPTCHA, selecting all images with a motorcycle] Hit "Submit." Now we have that we have received your submission. We have a success message to go through. Sure enough, if I pull up my email, "Hello, Ben Chamness. Thank you for submitting this form, email address, my email address. Please describe a degree in which you enjoyed this course. It was awesome." I have all of the data from my form.

You can also, as another way of viewing form data, if you are in the asset, you can go to "Form Submissions" and view all of the submissions from here. Do know that having... Looking at the form submissions, it does check out the asset. Just like on web pages, assets can only be worked on by one user at a time. It does kind of mean if you have multiple people working on an asset, only one of them can be looking at the submissions at a time. You also admittedly don't have awesome tools in here for editing this form data. You can delete some responses. I would kind of recommend taking this data, exporting it as a CSV, and then using Excel or other tools to edit, clean up, do whatever you need with the data. Don't necessarily try to manage it in here. You could delete some submissions in here, but it would be better served editing it in a different tool. We can see here, I have my name, email, enjoyment. Again, notice it's using those internal name fields and not the label shown publicly. We just have name, email, and enjoyment, where this was like, "Please enter your name, your email address, and describe the degree to which you enjoyed this course," or whatever those labels were. That's really just if you needed to deliver this to a higher up, you may want to clean up those column titles a little bit. The Captcha field doesn't store any information, but we do have IP address and the date submitted. We've got a couple other information, IP somewhat identifiable, and the date submitted when that form was actually filled out. That is all the information on the form.

That is pretty much everything with these assets. As always, if you have any questions, feel free to reach out to itteamweb@ttu.edu. I hope you have a great day.