Power Hour: Image Web Parts in SharePoint

[Music] hello everyone i am laura rogers and this is joelle jobson my uh roving reporter in the little window there this is power hour and this is our show that we do wednesdays at 11 central we've been doing this for about eight years and it used to be just sharepoint power hour now it is just microsoft 365 all the different products sharepoint powerapps power automate teams and just all the different apps involved in microsoft 365 and we take this sort of from a business user perspective we're not we're not going to do anything super technical and also i send out a newsletter the day before power hour and you all vote on our topic so the topic you all voted for today is the various ways you can display images on in web parts on pages in sharepoint and so we'll talk about all the different sort of types of image web parts and working with images in um on your sharepoint pages so the fun thing about having power hour live is that we have a live chat and we do this in teams so let me go ahead and share my screen here so when you click the little link below this video that you're watching to fill out the form to join for the first time we manually have to send you an invite so it's not going to instantaneously put you in here but we have this um teams team that you are going to be in and you toggle at the top right in teams over from your company to iw mentor power hour and then once you go to this general channel post is where i'm going to put some resources but you'll see we have tabs across the top and here's today's so you go to today's and then you this little conversation button is probably not going to be turned on so you toggle the chat and then you can push play watch the video and say hello so there's everybody we've been talking about weather so hi everybody and welcome and i'm going to go ahead and i've got a couple of slides and i'll go ahead and share that and we'll get started webparts who knew all right okay so when we're dealing with images in sharepoint there are several different web parts involved so there are several different ways you can display images so we've got i've got several different web parts i'm going to talk about and demo and then there are several different concepts with the images that you might want to do so some of the web parts having to do with images are just static images that you always just want it to be the same thing but then sometimes you might want it to be dynamic you might want it to roll up content from other sites other places multiple libraries and um so i'm going to go over kind of all the different aspects of what the web parts are and then what you can do with them and like i mentioned i've put some resources let me i'll go ahead and pin make sure that i pin my resources here so it says resources for the image webparts episode and i did pin it and it's over here on the post uh channel page tab there channel page tab okay so with images this is what i've got here so i've got a little comparison chart so you'll be able to tell what you you'll be able to do with the image different types of image web parts so i'm going to kind of rattle through all these and then we'll go do demos of them and a couple of them we've already done demos of so first of all with the image web part it is really just an image that you want to display on a page and your this image can have a hyperlink so that means when you click on the image it takes you somewhere and it's not going to be dynamic so it is going to be just whatever image you pick and it's always going to be that image and it's just going to take you to whatever hard-coded hyperlink that you set up in the web part settings and it doesn't have any layouts it does have a little sort of overlay text that you can do then we have the image gallery web part and that one does not have hyperlinks so the purpose of this is just going to be if you want it to show a set of images say maybe you have a company picnic or you have a set of products and you just want to just split display information just for people to view and there's uh there's not a way to set up each image to have a certain link or anything so it's going to have yes they can be dynamic so what you can do with this one is point it to a document library where you've stored a bunch of images and that way just whatever images people put in that library you'll be able to just it will automatically show those and then it's got several different layouts like brick grid and carousel and then it's then the next one we have is quick links now quick links um we've already done an entire power hour about quick links so we're there is a ton i mean there's a ton that you can do with the quick links web part so much that we've already done an entire hour on it so i'm i'll do a little bit on quick links but i'm not going to get super deep in it since we've already done that and then we have the hero web part and the hero web part's the one that you commonly see up on top of just home pages and that's one of the ones that is automatically there and whenever you create a communication site and that one the purpose of that one is to have links is to have these pretty sort of set of tiles of pictures and each one is a link to something and that is also not dynamic it's just going to be always be exactly what images you put in it and it's got tiles and layers and then within tiles and layers you're going to be able to pick how many images slash links that you want to show and then we have highlighted content and this one we also did a whole other power hour on and i um put a link to that in the little resources thing also and that one images can have links at the end the link is actually the link to the thing that you're displaying in the highlighted content web part and then yes they can definitely be dynamic and roll up um because the highlighted content web part is very versatile and it lets you roll up just any particular type of content you can roll up news documents anything like that and then and you can roll up from various places the site the hub a specific site there's a ton you can do with it and then that one has gridless carousel and film strip so um let's see these are these are kind of just examples of what some of the ways are that you that you'll see in some of the settings of how you can display the images and microsoft's kind of changed the verbage of these um a couple of times so everything used to be you'd have tiles and grid and a grid is kind of the same thing as tiles so now things that work hold tiles are called grid now but it's it's the same concept all right let's go dig in and we'll go look at displaying images first of all we have i have just basically created a um a page for each web part that i'm going to talk about here so the first one i'll talk about is the image web part and i'll go here okay so i'm on this page and i'm going to i've got an image webpart this is what an image webpart looks like just out of the box but i'm going to go ahead and delete that and show you what it looks like the the experience of adding an image web part so you'll see it when when you look at frequently used but you can also type image to find it and you can also see it in the text media and content category if you that if you find them via categories all right now this interface that we see right here i'm going to spend a couple of minutes talking about this because you're going to see this anywhere in sharepoint where you're dealing with images anytime that you have to pick an image to be displayed in a web part or on a page so this interface is going to show me that by default it says recent so it's going to show me recent images and a lot of these are images that i've recently uploaded to the sharepoint site and then my favorite is stock images now this is so cool this is um this is fairly new this came out probably six months ago or so this concept of um being able to search through stock images so for example if i have an event coming up and i want to display a nice pretty calendar on my page to to talk about the event i can just to go type calendar and pick one of these lovely lovely stock images so that's where you can look at stock images and then you can do a web search um web searches is all we had before we had stock images so you've got categories when you do a web search and then with a web search you might be able to find something more specific like if you type a particular product name or company name or something like that here it'll search the whole web for it but it's also by default it's going to show you creative commons only which means it's free for anyone to use just free images on the web but you can technically change this to all which will search all of the internet for you know whatever word you search here and you can also change the size if you want to maybe only find small images so that's the slight difference between stock images and web search with stock images someone has specifically put them there and those have all been that's probably a third party company that microsoft has a partnership with that created all the stock images web search you're just looking for stuff on the web all right then we have your organization your organization we actually had a whole power hour about this too so this is that concept of organization assets so in the organization assets power hour we talked about how you can i think it was a powershell script that i had to run how you can create this concept of having your own company's images in a in a particular place that people can use on all the sites joelle have you done projects for any customers that had specific corporate images that they wanted everyone to use on pages and needed to have them in a specific place oh yeah definitely all kinds of brand images and stuff like that it was like probably the marketing department kind of pushing those yeah typically marketing or like corporate communication sometimes too yeah so they'll have pictures of their products they'll have pictures of people using their products or pictures from a catalog and they want you to use their pictures on your sharepoint pages so that's where you could potentially put your site assets and you could and this is just one of the site assets library now when you dig in to a library here i can also view this as tiles which is much more useful when you're looking at images to try and figure out what you want to pick so when i went to your organization these are the three different organization asset libraries that i created the metro one was when i created this so this control concept of all these little sort of metro tiles that was kind of trendy about eight or ten years ago that everybody wanted to have a little metro tiles on their um on their pages so that is where those come from under your organization and you might not even have the your organization tab here if you haven't set up organization assets all right and then you have onedrive and that's going to be my own onedrive and any images that i have there and the site is going to be this site so this is this specific sharepoint site that i'm on right now in on this web part so this is the document library of the site that i'm on so you notice that every time i go to one of these libraries i immediately just toggle this over to the tile view so that i can see what the images are and pick one and then good old fashion upload if your image that you want to pick doesn't exist in the web or stock image and you just have it on your computer and you want to upload it you can pick upload here and then that will actually upload the file and put it in the site assets library on that site and it will put it in your web part but it is going to put it in sharepoint and then from a link is where if if your image already exists in sharepoint or onedrive and you have a hyperlink to that image you could paste that link there so lots of different ways that you can put an image on your page i'll go ahead and let's see i'll go back to this site and i'll just use an image that i've got in the library in this site i'll use the drone picture our iw mentor drone okay so here this is really large and so this image web part is going to put this by default just as the full regular just the size of that image well if it's if it's bigger than the width of the space that i've got this web part in it's it's not going to go off the page but it basically put put it down to be able to fit in the width of the column that it's in so if i was on a page that had multiple columns it's going to squish it down for me and make it show just in in that one little area on the page so that's how that's one way i can make it look a little smaller so when i click on the image i can edit the web part move it duplicate it delete it and it's prompting me it's wanting me to put a little um alternate text on it and it's kind of hinting at that that's what that yellow little yellow thing is so if i want to change what image i've already selected i can change it here but if i i don't have to have this be a link to something but if i did i could just put the link here and then do i want to have some of that text over the image and the text over the image is where it's going to let you type this black in this little sort of black overlay this is a drone now this is a little weird because you're typing it a drone you're typing it directly in the web part and not in the web part settings so that's kind of a little dif like most things you're going to be doing are in the in the web part settings over on the right so i'll just put drone picture so that's my alternate text and now let's see it stop nagging me about it all right so now those are kind of the settings i've gone over now there's more that you can do though look at all these little icons of what i can do with my image so i can resize it which means i can just drag a corner of it down like that i can crop it which ooh that looks that looks a little weird let me see if i can undo that there we go i'll do the crop yeah so the crop kind of smooshed it down a little bit and then it's asking me kind of where i want to crop it so see how that looks that that kind of smushed it that looks really really odd um also i can do the aspect ratio i can pick a specific one so sometimes your marketing department is going to have very specific if you have marketing communications that cares about this thing this kind of thing they might have specific aspect ratios that they want you to use on your images this um is the alignment of the image and then this is where i can reset it so now i can put it back to because i i really messed that thing up and i can save you know whatever little edits i'm making in here i'll go ahead and resize it again there and save so whatever edits you make to the image um you'll need to click that little save button and then i'm going to go ahead look it says the image is too small for a text overlay to add text make the image larger so if i want the image to um if i want that text overlay to show then it does need to be bigger so i would have to kind of just play with the size to make it look the way i want all right is anybody asking any questions yet this is pretty basic stuff so far let me see yes that's true steve well i could ship you a drone to canada i just would yeah i'm not sure what the shipping is gonna cost okay um let's see now that's so that's the image web part and i'm going to discard all my changes and put it back how it was okay so then the next web part that i'm going to talk about is the image gallery and i've got an image gallery on here and so just like i did with the image i'll go ahead and just delete this and re-add it and i can search for it and go to my image gallery so again this is for something like if you have images of the company picnic that you want everyone to be able to see and have them rotate in a carousel or something like that they're just not going to have hyperlinks on them so do i want to have select images or do i want to have dynamically display images from a document library so if i choose dynamically display images from a document library it's going to ask me what document library and whether i want to include subfolders so it's this one is weird because it didn't show me a document library let me go ahead and see if i save this if it makes a difference that is odd because i have a document library that i put a bunch of images in okay okay let me see let me go i'll do the manual way of adding images but i'm going to go back and discard my changes and then just see if it lets me toggle from nope undo that is odd i think that i feel like that's something buggy that it that it's not letting me pick from a document library when i have a document library full of images now this is only going to be a document library on this site so when i'm on this site and i go to my site contents i've got see this is my document library so here all my images that i was practicing with when i tried this web part before power hour started and those and they're in the document library so the idea behind the concept of dynamically displaying them is that if you're dynamically displaying them then whatever images people have put in this library will display in the web part and then you don't have to worry about people having to be able to edit the image web part and edit what that looks like they'll just be able to put the images in the library and then they would automatically display in that web part so that's what that's the gist of what we're getting out here so let me go back to my image gallery okay so what i'm going to do is edit this again and then just add my images so i'm just going to click the button to add the images and then these are going to be this is where i can pick again that same exact interface i can go pick the images that i want just pick a bunch of them okay so now i picked a bunch of images so let's go look at the settings of this one so i've got select images and that's pretty much like like i showed you you're either selecting them or they're displaying from a specific library and then you've got you've got three different ways that they're going to be displayed you've got brick grid and carousel and the carousel is going to let let people go through like a slideshow so there used to be a slideshow web part didn't there joelle do you remember that one yeah there was a there was a slideshow web part where you used to be able to display a bunch of images and have them come from a library same concept so this is if you want to have that concept of a slideshow that's what you would be able to do so you can say how many that you want um how many seconds that you want between each change and then um how you want that to show here so i'm going to see if i can pick more of them so i'm going to choose add my um my phone is going nuts i think that i'm on some kind of distribution list that it that keeps sending like hundreds and hundreds of emails my phone keeps buzzing so sorry i'm turning enough okay a little distracting okay so i'm selecting them so i added three of them just going to add a few more okay so see the brick concept the brick concept looks really cool right because it takes whatever size each image is and it kind of bases the way that it lays them out in this brick layout on sort of the aspect ratio of each of the images so then it just kind of makes it look however it thinks it should look so that's my brick layout and then if i use a grid that's where i can decide if i want them to be square notice that by default it puts them as square and then i could make them 16 by nine and they're wider and then i could be do four by three so it's up to you as far as what their images of and how good they look you know depending on how how it's going to end up rendering whenever they're on the page like this if you kind of make it crop them all and make them square so with the with the grid it lets you do the aspect ratio with the carousel it tells you you tell it whether or not you want it to automatically cycle and if you do want it to automatically cycle that's where it shows you the seconds okay i'm gonna try saving that and i'm gonna try one more time doing that setting of dynamically showing them from the library because that's a little weird that that wasn't working yeah all right i've got multiple document libraries on this site and it is just not showing them listed here in this drop down alrighty okay so that's the image gallery let's see if there are any questions um oh they're talking about the the different stock types of stock images and things yeah those are fun okay then we have quick links all right and again we you know we already did a whole power hour about quick links but right now i have this quick links web part it's not displaying images it's displaying buttons but this is a way that you could display images if you want to so you can actually edit each one of the quick links that you add and each quick link can have an auto selected image or one that you pick so auto selected means that if you have if if what you have here is a link to something like a sharepoint page a sharepoint news page a page that has an image associated with it then that is gonna automatically select the page the picture off that page so i'm gonna i'm gonna pause what i'm doing with this web part and then i'm going to show you what i'm referring to on these pages so i'll go ahead and just save this draft and then so i have let's say let me go look at some recently modified ones i have this web part called my feet this page that i created called my feed so when i'm editing this page and this is just a different web part called my feed but the idea what i'm showing you is a concept about all pages in sharepoint pages are going to have the ability for you to edit the page details so this is where you can control what image would be auto selected when this page or piece of news is being rolled up in one of these web parts like highlighted content or like in quick links when you pick that link and this would be the pa the image that would automatically show to represent that page so i can change my thumbnail here so i'll just do um let's see what is the name of this page my feed my feed and i'll put a cupcake that's silly right okay so then this is the my web part so you understand that what i'm showing you has nothing to do with the web part on this page but it has to do with that page details so then so whatever is in the page details as the thumbnail is what and so this is important having to do with images because that is what how you can control what it shows when it rolls up and joelle do you know when you're working with pages is there does that image thumbnail ever automatically populate itself like do you always have to go and put it on there no it automatically does so if you if you put an image on your page that will automatically become the image thumbnail for that page it will as long as you don't have a header image because i think the header image is always the thing that like takes precedence you know so it's always like the first one that it picks but if you don't have a header image then i think it's the next the next image would probably be like a web part let's go do that on a different page so i'm going to go to my twitter page and i'm going to edit the page and so this is what joelle's talking about she's talking about the header image so i'm going to just pick image and title that's the default that most pages have and then i'm going to give it a header image um i'll just do bird there it's not really a twitter bird but i'll set my focal point there we go so that is now um i'm going to publish this page and then i'm going to go into the details and go see if this is the page um the image that it's given itself yeah so look at that all right so for as you create pages in sharepoint just keep in mind that whatever image you have as that title image is the one that is going to be in the thumbnail but you can go to your page details and change the thumbnail if you want to control what's going to show up when that page rolls up and that's going to be more applicable when we talk about the highlighted content web part 2. um okay so i'll go ahead and um just publish that again okay so back to quick links i'll go back and edit that and then i'm going to change my quick links to have a different look to it so i can do grid or tiles and film strip is also going to use the image so compact is not it can have a little image or an icon but compact is not going to automatically show the image from that page if you've got a link to a page film strip is so this is the image that i actually inserted um uh on this page and so is grid button is not list is not and tiles is not you would think tiles would but grid is going to be more the one you want to use if you want all of your quick links to look like images so i'll go to this one let's see i'll add another link and i'm adding another quick link and for this quick link i'm going to choose the twitter where to go the twitter page so since i'm choosing the twitter page for my quick link look at that see it's automatically taking the image from the twitter page that's the default thumbnail image and it's putting that in my quick link but i can go ahead and change this so like for yammer i can just go change this maybe my yammer page doesn't have just the default image that it pulled in i'll just go click change and then this is where i can go pick a different maybe i can search for yammer and i can display one of these and that looks a little odd it's kind of cut off but you get the idea and then this is my alternate text field for the thumbnail image so i'll just say yammer logo so i can do my alternate text when i'm doing a custom image so let's go to this other one and see i can do alternate text here and this one so anything that i'm showing as an image in quick links i can do the alternate text and i can change what the image is and of course you can change what it links to also in each individual one so this is your this is your settings for the whole web part and this on each image is going to be the settings that you have for that particular image for that particular quick link and again it's just hard-coded it's just going to be one specific link and a specific image but that's how just another way that you can have clickable images on your page okay and the next web part we have is hero go ahead and publish that and go to my hero page [Music] okay so when i'm adding a hero web part let me i've got one already on here but i'll show you what it looks like when you first add it that's going to be one that usually shows right at the top here and so when you first insert the hero it's that's a lot of work i mean it gives you all these things that you have to click and configure so it is a little daunting because when you insert this web part you might not immediately know what you want all the things to link to and look like so let's go look at some of the settings so i have two concepts here tiles and layers and i have one two three four or five so when i change it to layers this is gonna take me all the way down the page it's gonna be five layers so then with layers you have an image on the left and a title and description and even a button over on the right and it just alternates them down the page and so of course i can change it to 4 which is just going to be four layers three so you might not want your page to be that long you might just want it to to have two layers but that's the concept if you have a lot of titles and descriptions and links and images that you want people to scroll down the page to get to that's where you can use the layers and for tiles you just however many tiles you have that's how many ones of these that you'll have and then the one that's bigger is going to be the one that's got some slightly different settings so i'm going to delete this one that i just added and we'll look at this one that i already added the page and kind of look at how different it looks when i toggle it across the different layers and tiles so let's go over what we can configure when it's a layer and kind of what all the settings are on each individual one and then we'll look at it with tiles and kind of some of the differences so with layers so just like i showed you excuse me with the quick links web part you have your web part settings over here and then each individual one has its own settings so the same thing with this web part and you kind of have to hover over it to get to that so it might be kind of hidden at first so i go to like this one is the weather and i click edit on this specific tile and then it's that's where i can edit what it says so um i'm going to create a bunch of quick text using word my little trick equals rand there we go so there's my verbiage that i can put here and so you can see that it does cut off so it's not going to show necessarily everything that you put in this box um but let's see i'll get rid of there there we go that's a good amount of description to have and then you can have so i have my background image which is the one that's showing next to this text and then i also have some alternative text like clouds and i have some other options way down here hopefully you can see this so do i want to show a topic heading so if i show a topic heading what does that look like this is the topic heading so then it starts appearing in purple now because my page my theme my color theme for this site is purple that's why it's showing a purple so you're not going to be able to go change a specific color on a specific piece of text in here it's just getting that color from the theme of your site from the color theme and then do i want to show a call to action link so this one um it just came with a learn more that's just the default but i can decide whether or not i want to show learn more here and um give it some call to action text and a link so and what is it going to link to so the the tricky thing about the call to action link and the tile is that you have a link so inherently each tile in your hero web part has a link but when you do the call to action you're adding a second link so that means somebody's going to be clicking on the cloud to go one place and then they're going to be clicking on this little learn more to go to potentially a different link so to me that's a little confusing i'm not sure you might want to just put the same link in both places if you're going to do that because users might not know kind of what the difference is when they're interacting with the page so then we can go down so we filled in our title description and everything for this first tile and then so you could do the second do the same thing with the second tile and you can have just um another description there um let's cut that off a little bit put a little bit less anyway um and then again same settings you just for each individual one down the page you decide whether or not you want it to have a topic heading which will be that purple and it'll be an uppercase and just depends on how much you have to say so with the with the layers down the page you have the ability to do a lot of content you have the ability to have titles for every single one of these and topic headings and descriptions and two different links so that's just a ton of different options you have let's go ahead and go to the web part settings again and i'm going to switch this over to tiles instead of layers so with tiles you have some different settings for each individual tile so i've got five tiles that's the most i can have and you can see if i change it to four it's still got a big one on the left but then this one's kind of medium size but when i go edit each individual tile it's got some slightly different options so do i want to show the title so that's weather in this case whether is the title so i may not want to show the title and of course each one has a link so i can change what each of these tiles links to and then i can also do an auto selected image so what is an auto selected image that's the thing that i was just talking about a few minutes ago and that is when you are linking to a page or piece of content in sharepoint and it automatically determines what the image is needs to be based on the content that you're linking to like that pager news so then i can do a custom image which means i can just manually change what the image is showing in here with that same same exact interface and i can do my alternative text and then whether or not i want to show the call to action now again this is going to be a little odd because of it being two different links so let me um i'm going to publish this and show you what i mean by that so like this tile is a link and that takes me to this sharepoint page called weather but this learn more is also a link and you can see when i'm hovering over it that's the it's bing.com basically it's taking me to bing so you see that's a little it's a little odd it's a little confusing so um yeah it's kind of up to you again you might want to have them both be the same link or have it make a little bit you know kind of make it make more sense to the end users all right and then then so that's my big tile on the left as actually going to have more options for what i can do with it so when i go to my other tiles let's see like a smaller one see these little smaller tiles the smaller title tile doesn't have that options section so my code snippet does so i can do learn more for for this second tile because it's kind of medium sized but then all the smaller ones are not going to give you that no no call to action but of course you can make this call to action say something else like sign up or something okay and then for each one of these images in the tile and you'll see this little concept in a lot of places you have this focal point so the focal point means that's where especially if you have a bigger image that's where you want it to hone in on on the image so you see how it kind of dragged it across like i'll change this focal point so it's going to let you kind of go around in the image and pick the part of the image that you want to show to make sure that it's highlighting whatever you want to highlight and the same thing goes for when you have um that title of your web of your whole page and you have the ability to change the image so let's go to stock images oh that's pretty and then same goes for that one with the image focal point all right one more thing with the hero web part is for each of these i'll put it on five tiles again you have the ability to change it to be a color block instead so i can do color block and i want this one to be a color block so then that makes it look a little interesting right that gives it kind of a little difference and it doesn't have to be a bunch of images it can just be a couple of images and a couple of color blocks however you want to arrange that but that's just another option you have for the way you want it to look let's see oh yeah and so people are also talking about that column concept too so it also depends on all these web parts are going to look slightly different when you start arranging them in columns on your page too so just like i showed with the image web part it can um you know can shrink when you put it in a smaller like a two column layout or a three column it will get narrower and the quick links will kind of do the same thing it will just arrange itself to be in that part of the page wherever you put the web part okay we have highlighted content next okay here's my highlighted content web part again i put a link to the whole other power hour we did about this one but i'll go ahead and delete this one and show it to you from scratch so highlighted content is my favorite joelle do you have a favorite web part is it the highlighted content it's up there i think my favorite point part is probably quick links oh yeah really that's the one anybody in chat but i like holly content i also mentioned the call to action i use that a lot too oh really we'll talk about that one too yeah it's a good idea because that one can also have an image as well okay so highlighted content is by default it just will say most recent documents and it will just have a bunch of documents but even when it when it's showing documents it's showing images if if the documents are lovely it's going to be showing the images and whatever it rolls up it will show like if it's a news page it will show the image on that news page if it's you know just a sharepoint page that's not a news page either way it'll show that title image or page details thumbnail image by default okay where do i want to roll it up from um i'm just going to say all sites and then what type of file what type of content do i want to roll up i'll pick news and you can see that this looks really really slick looking because it's taking that default image for each piece of news and showing it here and then when i click on when an end user clicks on one of these it takes them to the news obviously now you do have the ability to roll up images but it's not going to be really the same concept and purpose that you'd have in the image web parts that we talked about because if you're rolling up images here then when someone clicks on one what is it going to do so usually when you're showing an image you want to control where it takes them when they click on the image like to a website or something but for these when you click on it it's just taking them to the image so if that's what you're trying to achieve if you wanted to just take them to the image when you click on the image then and take them away from the page potentially that's what you could do but um yeah that's just going to take them to that image itself so that's probably not a best practice probably not what most people are going to be doing with the highlighted content web part in images but probably i would say the takeaway is going to be to that you can roll up things that have images associated with them like events that might have you know images set up on each as you created at each event or news etc so now videos might be more useful if you want to roll up videos and then have then someone clicks on the video apparently my daughter's been in here putting her homework in here you click on the video then it would take them to where they're watching the video um and then of course in our other power hour we talk about all these concepts of where the content is and where you're rolling it up from but then just one more thing about this one is you have your grid your list your carousel and your film strip so the film strip is that's a good way to kind of take up less real estate on the page but give away that people can kind of scroll from side to side see it's got these little dots and you're going to tell it how many pieces of information you want it to show i'll just say like 20. and then since i since it's rolling up 20 pieces of news so i put news in here then it's going to give them lots of little dots they can scroll across when they're interacting with the page so that's that's what the film strip is going to give them and the carousel is going to um look slightly different it's going to have a little bit more information down here at the bottom see carousel is telling me some information about what site it's on and the film strip is um it's got more of that sort of tile it's smaller okay let's see and then we have this is a link that i put in the in the list of resources image sizing and scaling and sharepoint modern pages and it talks about now this is joelle in your experience probably um the communications and marketing departments this is the kind of stuff they really care about the image sizes and things yeah so you have um just if you really really care about all of your image sizes and them having look look a certain way on your pages you can peruse this but then it's got all the details about these web parts that we've been talking about like hero web part highlighted content image web part and it it's just got nitty gritty really nerdy details about all these image sizes now news news web part is not one i just demonstrated but it also of course it rolls up news so inherently it rolls up the images that go with each news page and then um i also mentioned when i went to one of the pages and changed that page title image that's yet another image to be concerned about with you know setting having a certain size and focal point and your thumbnail again will default to whatever that title image is but you can change it if you want to there's the quick links web part and just some tips about that focal point and we'll do one more web part we're gonna do um i'll just republish that and where did it go the the countdown timer does have one an image and call let's go look at call to action joel says she likes this one that is so pretty so the call to action is going to fill up the width of whatever part of the page you put it on and then it's got um again just like the image web part it's got where you can type what you want to show in this little black area but you type it directly in the web part and then separately you have a button that it's going to show that you can tell it what you want the button to take you to and then you can align it a certain way and then just like with all the images we've been talking about you can change it and pick a different image with it from the same exact interface and then you can change the focal point of the image i don't think i changed it but anyway some lovely flowers and there we go okay so that's the call to action and then what if i put the call to action in two columns so you can look i'll look at now it changes my image now you can see that it kind of shrinks itself down so all the web parts we've been talking about will shrink themselves down when you put them in different layouts of the page and that's well that's a way you can make them not look so gigantic if you want to change your uh your alignment and change what your columns are and instead of doing a hero sometimes what i've done is do like a three column section and then just do like if they have like three big topics of their site and then just do like a call to action in each section text or whatever and that sometimes is just it's like it looks a little bit it takes up a little less space than like the big you know hero web part oh that's true i'm keeping it updated all the time nice tip thanks let's see what it looks like when i change oh and change it to purple the back see how i change the background to this section i don't know if we need to have a whole other a whole power hour about this but have you noticed that the sections are collapsible now i actually hadn't i must not be in the tenants i'm working in right now that's pretty cool i mean i knew it was coming but i hadn't seen it in person let's see i'm going to put so i'm going to do another section down here real quick i'm going to do my documents okay so now let me publish this and see that's a little bonus that we've got for the last five minutes is oh look there's the little okay and so sections are now collapsible so this section i made collapsible and this other section that's got the recent documents in it i didn't so let's go so this one is my little gray section here with recent documents and see i can make it collapsible and i can say whether i want it to be collapsed by default call it docs and then this other one i can say i want it collapsed by default and then let's go look at the page what do y'all think of that have you all seen this in your tenant so this section is i made it purple and i can expand it in this section i made it gray and look i can expand it so that's that's pretty neat trying to think of how where i could use that now faq maybe good idea yeah you could put an faq and put each one as a call to action [Laughter] what do y'all think of that do y'all see the the collapsible sections in your tenant i think it's good for like text heavy pages you know i feel like on a home page i mean i would like to see what everybody else thinks but i think on like a home page it may people may miss it like may not pay attention to a classical section but i think like on like a page that's got like a lot of text information on it that might be good to have because then you just click the header like that wiki concept maybe yeah hmm but the uh having the arrow over on the side is a little yeah that's what i think it's like that to me that kind of it's hard to tell you know what i mean like i mean i know obviously within a few minutes you can figure it out a few seconds you can figure it out but it's just not like instantly intuitive that there's something there yeah at least you can click anywhere on it and you don't have to click all the way over here on the right you can just kind of yeah go somewhere in the middle but yeah that is definitely an interesting concept it's kind of cool idea to make them alternate like that though and that would be perfect for a q a so put some text web parts in each one and you could put this yeah the question is here as the section name maybe yeah that's what i was thinking wouldn't it be a good view of that they're all like what mind blown i'm gonna go see if i can find that all right well do you all know everything you ever wanted to know about images on sharepoint pages now that was pretty thorough i can't believe i stretched that front to an hour okay so let's see um let me go to our schedule and go to if you want to know when we're having power hour you can go to our schedule page so um we just had office hours uh this week for our ultimate members power hour next week we have power hour and then the week of september 20th through 24th we have our online interactive course advanced power apps for three days and advanced power automate for two days so i would love to have you join us there um when you click on it you can see that you can actually buy both of them together for a slight discount for 600 so come read all about it all right thanks everybody for joining power hour and we'll see you next time and go ahead and click you can click on this power hour page where you're watching to subscribe subscribe to my youtube channel and subscribe to receive the newsletters have a good wednesday bye everybody bye

Channel: Laura Rogers

Views: 665

Rating: 4.7777777 out of 5

Keywords: Microsoft 365, Office 365, SharePoint, web parts, pages, images

Id: t_EJgOviHRM

Length: 58min 55sec (3535 seconds)

Published: Wed Sep 08 2021