Comic/Image of the Day

Copper Contributor

Hello, 

 

I'm looking to incorporate a Comic or image of the day on my SharePoint Online, modern communication site intranet homepage.  I've been able to create a list with a "show date" column, and customize a view that only shows a comic when it matches, [today].  While this functionally works, it's showing the comic much too small for the users to view, and not acceptable for them to click into it.  

 

The Image webpart is ideally the size I'm looking for, but cannot seem to get that to update each day with a new comic/image. 

 

Does anybody out there know of a way to do this, or have a different approach to accomplish this? 

Thanks in advance for any help or advice!

 

Kevin Wolf 

1 Reply

Hi Kevin (@kjwolf326 ), I hope you find interesting the approach I take to do something similar. On our intranet we display a random country each day to go along with a walking challenge while everyone in our company of 65,000 staff is working from home. The flag of the country is displayed together with links to the Wikipedia page about the country and also to a Bing Map of the country. When clicked each one opens in a new tab in the browser. The formatting of the random list item is done with JSON and as you can see the result looks nothing like a normal SharePoint list item!

 

The country is selected at random using a flow in Power Automate.

 

Today's country is Martinique and the list item looks like this:

 

Martinique.png

 

So this is how it's done. To start with I have a document library called Flags and have uploaded every country's flag or in some cases like Martinique the Coat of Arms. These are available free from many websites:

 

0a-SP-List-Flags.png

 

I then have a list called Countries with the name of the country, the 2-letter Alpha code for the country (not used in the final result), the 3-letter Alpha code  which is a single line of text column, and a Hyperlink or Picture column with the link to the flag in the document library formatted as a Picture:

 

0b-SP-List-Countries.png

 

0c-SP-List-FlagColumn.png

 

The flow to select the random country

The flow's trigger is a Recurrence schedule which in my case is set to run at 12.00 every day. The first action is a SharePoint Get items to get the countries from the list.

 

1-Flow.png

 

Next add a Compose control and enter the following expression in the Expression tab of the dynamic content box to select the random item:
body('Get_items')?['value'][rand(1,length(body('Get_items')?['value']))]

 

2-Flow.png

 

At this point you need to run flow and from the result you need to copy everything in the output of the Compose control:

 

3-Flow.png

 

Next, edit the flow again and add a Parse JSON control. For the Content field select from the dynamic content box the outputs of the Compose, click the Generate from sample button and paste in what  you copied above.

 

The last action in the flow is a SharePoint Update item and you select the site and list and then select the ID and Title from the outputs of the Parse JSON in the dynamic content box. That will make the randomly-selected country the most recently-modified one which is how we'll set our view in the list.

 

4-Flow.png

 

So back in the SharePoint Countries list add a new view, set the sort order to Modified descending and set the item limit to 1:

 

5-List-Today.png

 

Next, format the view you've just created...

 

6-Format-Current-View.png

 

...and paste in JSON code shown below the following image:

 

7-JSON.png

 

 

 

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "_comment_": "MAIN DIV",
    "attributes": {
      "class": "ms-bgColor-neutralLighter"
    },
    "style": {
      "display": "flex",
      "flex-wrap": "wrap",
      "align-items": "stretch",
      "flex-direction": "row",
      "padding": "20px",
      "margin-bottom": "16px",
      "max-width": "150px",
      "border-radius": "8px"
    },
    "children": [
      {
        "elmType": "div",
        "__comment": "DIV 1",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "flex-wrap": "nowrap",
          "align-items": "stretch",
          "max-width": "160px"
        },
        "children": [
          {
            "elmType": "img",
            "style": {
              "width": "150px",
              "height": "90px"
            },
            "attributes": {
              "src": "[$Flag]"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "__comment": "DIV 2",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "flex-wrap": "nowrap",
          "align-items": "center",
          "max-width": "160px",
          "min-width": "95px"
        },
        "children": [
          {
            "elmType": "span",
            "txtContent": "=[$Title]",
            "style": {
              "display": "block"
            },
            "attributes": {
              "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary"
            }
          },
          {
            "elmType": "a",
            "attributes": {
              "iconName": "Library",
              "class": "ms-fontColor-themePrimary",
              "target": "_blank",
              "href": "='https://en.wikipedia.org/wiki/' + [$Title]"
            },
            "style": {
              "font-size": "25px",
              "padding-top": "5px",
              "cursor": "pointer"
            }
          },
          {
            "elmType": "span",
            "txtContent": "[$Alpha3]",
            "style": {
              "display": "block",
              "padding": "5px 0 5px"
            }
          },
          {
            "elmType": "a",
            "attributes": {
              "iconName": "MapPin",
              "class": "ms-fontColor-themePrimary",
              "target": "_blank",
              "href": "='https://www.bing.com/maps/?v=2&where1=' + ( [$Title] + ' ')"
            },
            "style": {
              "font-size": "25px",
              "padding-top": "5px",
              "cursor": "pointer"
            }
          }
        ]
      }
    ]
  }
}

 

 

 

 

You'll see that the code displays the Title, Alpha3 and Flag columns in the list and I've set the image size of the flag to what I want as the image in the document library is quite a bit bigger. You'll also see in the JSON code how the links to the Bing map and Wikipedia page are constructed.

 

On the page itself I have added a List web part, selected the Countries list with the Today view.

 

randomItem.gif 

So I hope that gives you some idea of what you can do and you can adjust it for your cartoons and images. Come back with any questions about all this.

 

Rob
Los Gallardos
Microsoft Power Automate Community Super User