Image grid

view-samples/image-grid/README.md

@@ -0,0 +1,55 @@
+# Image Grid
+
+## Summary
+
+Displays images in a grid layout with customisable height and width. The sample was inspired by the [chevron-shape-format](https://github.com/pnp/List-Formatting/tree/master/view-samples/chevron-shape-format) by [André Lage](https://twitter.com/aaclage).
+On click of each post, the link specified by the URL is opened. On hover on each image the description of the image is shown. Optionally an icon is displayed on the top right of the image.
+
+![screenshot of the sample](./assets/screenshot.png)
+
+![Animated GIF of the Styled SharePoint List View In Action](./assets/screenshot-animated.gif)
+
+## View requirements
+
+- The format expect the following fields:
+
+|Type|Internal Name|Required|Notes|
+|---|---|:---:|---|
+|Multiple line of text|Description|Yes| |
+|Single line of text|Icon|No|Set the icon name for [Fluent UI Icons](https://developer.microsoft.com/fluentui#/styles/web/icons).|
+|Hyperlink|URL|Yes| |
+|Yes/No|NewTab|No|This field is used to open the link the same tab or new tab.|
+|Number|Width|No|If not set, the default width is set to 100px.|
+|Number|Height|No|If not set, the default height is set to 100px.|
+|Image|Image|Yes||
+
+### Technologies Used
+
+* **SharePoint**
+* **List** (used to store the image data)
+* **View Formatting** (JSON used to style the list into the familiar Instagram output)
+
+### Prerequisites
+
+* You must have a valid SharePoint Online license and permission to create lists.
+* You must have a modern SharePoint site where you can store the data for the app.
+
+* Format the view and copy and paste the JSON provided.
+
+## Sample
+
+Solution|Author(s)
+--------|---------
+image-grid.json | [Reshmee Auckloo](https://github.com/Reshmee011) ([@reshmeeauckloo](https://twitter.com/reshmeeauckloo))
+
+## Version history
+
+Version|Date|Comments
+-------|----|--------
+1.0|May 20, 2023|Initial release
+
+## Disclaimer
+
+**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
+
+<img src="https://pnptelemetry.azurewebsites.net/list-formatting/view-samples/image-grid" />

view-samples/image-grid/assets/sample.json

@@ -0,0 +1,85 @@
+[
+  {
+    "name": "pnp-list-formatting-image-grid",
+    "reponame": "image-grid",
+    "source": "pnp",
+    "title": "Image Grid",
+    "shortDescription": "This sample includes format to display images in Lists as grid.",
+    "url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/image-grid",
+    "longDescription": [
+      "This sample includes format to display images in Lists as grid."
+    ],
+    "creationDateTime": "2023-05-20T00:00:00.000Z",
+    "updateDateTime": "2023-05-20T00:00:00.000Z",
+    "products": [
+      "SharePoint",
+      "Microsoft Lists"
+    ],
+    "metadata": [
+      {
+        "key": "LIST-SAMPLE-TYPE",
+        "value": "View"
+      },
+      {
+        "key": "SHAREPOINT-COMPATIBILITY",
+        "value": "SharePoint Online"
+      },
+      {
+        "key": "SAMPLE-CATEGORIES",
+        "value": "Image, Hover Cards"
+      },
+      {
+        "key": "LIST-COLUMN-TYPE",
+        "value": ""
+      },
+      {
+        "key": "FORMATTING-TOKENS",
+        "value": ""
+      },
+      {
+        "key": "FORMATTING-OPERATORS",
+        "value": ""
+      },
+      {
+        "key": "FORMATTING-ACTIONS",
+        "value": ""
+      },
+      {
+        "key": "FORMATTING-FEATURES",
+        "value": "customCardProps, directionalHint, hideSelection, hideColumnHeader, rowFormatter "
+      },
+      {
+        "key": "CLASSES",
+        "value": ""
+      }
+    ],
+    "thumbnails": [
+      {
+        "type": "image",
+        "order": 100,
+        "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/image-grid/assets/screenshot.png",
+        "alt": "screenshot"
+      },
+      {
+        "type": "image",
+        "order": 101,
+        "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/image-grid/assets/screenshot-animated.gif",
+        "alt": "screenshot-animated"
+      }
+    ],
+    "authors": [
+      {
+        "gitHubAccount": "reshmee011", 
+        "pictureUrl": "https://github.com/reshmee011.png",
+        "name": "Reshmee Auckloo"
+      }
+    ],
+    "references": [
+      {
+        "name": "Use view formatting to customize SharePoint",
+        "description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
+        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
+      }
+    ]
+  }
+]

view-samples/image-grid/image-grid.json

@@ -0,0 +1,71 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
+  "hideColumnHeader": true,
+  "hideSelection": true,
+  "rowFormatter": {
+    "elmType": "div",
+    "style": {
+      "position": "relative",
+      "width": "[$Width]",
+      "text-decoration": "none",
+      "float": "left",
+      "min-width": "[$Width]",
+      "height": "[$Height]",
+      "margin": "5px",
+      "cursor": "pointer"
+    },
+    "children": [
+      {
+        "elmType": "a",
+        "attributes": {
+          "href": "[$URL]",
+          "target": "=if([$NewTab],'_blank','')"
+        },
+        "children": [
+          {
+            "elmType": "div",
+            "style": {
+              "position": "absolute",
+              "top": "5px",
+              "right": "5px",
+              "color": "white",
+              "z-index": "1",
+              "font-size": "25px",
+              "display": "block"
+            },
+            "attributes": {
+              "iconName": "[$Icon]"
+            }
+          },
+          {
+            "elmType": "img",
+            "attributes": {
+              "src": "=getThumbnailImage([$Image], [$Width], [$Height])"
+            },
+            "style": {
+              "width": "=if([$Width]=='','100px',[$Width]+'px')",
+              "height": "=if([$Height]=='','100px',[$Height]+'px')",
+              "object-fit": "cover"
+            },
+            "customCardProps": {
+              "openOnEvent": "hover",
+              "directionalHint": "rightCenter",
+              "isBeakVisible": true,
+              "formatter": {
+                "elmType": "div",
+                "txtContent": "[$Description]",
+                "style": {
+                  "max-width": "500px",
+                  "padding": "10px",
+                  "background-color": "rgba(0,0,0.9)",
+                  "opacity": "1",
+                  "color": "white"
+                }
+              }
+            }
+          }
+        ]
+      }
+    ]
+  }
+}