Video Gallery

[Edlio Webinar] Using Videos and Photo Shuffles

Go to Video Gallery Added Jun 30, 2020 •

Copy this URL:
Embed code:	<iframe class="edlio-embed-player" type="text/html" width="640" height="360" src="//help.edlio.com/apps/embed/?v=274927" frameborder="0" allowfullscreen></iframe> Change dimensions

Go HD

In this webinar, we discussed how to make sure your website's content is up-to-date! Our Edlio expert shared tips for administrators and teachers about how to best utilize your Edlio Website's Photo Shuffles and Videos. We also discussed best practices, automatic closed captioning, and more.

Show Transcript

Alright everybody, I believe we are ready to get started. I hope everybody is having a fantastic day. I wanted to thank you all for joining us today for this Edlio Webinar. My name is Danny. I'm a member of the Client Success team here at Edlio. Now today we're going to be talking tips and tricks for ensuring your school site's content is up-to-date and looking fresh as we roll into the 2020-2021 school year. I know it seems like the 2019-2020 school year just ended and for a lot us it did but the beginning of the school year can be pretty hectic and ensuring your content is up to date now is one thing you can do to take a little off your plate for the fall. So we'll be looking at a few different things today and ways you can clean up your site and make it look snazzy by adding some new content. Now, some of the things we'll be looking at today include photo albums, photo shuffles, videos, automatic closed captioning, and a whole lot more. Now, if at any point throughout the webinar, you have any questions, please feel free to throw them in the chat. We have our Technical Support Representative and CMS Guru, Joaquin, here who can answer those questions for you. If for any reason you can't stay for the whole thing today, no worries. We will post a video of this webinar in the Edlio Help Center in the coming days. So let's get started. The first thing I wanted to focus on here is Photo Shuffles. You'll see here on the Edlio College Prep website we have a photo shuffle up here at the top shuffling through all these photos here. I also want to take a quick look here at the bottom where we have our Featured Video. Now these are two things we're going to be convering in a little bit. Every site is different, your videos or your photo shuffle, if you do have one, might be in a different spot, I just wanted to give you an idea of where they are here. Shuffles, up at the top here, these are special slideshows that appear on your public website. It's a slick way to show off your school, your students, or even another way to disseminate information to your school community. We saw a lot of schools putting up infographics here related to COVID-19. You can even hyperlink these photo shuffles to external pages for any information you might want to disemminate to your school community. Let's go ahead and see how we can update these. I'm going to go to the admin page. Just a quick reminder that not every school has these. If it is something you're interested in reach out to your Client Success Specialist and they'll give you more information. We're on our admin site. Let's log in. I am currently logged in as a web administrator. Only web admins and accounts designated by the website administrators will have access to editing those photo shuffles. Let's say you have a teacher in the school who's a real shutterbug and you know that person will put up really good content for your photo shuffles to represent you and your school but you don't necessarily want to give them complete admin access to the rest of your site. You can actually give that person access to just edit the photo shuffle. I'll show you how we do that real quick before we look at editing that photo shuffle. So you can give a regular user access to editing that by going to Site Management > User Management. That's where we are now. We'll come down here and select this user. Edit profile. We're going to scroll all the way down [silence] This is where you can give admin access to site wide features to regular users like this teacher that we're giving access to edit Photo Shuffles right now. Select "Photo Shuffle" and we'll save. We'll be going into that account in a little bit so I'll show you what it looks like on the teacher side of things if somebody's been given admin access to certain parts of the site. We'll go in and start editing the shuffle now. You do that by going to your hamburger menu here, Media > Shuffles. Now you'll see all of the shuffles on your site here. We're going to be updating this main shuffle here. When you open this it does auto-default to Slide Layouts. This helps you choose the style and arrangement of your slides. We have four pictures here and we generally recommend anywhere between 4 to 6 photos here for a couple of reasons. A user might come to your website to access information and won't be looking at your photo shuffle for too long so photos down the line they might get missed missed by users who are just coming to access information. Also, if there are a large number of images in the Photo Shuffle, it'll definitely lengthen the amount of time that the site takes to load, which is something to think about. Let's look at what we can do with these photos here before we start adding new photos because we're going to take down this "Congrats Class of 2020" photo. We're very proud of our graduating seniors but now it's time to get ready for the fall and time to start honoring this new crop of students coming in. First let's look at what we can do here. We can crop this photo. We can zoom out or in, rotate the pictures if you like. Like I said before you can go ahead and add a hyperlink to this as well so if you want you users to be able to click on this image and it will take them out to an external site you can add that here. Caption position-- so every single one of these here, you have the ability to add a caption if you like. These don't. You'll know that your picture does not have a caption if this says "Click to add text." That means there's not caption at the moment. You can switch the position of your caption if you like-- top or bottom. Lastly here we have our Alt Text. For any site site that has accessibility turned on which is most sites at this point you have to add Alternate Text here to make sure your website is as accessible as possible to those with either visual impairments or auditory impairments. This is one thing you can do to make visiting the site more accessible. We do require it whenever you add a photo and we'll see that in a little bit. Let's actually delete these photos here. We're taking out this "Congrats Class of 2020" photo and this one as well. We'll go here to Upload Media. You can see here what types of files are accepted-- JPEGS, PNGS, GIFS We do recommend using landscape photos. Now by that I mean an image that is wider than it is tall or a photo shot in a horizontal orientation as opposed to like a portrait photo that is a taller than it is wide. Let's go back here and add some photos. [silence] [silence] [silence] [silence] [silence] There we are! The first thing it'll show us here is that we need to add alt text for these and we do that by going back to Slide Layout. We have our pictures here. [typing] ... and classroom for this one and we'll put distance learning for this one. As we go into to the fall semester, a lot of schools are already anticipating that they'll be utilizing distance learning again this fall so this is just an image to highlight that because learning is changing for a lot of us here over the past few months and we just want to get a picture here to highlight that. Let's save so we don't lose anything. The last thing I want to take us down to here is Slide Transitions. You can set the duration for each slide to appear on screen and how it will transition from one slide to the next. Let's look next at our navigation controls. This is how you can interact with the photos at and choose transitions between each photo here. You see here we have right now there's nothing on the side to transition between each photo. We have the arrows here to transition, carousel, and again this is how users will be interacting with the shuffle. We have our carousel, our numbered slides, and our dots. You can add these top, bottom, left, or right on any of them. I am a fan of the arrows so we'll keep that for now and we'll let these site here for just a little bit. We'll do 2 seconds for each photo. Down here we have our transitions. Now this is my favorite part of shuffles. We have multiple options to transition between all of your photos. This is where you can get real creative in highlighting how you want to showcase these photos and transition from one to the next. We have all of these different options here-- random, blocks, fade, background fade, collapse blocks but we'll keep it simple for now and we'll slide left. Alright, great! We'll see what this is going to look like on the public site in a bit. The next thing I want to look at is videos. We can get there by going to the Hamburger Dropdown Menu, Media, and Videos + Audio People like to add videos to their sites for a multitude of reason. Some people have regular weekly addressed to the schools as a way to get information out to their School Community. We've seen a lot of schools making highlight videos to celebrate the class of 2020 and a lot of schools lately have been using it to include a permanent Principal's Message-- just a message from the Principal that says, "Hey! This is who we are and this is what you can expect from us." As a web admin, we can see every single video here that has been uploaded or embedded into the CMS under school. Personal will show you any videos you have personally added. We don't have any right now. If you do have a lot of videos, you can search them up here and then the next I want to draw your attention to is Featured Now we saw on the homepage before our featured video was down here at the bottom. So we can unclick that and we can make a new video feature here We'll make this Edlio Engage Overview video the new Featured video. [silence] We'll refresh this. There we go and it's updated already to our Edlio Engage featured video Now let's look at uploading a video together. We'll do that by coming to new video or audio. Here we have all the accepted file types. We have a bunch for video and audio and our max file size for uploading here is 2 gbs-- just to note that. Now let's go ahead and find our video We'll add a nice welcome back to school video So it's calculating the amount of time it'll take to upload While it's doing all of that, we'll add a title and whatnot We'll add "Welcome Back to to School!" Our description-- [typing] [typing] [typing] [typing] and again just like those pictures we saw before we're going to need alt text on this, so let's just do "welcome to school video" It looks like up here we can see our video has been uploaded. It is just now being converted. The next thing I want to look at here is our closed captioning feature which is pretty nifty and necessary for ensuring your content is as accessible as possible. You want to confirm the video's language here because that will affect how the captions appear in the video. Now each video uploaded automatically, in addition to the closed captioning, comes with a transcript as well. This transcript comes from the closed captioning. [audio breaking up] We'll look at just how to edit these in a second because again since it's not being done by a person, it's not perfect but we want to make sure we edit these and have it just right. We'll go ahead and save. Alright, there's our video-- Welcome Back to School! Since we just uploaded it, it is automatically going to be featured, so when we go back to our home page we will see this video on the bottom but what I want to do now is go ahead and edit the captions just so we can see what that looks like We can click here and select edit or just click on the the title there and we're going to come down here to edit captions. One thing to note here, as I said, is that the transcript here comes from the captions. We want to make sure that we override a transcript every time we edit a caption. So let's click off that box Select Edit Captions Now we're inside the edit caption page. You'll see here that each line appears for 2.5 seconds so that's how long your closed caption will appear on screen, so you can select play and as the video plays you'll notice this bar here that's highlighted blue. Alright and as the video is playing through the blue indicates this is the current spot of the video. If you notice something is off a little further along in the video you can also skip here and it'll bring you along to that point in the captioning. It does take some time for the captions to generate, so we have a few here. There's a little bit we can edit First thing we'll add, "Hello" there. Then we'll click save Alright, changes saved and great! We will go back So we've updated our captions here. So let's go back to our videos real quick I see here that our caption updated there with the Hello and the exclamation point Let's say you want to embed this video onto another website. I can actually grab the embed code right here-- copy embed code-- copy that and paste it wherever you need to You can also embed videos from other websites like YouTube to your Edlio site. Let's go ahead and do that. We'll do that the same way we did before. New Video or Audio. We'll click Embed here. Let's get that embed code So if you're going to go to YouTube for something like this, make sure you have your video pulled up, go to share, embed, right there, paste it right there. Let's give it a title [typing] [typing] [typing] [typing] Let's go ahead and click save Since we just added this one, it's going to be the new top, featured video. I just want to give you an idea of what that would look like. With embedded videos, it's important to note that the closed captioning, if there are any for that video, it'll come from wherever the video was sourced from, so you will not be able to edit those in the Edlio CMS. So if you're embedding from some place like YouTube, then that's where the close captioning is going to come from So we have this video featured here Now let's go over here and refresh and see what we've got so far. Just one moment. Alright, so we can see here our photo shuffle has been updated. We have that photo we added before and that one as well and we're cycling through two seconds at a time. Now if you do hover over the shuffle, it will pause-- just to note that-- and down here we have our new featured video that we just added. Alright, cool! Now we've been looking at shuffles and videos as admins but now I'd like to go and see what this looks like from a teacher's perspective. So let's go ahead and log in as a teacher and see how we can use photo albums on our teacher pages. [silence] [silence] [silence] Alright, perfect so I am logged in as Daniel here. He is a teacher at a Edlio College Prep and he wants to edit his teacher page to be ready for the incoming students for the 2020-2021 school year. You might remember, this was also the user to whom we granted shuffle privileges in User Management. So if we go to our Hamburger Dropdown Menu > Media, normally shuffles wouldn't be here. It would just be photos and videos but since we granted him that privilege before, shuffles appears so he can edit that homepage shuffle. What we're going to do now is update some content, add some photos to his teacher page for the upcoming school year. So we'll go to go to Page Management and Pages. We have everything here for his teacher pages. So we're going to go to his photo album. We got one album here-- field trip photos. Now he wants to add some summer vacation photos. Let's upload these. [silence] [silence] [silence] [silence] [silence] Again, jpegs, pings, and gifs are the accepted file types. Perfect! So we're all done. Lets' go and see our photos. We need to add that alt text. These are surfboards. ... and sunglasses. So, we're good to go here. We'll see what this looks like on a teacher page in a second. Now we'll go ahead and update Daniel's page here so we can see what it looks like to add photos in a page. We'll add this here. It looks like Daniel had a page for the end of the school year. "Thank you for another great year. Thank you to everybody for another outstanding school year. it was challenging and unlike anything we've ever done but we did it. I'm so proud of all of you. Congrats to the Class of 2020" and we have a little Class of 2020 sign there. Let's update this so Daniel is ready to go for the Fall 2020 school year. We'll uodate this. [typing] "Welcome Back to School!" We'll keep this photo of Daniel here. We'll add a little welcome message. Now there's a few different ways we can add photos here. We can either add it inline here, in the the text box. We're adding a photo. You can either grab a photo the internet and add a source there or you can upload it like we did before. What I'm going to do here is actually add a photo below. We have this Class of 2020 picture. We can take that out. We'll delete that and add a photo. [silence] [silence] Just like before, we'll add a couple photos. [silence] Alright and just like before, we'll add our alt text. Alright, so this looks good to go now. So we'll go ahead and publish this. We will see here what this looks like on the public website. "Welcome back to school." We have those images here-- and one thing I did want to show you-- with these photos. There are a couple different way we can utilize these. We can add them here almost as a shuffle so it will rotate between each photo. We can also stack them on top of each other-- one on top of the other-- kind of like a rotating shuffle. So we're going to stick with that for now. This is Daniel's teacher page. "Welcome back to school," we have those rotating pictures, we have some posts there and then that photo album that we just uploaded-- Summer Vacation. We'll come in here. Check out these photos that Mr. Benson just uploaded. Alright, just to highlight everything we did today-- we updated this teacher teacher page, added these new photos, added this photo album. We'll go back to the homepage here. We updated this Photo Shuffle. Coming on down here, we updated this featured video and then edited some of the captions here. I think that'll wrap everything up for today. If you do have any other questions or concerns we'll stick around here for a little bit. Now please don't hesitate to reach out to your Client Success Specialist or Tech Support if you do have any questions. If you're not sure who your Client Success Specialist is, please reach out to clientsuccess@edlio.com and we'll point you in the right direction. I also recommend visiting help.edlio.com. We'll hop over there right now. Tons of great resources here, lots of articles, past webinars, a great resource to use as your building out your website. Now, again, I want to thank all of you for joining us today for the webinar. We'll be hanging around here for just a couple more minutes in case you do have any questions. Throw them in the chat feature here and our Tech Support Representative, Joaquin, will answer those questions.

Listed in Back-to-School

Video Gallery

[Edlio Webinar] Using Videos and Photo Shuffles

Popular Videos