Microsoft 365 Community Community Demos, 28 Jul 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Image Column Type formatting in Microsoft 365

Description

In this 14-minute developer-focused demo, Chris Kent’s time saving, error avoiding recommendation to upload images to Site Assets and automatically expose them in a list’s Image column, no manual linking necessary, is just simple! Format Image column appearance using sub-properties. Use the sub-property - thumbnailRenderer and drive thumbnail option to select image size from Microsoft Graph. All formatting code is found in the referenced image-lightbox sample. Hover card and dynamic picture sizing shown here as well. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on July 8, 2021.

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting documents:
• Documentation - List thumbnails for a DriveItem | https://docs.microsoft.com/en-us/graph/api/driveitem-list-thumbnails?view=graph-rest-1.0&tabs=http
• Sample - Image Lightbox | https://github.com/pnp/List-Formatting/tree/master/column-samples/image-lightbox

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

All right, then, let's get started, I'm chris all right, so we're going to talk about uh an image column type today. So uh traditionally, we've had you know if you want to do an image as a column in your sharepoint list, right you're going to do it's basically just a hyperlink column, right, you'll, choose hyperlink or picture, but really all you're doing is linking an image from somewhere else, whether it's in your sharepoint site or somewhere else. Right. When you do this, you can set a description right and formatted.

A

You can access that through the desc sub property. uh Then nice thing is you can edit in a grid view very exciting about june of last year? It's 2020., I think it rolled out by october, so everybody should have it by now across office. 365 is the new image column type.

A

This is we're going to upload those images directly and they're going to be stored in your site, assets, library now, there's a ton of sub properties we can get to in the list formatting which we're going to take a look at here and just one thing it cannot be edited in grid view. You have to edit that form right.

A

So all that being said, let's take a look at how we can take advantage of the image column and how we might format that so we head over to our traditional uh warrior horses site, we're just going to pick on a list, uh quick agents here, you know: we've got a nice normal list here lots of different formatting. Let's scale that up just slightly all right- and let's say we add a new column and this time we're going to choose image.

A

So traditionally again, you would choose something like hyperlink right and then you would choose the type or whatever picture. I remember where the option is anymore does not matter because we're looking at the image right. So we choose image here. So the image is typed. We're just going to call this pretty. That sounds exciting. All right call it whatever you want, but the idea is here we add pretty image and then we edit these items. So again, if I just kind of open this up here, I go to pretty and add an image directly.

A

It's going to open up. I can upload an image right here, so in this case I'm going to say traditional horse hug, I'm going to upload that it's going to show up right there and close this out just a couple more. So we've got a couple extras here, so we can see what's going on inside another image.

A

Let's pick another beautiful image here of a horse, uh let's just say: where's the evil eye horses, perfect, okay, all right! So now we've got a couple of them here and that's cool, and so traditionally you know the out of the box.

A

Formatting on these is going to show just a tiny little icon and when you click that it's going to open that image almost full screen, it actually has a maximum size of 3000 by 2000 in a new window and that's cool right, I mean that's a huge uh benefit and if we actually look where these are stored, right we'll actually see that they're in the site, assets library with a in a folder called lists with a folder with the do it of the list id here.

A

uh One to note is that if you swap that column out or use the picture again you the picture again has been uploaded again. If you delete the image off of the list item, it's not going to delete out of the side assets library. So that's just some fun facts for you, okay, but what if we want to format this right? So I've got my column settings I'm going to format this column and I've got this beautiful box here, let's make it slightly bigger all right. What can I do with this right?

A

So if I say elm type, all right, we'll just make it a div for now, which sort of makes a ton of sense, we'll say, text, content right, we're gonna, say at current field right. Take a look at that object. So we know it's got sub properties. So there's a number of sub properties and we'll take a look at a little bit like you could say like file name, for instance, there we go now we have that file name there, so we can get that out of the image.

A

We can also do things like you know: server, rel, relative url, all right which scenario and you can actually see just like. We've talked about it's in that site assets folder inside the list with to do it and all that, and if you wanted to change that around you wanted to say this was a you know. Now it's an image and instead of a text, content we're going to say attributes and I want to say I want to say source.

A

Let's just copy this thing out there, let me text content for an image right. This might be the traditional way. You would do this all right do something like that. Maybe you want to be a little fancy. You want to make sure it works inside teams, you say eagles, say, add current web plus right. uh You can preview that and oh we gotta add the uh slash, because you know that makes sense.

A

Okay, so we had a plus here, but the idea here is: we can do kind of traditional well, we'll ignore what I'm doing here, there's also a uh server url. We can use. Okay point, though, is we've got several sub properties, but there's also this whole other area of sub properties called the thumbnail renderer, which we're going to take a look at and thumbnail renders got things like the sp item. Url, it's got a sponsor token. It's a file version got a bunch of extra stuff that we can use.

A

So what if we wanted to do kind of a traditional, we wanted to at least map what they were doing right. So if you recall what they were doing is just a box here all right. So if we wanted to map that or kind of imitate that we've got a format here and everything I'm pulling out here by the way is part of a lightbox sample uh which is put together by uh let's say it wrong, jiaofiario.

A

Well, it does mumble it enough. Then you'll get it right. We'll take a look at that sample in a minute, but the idea here is: if I do that right, it doesn't look a lot different. All I've really done is I've got that same image.

A

I put a cursor, but instead I'm doing this fancy thing here where I'm accessing the thumbnail render as an sp item url right, I'm going to the thumbnail, I'm saying the first one on the next zero I've got a custom size of 4840, I'm going very fast on all this kind of craziness. Here that's happening.

A

All of this is using the underlying sharepoint version, 2 rest api, which is really just using graph. So you can actually check out uh what's happening here when it's getting that kind of drive option. So if we take a look at what that looks like here, we just uh well updated f12 to inspect that we had f12 right. We go to inspect that guy, which is now very tiny.

A

You can see this sucker all right, but the idea here is: you can actually see what it generated all right. So it's it's going in. It's got that drives link. It's got a bunch of ugly good type stuff, but all it is is taking care of all that. For you and again all I did or all we're doing is grabbing this thunder renderer sub property and getting sub objects.

A

There mostly just cut and paste this right, but the idea here is: if we look at this api, we see, we've got some different options, mostly around sizing all right. So you see, we've got uh about that guy. There we go so we've got this custom 48 by 48. Here right. We could change that instead of custom.

A

We could say you know just have one of their default sizes, like small they printing, that we're going to see if it's going to come in at 96 by 96, but we've got it cut off in this box here. Just because we've got the overflow hidden, uh we can do small, maybe small square. You know jump up to large there's a lot there. Let's take a look at the sizes a little more in a second, because that's okay, what if we want to go a little further right, so let's get rid of that.

A

Let's go back to that custom 48 by 48. Just so, we've got that sucker there we go beautiful now if we want to kind of add a little bit to that. So this is where that lightbox sample comes in instead of the traditional we want to open a new window. We want to keep everything right here, so I'm going to copy and paste another part of this format, and the only real difference here is: we've got our image the same kind of thing here, but we have a custom card.

A

So we've got a hover card here and all we're doing with the hover card is: we've got an image inside that hover card, and here we're going to take that and we're going to go a little more elaborate. So we've got the exact same image, but now we're going to go with the medium. So if we preview that we can see, we get this interesting, uh ignore the uh it has a little trouble. The first render there.

A

It is that's just because we're the formatting window with that beak, but you can see now we've got a nice little thumbnail right. So traditionally you might want to make that a lot bigger right. So, instead of medium again, this is where we're going to mess with those all right, so small is 96 by 96. Medium is 170 676 and large jumps up to 800 by 800, so not a lot in between all right. So there we go now.

A

We've got a really big one all right and if we wanted to do custom right, we kind of saw it before we type a c and then we type in our width. So in this case we're going to say, I don't know 300 and we're going to say our height, so it's a little x there and our height is also going to say 300..

A

Now it's going to keep our aspect ratio so when we preview that we're going to see that it's just going to take the longest side and it's going to make that 300, pixels and then the height is going to be whatever now, if we wanted it exactly 300 by 300 right.

A

In other words, we don't want to care about this aspect ratio. We can actually add an underscore crop on the end. Now, when we preview that take a look at that, it's actually going to crop it. So we have an exact square, so you can get the exact same exact size. You want there. So it's a lot of flexibility in this kind of image, sizing and how it comes about.

A

So that's cool right. So what if we want to go? You know slightly further than that right. What if we wanted this to be a little more dynamic our size right, we're not quite sure you know what what people are dealing with right if they've got an old 15 inch monitor that's set to you know like 800 pixels.

A

Is this max or whatever right? What if we wanted to take advantage of that, so we wanted to then set this size kind of dynamically. We can do that. So all we're really doing is building the string. You see these little pluses with the single quotes, so we can actually break that up so instead of custom. Here we can delete those guys, the key pieces- let's just add the pluses all right just so we don't lose any of that. I'm gonna get rid of this crop.

A

There we go now. If we want to sort our own values in here we can so we could say things like ceiling because we don't want. I will say this: one thing this doesn't do is: does not accept decimals, so you can't, uh you know, have any kind of piece there. So when you see and make sure we have an integer, we say at window dot inner width right.

A

So this is going to give us at the time of drawing the inner width of the actual window and we're going to say no bigger than half that size all right. We're going to do the same thing for the height, we're going to say, plus and we're going to say, ceiling and we're going to say at window.

A

Dot enter right, oh, and I think it looks like we forgot a plus up here.

A

Give that a try. Let's see if we got that right there we go so the idea here is, it is constrained. Now it's hard to see a little bit. So let's save this and let's uh refresh everything, so we get that new height drawn into expected all right. So now we've got this. It's kind of limiting the size exactly. You can do a little more with that.

A

But if we were to say like f12 this guy, so we can get a smaller window, I'm going to refresh that so it re-renders and has the new window height. When we click that you'll see it is responding and it's automatically given to the smaller right. So by taking advantage of those inner width and inner height in our custom sizing. We can make sure that things you know fit pretty well here now.

A

Normally, though, a light box is used to show you know the full size image right, but now we're trying to constrain that because we don't want to overwhelm if you have a gigantic uh image right. So one of the things we might want to do is provide a link. So we could do that as too as to as well all right, so we're going to grab this guy. We don't need this part anymore and we're going to just go here.

A

We're going to go column set into the form of this column, I'm going to paste the next version of this, which again, if we kind of expand that out, so we can see the only real difference here now. So we have that same image or we've got that ceiling. We've got all that kind of coming out, but now we have this link we're going to kind of absolutely position on the bottom right. That's going to open it up in a new window, just like the other one did.

A

So if we preview that you can see now, we've got this nice little button and we click that it's going to open that same image in a whole new window, and the idea here is now you can do a lot with these image calls right.

A

So the image columns are are really powerful because it's it's very hard to get even strong power users understand go to a document library, upload images copy that link go to your list, paste that link right, there's a lot of steps there that are very easy to mess up, and especially if they copy the wrong image right, they might have copied an asset link that works for a day, but then that token will expire and now they're no longer works. So an image column is a is a huge step up in terms of usability.

A

So we want to also take advantage of that in terms of our formatting. So by using all these kind of sub properties, we can have a lot of power and a lot of control over all this. So all of those samples are available. Let's take a look kind of wrap up here, all right, so here's all of those image sub properties right. So we mentioned this idea of file name, uh which one is the one.

A

You probably use a lot and then, if you're, trying to do any kind of custom sizes, you'll skip all the rest of these and jump into the thumbnail renderer for examples of how those links are put together. Please take a look at the samples. That's a lot easier to take a look at, but again you can also consult the graph api for how to get to the content of a drive item. Great okay, so drive thumbnail sizes. We kind of mentioned those here again.

A

Those are listed in kind of the graph api documentation, uh and these are these are helpful, but the primary helpful ones here are these width and height. Although keep in mind, if you wanted to just do a cropped, diversion yourself of the small, medium or large, you can add square with a capital s on the end and it will pump it automatically.

A

Otherwise, it's going to keep that original ratio, just like you expected before. Okay, so check out the full documentation here check out this awesome sample the image light box, that's going to have the uh the advanced version as well, with kind of that link out and the custom sizing, but that's about it for me thanks!

A

Thank you, chris. Thank you. So much.