Skip to content

Commit 585c0a2

Browse files
reshmee011reshmee011
authored
Image grid (#666)
* Instagram Basic Display * Update to Readme file * update to readme file * amend link * rename view to be image grid without reliance on Instagram * Minor updates --------- Co-authored-by: Tetsuya Kawahara
1 parent 02a68b7 commit 585c0a2

File tree

5 files changed

+211
-0
lines changed

5 files changed

+211
-0
lines changed

‎view-samples/image-grid/README.md

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# Image Grid
2+
3+
## Summary
4+
5+
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).
6+
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.
7+
8+
![screenshot of the sample](./assets/screenshot.png)
9+
10+
![Animated GIF of the Styled SharePoint List View In Action](./assets/screenshot-animated.gif)
11+
12+
## View requirements
13+
14+
- The format expect the following fields:
15+
16+
|Type|Internal Name|Required|Notes|
17+
|---|---|:---:|---|
18+
|Multiple line of text|Description|Yes| |
19+
|Single line of text|Icon|No|Set the icon name for [Fluent UI Icons](https://developer.microsoft.com/fluentui#/styles/web/icons).|
20+
|Hyperlink|URL|Yes| |
21+
|Yes/No|NewTab|No|This field is used to open the link the same tab or new tab.|
22+
|Number|Width|No|If not set, the default width is set to 100px.|
23+
|Number|Height|No|If not set, the default height is set to 100px.|
24+
|Image|Image|Yes||
25+
26+
### Technologies Used
27+
28+
* **SharePoint**
29+
* **List** (used to store the image data)
30+
* **View Formatting** (JSON used to style the list into the familiar Instagram output)
31+
32+
### Prerequisites
33+
34+
* You must have a valid SharePoint Online license and permission to create lists.
35+
* You must have a modern SharePoint site where you can store the data for the app.
36+
37+
* Format the view and copy and paste the JSON provided.
38+
39+
## Sample
40+
41+
Solution|Author(s)
42+
--------|---------
43+
image-grid.json | [Reshmee Auckloo](https://github.com/Reshmee011) ([@reshmeeauckloo](https://twitter.com/reshmeeauckloo))
44+
45+
## Version history
46+
47+
Version|Date|Comments
48+
-------|----|--------
49+
1.0|May 20, 2023|Initial release
50+
51+
## Disclaimer
52+
53+
**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.**
54+
55+
<img src="https://pnptelemetry.azurewebsites.net/list-formatting/view-samples/image-grid" />

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

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
[
2+
{
3+
"name": "pnp-list-formatting-image-grid",
4+
"reponame": "image-grid",
5+
"source": "pnp",
6+
"title": "Image Grid",
7+
"shortDescription": "This sample includes format to display images in Lists as grid.",
8+
"url": "https://github.com/pnp/List-Formatting/tree/master/view-samples/image-grid",
9+
"longDescription": [
10+
"This sample includes format to display images in Lists as grid."
11+
],
12+
"creationDateTime": "2023-05-20T00:00:00.000Z",
13+
"updateDateTime": "2023-05-20T00:00:00.000Z",
14+
"products": [
15+
"SharePoint",
16+
"Microsoft Lists"
17+
],
18+
"metadata": [
19+
{
20+
"key": "LIST-SAMPLE-TYPE",
21+
"value": "View"
22+
},
23+
{
24+
"key": "SHAREPOINT-COMPATIBILITY",
25+
"value": "SharePoint Online"
26+
},
27+
{
28+
"key": "SAMPLE-CATEGORIES",
29+
"value": "Image, Hover Cards"
30+
},
31+
{
32+
"key": "LIST-COLUMN-TYPE",
33+
"value": ""
34+
},
35+
{
36+
"key": "FORMATTING-TOKENS",
37+
"value": ""
38+
},
39+
{
40+
"key": "FORMATTING-OPERATORS",
41+
"value": ""
42+
},
43+
{
44+
"key": "FORMATTING-ACTIONS",
45+
"value": ""
46+
},
47+
{
48+
"key": "FORMATTING-FEATURES",
49+
"value": "customCardProps, directionalHint, hideSelection, hideColumnHeader, rowFormatter "
50+
},
51+
{
52+
"key": "CLASSES",
53+
"value": ""
54+
}
55+
],
56+
"thumbnails": [
57+
{
58+
"type": "image",
59+
"order": 100,
60+
"url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/image-grid/assets/screenshot.png",
61+
"alt": "screenshot"
62+
},
63+
{
64+
"type": "image",
65+
"order": 101,
66+
"url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/image-grid/assets/screenshot-animated.gif",
67+
"alt": "screenshot-animated"
68+
}
69+
],
70+
"authors": [
71+
{
72+
"gitHubAccount": "reshmee011",
73+
"pictureUrl": "https://github.com/reshmee011.png",
74+
"name": "Reshmee Auckloo"
75+
}
76+
],
77+
"references": [
78+
{
79+
"name": "Use view formatting to customize SharePoint",
80+
"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.",
81+
"url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
82+
}
83+
]
84+
}
85+
]

‎view-samples/image-grid/assets/screenshot-animated.gif

3.32 MB
Loading

‎view-samples/image-grid/assets/screenshot.png

1.43 MB
Loading

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

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
3+
"hideColumnHeader": true,
4+
"hideSelection": true,
5+
"rowFormatter": {
6+
"elmType": "div",
7+
"style": {
8+
"position": "relative",
9+
"width": "[$Width]",
10+
"text-decoration": "none",
11+
"float": "left",
12+
"min-width": "[$Width]",
13+
"height": "[$Height]",
14+
"margin": "5px",
15+
"cursor": "pointer"
16+
},
17+
"children": [
18+
{
19+
"elmType": "a",
20+
"attributes": {
21+
"href": "[$URL]",
22+
"target": "=if([$NewTab],'_blank','')"
23+
},
24+
"children": [
25+
{
26+
"elmType": "div",
27+
"style": {
28+
"position": "absolute",
29+
"top": "5px",
30+
"right": "5px",
31+
"color": "white",
32+
"z-index": "1",
33+
"font-size": "25px",
34+
"display": "block"
35+
},
36+
"attributes": {
37+
"iconName": "[$Icon]"
38+
}
39+
},
40+
{
41+
"elmType": "img",
42+
"attributes": {
43+
"src": "=getThumbnailImage([$Image], [$Width], [$Height])"
44+
},
45+
"style": {
46+
"width": "=if([$Width]=='','100px',[$Width]+'px')",
47+
"height": "=if([$Height]=='','100px',[$Height]+'px')",
48+
"object-fit": "cover"
49+
},
50+
"customCardProps": {
51+
"openOnEvent": "hover",
52+
"directionalHint": "rightCenter",
53+
"isBeakVisible": true,
54+
"formatter": {
55+
"elmType": "div",
56+
"txtContent": "[$Description]",
57+
"style": {
58+
"max-width": "500px",
59+
"padding": "10px",
60+
"background-color": "rgba(0,0,0.9)",
61+
"opacity": "1",
62+
"color": "white"
63+
}
64+
}
65+
}
66+
}
67+
]
68+
}
69+
]
70+
}
71+
}

0 commit comments

Comments
 (0)