With Format view, it’s now possible to change the shape, size, colors and other view properties.

This functionality is configurable in the Modern SharePoint list views and available in the list and tiles display data.

In this post, you will learn how to change the display of a Picture Library Tiles view to show the description and keywords fields are native to this kind of library, but not available in the view.

Activate the feature “Team Collaboration Lists”

The Picture Library comes with the feature “Team Collaboration Lists“.
Go to the Site Settings in the Site Actions Group, click on “Manage site features”.
Set the feature “Team Collaboration Lists” active.

Add a Picture Library

The picture library lets you upload any media files and has a thumbnail view (Tiles) by default.

To add a picture library, click on the gear icon, and then Add an App. After that, search for Picture Library and name your picture library.

Set Fields in View

To use the “Description” and “Keywords” fields in the format view, you need to add them to the view. When editing in quick edit view, include the “Thumbnail” field for identification of the media.

Format View

Use the formatting view panel to change the view’s display. In this scenario, you will change the shape of the tiles’ display. Copy the json below and paste it in the “Format Current View” panel.

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideColumnHeader": "true",
  "hideSelection": false,
  "tileProps": {
    "hideSelection": false,
    "formatter": {
      "elmType": "div",
      "children": [
        {
          "elmType": "div",
          "attributes": {
            "class": "ms-bgColor-neutralLighter ms-bgColor-neutralSecondaryAlt--hover ms-fontColor-white--hover"
          },
          "style": {
            "display": "flex",
            "flex-wrap": "wrap",
            "width": "100%",
            "height": "100%",
            "margin-right": "10px",
            "margin-top": "10px",
            "box-shadow": "2px 2px 4px darkgrey"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "margin": "auto",
                "text-align": "center"
              },
              "children": [
                {
                  "elmType": "img",
                  "attributes": {
                    "src": "@thumbnail.large"
                  }
                },
                {
                  "elmType": "div",
                  "style": {
                    "margin": "auto",
                    "font-size": "65px",
                    "text-align": "center"
                  },
                  "attributes": {
                    "iconName": "=if(indexOf([$ContentTypeId],'0x0120')==0,'FabricOpenFolderHorizontal', '')"
                  }
                },
                {
                  "elmType": "div",
                  "style": {
                    "margin": "auto",
                    "font-size": "16px",
                    "text-align": "center"
                  },
                  "txtContent": "[$FileLeafRef]"
                },
                {
                  "elmType": "div",
                  "style": {
                    "margin": "auto",
                    "font-size": "13px",
                    "text-align": "center"
                  },
                  "attributes": {
                    "title": "[$Keywords]"
                  },
                  "txtContent": "[$Keywords]"
                },
                {
                  "elmType": "div",
                  "style": {
                    "font-size": "13px",
                    "font-style": "oblique",
                    "text-align": "left",
                    "padding": "5px"
                  },
                  "attributes": {
                    "title": "[$Description]"
                  },
                  "txtContent": "[$Description]"
                }
              ]
            }
          ]
        }
      ]
    }
  }
}

Add Some Files

Finally, add some media files, and fill the Keyword and Description data.

You can add folders as well.

Add Files
Edit Description and Keywords

Enjoy 😊

Categories: SharePoint

4 Comments

Colleen P · December 18, 2020 at 12:29 am

Thank you very much! This is a great start for what I’m trying to do.

Andy · January 7, 2021 at 10:42 pm

This is awesome thank you! One question, when I do this, I lose the ability to click the image to open in preview (larger full size image). Is there a way to do this without removing that functionality?

    Valter Lima · March 16, 2021 at 5:58 pm

    Thanks for the feedback Andy. If you click twice in the image it will open in fill size.

Lilian C · September 1, 2021 at 8:23 pm

Hello. Many thanks for the instructions which were very helpful. There is one more thing though I am looking for and that is being to have a ‘Next’ button when clicking on a picture.

The web part Image Gallery (Brick, Grid, Carousel) does not allow me to do what I am looking for. Either it opens in the same tab, you can not enlarge the pic or both is the case.

As in Windows Explorer or the picture library I would like to be able to add a web part to a page, where I can display several pictures. When clicking on a picture, it opens in a new tab, I can also double click on the picture to enlarge it. The Name or Title should be shown and there should be a possibility to click ‘Next’.

Do you have an idea how I can manage to do so?

Many thanks for your help!!!

Leave a Reply to Lilian C Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: