2

Desired Behavior:

  1. Display an image in the column My Image based on the value in the column Model.

    My Image is type Picture (I also tried making it type Image but got the same outcome).

    Model is type Managed Metadata.

  2. When clicking on the image, open the image in a new tab.

  3. In Gallery view, when list entries are displayed as cards, the image is visible on the card.

Actual Behavior

Desired behavior 1 and 2 is working, 3 is not.

enter image description here

What I've Tried:

Below are various stages of applying column formatting to the My Image column.

GOOD: This displays the managed metadata column value:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "[$Model]"
}

GOOD: This displays the image path as text, based on the value in the Model column:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "=if([$Model] =='Computer Model 1', 'https://my-tenant.sharepoint.com/sites/my-site/Asset%20Images/computer_model_1.png', 'no')"
}

GOOD: This display the image, based on the value in the Model column:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "img",
  "attributes": {
  "src": "=if([$Model] =='Computer Model 1', 'https://my-tenant.sharepoint.com/sites/my-site/Asset%20Images/computer_model_1.png', 'no')"
  }
}

GOOD: This makes the image a link and adds some styling:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "href": "=if([$Model] =='Computer Model 1', 'https://my-tenant.sharepoint.com/sites/my-site/Asset%20Images/computer_model_1.png', 'no')",
    "target": "_blank"
  },
  "children": [
    {
      "elmType": "img",
      "style": {
        "padding": "0",
        "width": "100px"
      },
      "attributes": {
        "src": "=if([$Model] =='Computer Model 1', 'https://my-tenant.sharepoint.com/sites/my-site/Asset%20Images/computer_model_1.png', 'no')"
      }
    }
  ]
}

All of these things are working.

BAD: The only thing that is not working is that the image is not displaying in Gallery view.

For troubleshooting, below is a comparison of the HTML and CSS of the image section in the card:

Normal Picture:

<div class="sp-card-previewColumnContainer">
    <div class="sp-card-imageContainer">
        <div class="ms-bgColor-neutralLight sp-card-imagePreviewBackground">
            <img style="display:;" src="https://my-tenant.sharepoint.com/sites/my-site/SiteAssets/Lists/letters-and-numbers/computer_model_1.png" title="computer_model_1.png" class="sp-card-imagePreview">
                <svg style="display:none;" preserveAspectRatio="none" viewBox="0 0 210 105" class="sp-card-defaultImage ms-bgColor-themeLighter" focusable="false">...</path>
            </svg>
        </div>
    </div>
</div>

Dynamically Added Picture:

<div class="sp-card-previewColumnContainer">
    <div class="sp-card-imageContainer">
        <div class="ms-bgColor-neutralLight sp-card-imagePreviewBackground">
            <img style="display:none;" src="" title="" class="sp-card-imagePreview">
                <svg style="display:;" preserveAspectRatio="none" viewBox="0 0 210 105" class="sp-card-defaultImage ms-bgColor-themeLighter">...</svg>
        </div>
    </div>
</div>

Related Reading:

Populate Column with IMAGE based on another column's content

In a Sharepoint List: Display an Image (field type “Hyperlink or Picture”)

Apply conditional formatting

Add conditional images in a column (SharePoint Online list)

Update

For reference, after first answer, I tried the following:

I searched for sp-card-previewColumnContainer and looked for the next elmType of img and could see it had a style > display of =if([$Image] == '', 'none', ''), so I removed that style object, and then I could see "src": "[$Image]", "title": "[$Image.desc]", "class": "sp-card-imagePreview" so I replaced the src value with the if conditional I used in the column formatting, and just changed the description to hello world. the next two svg objects also had the display:none styling so I removed those objects as well. The result was good, except there was a little icon in the middle of each card. I put back those style objects on the last two svg's, but it still displayed the same:

enter image description here

In the JSON above, [$Image] is my Picture column.

Update 2

I removed the children array that contained the following, and it seems to have worked, ie got rid of those little icons.

sp-card-defaultImageOverlay-path1

sp-card-defaultImageOverlay-path2

sp-card-defaultImageOverlay-path3

sp-card-defaultImageOverlay-path4
3
  • 1
    Can you show us the JSON code of gallery view? Jul 9, 2021 at 8:29
  • I am just clicking on Switch view options icon and selecting Gallery. So there are no customisations to that. Am looking at the list ending in /AllItems.aspx?env=WebViewList - just appending that ?env=WebViewList to the URL automatically gives the list the full width styling etc. Jul 9, 2021 at 8:35
  • 1
    When you change to the gallery view, there is auto-generated JSON by SharePoint. You have to customize the auto-generated JSON to implement the logic to show the image dynamically (same as you did in column formatting). Jul 9, 2021 at 8:57

1 Answer 1

3

As you are showing the image dynamically using JSON in column formatting, it is working fine in list view.

But, JSON formatting only displays the value/image in list view >> It does not store the actual value in list columns.

So, to show the image in Gallery view, you have to replicate the same logic (used in column formatting) in auto-generated JSON code of gallery view.

To open the JSON code of gallery view, follow below steps:

  1. Go to your SharePoint list

  2. Click on switch view options dropdown at the top & select Format current view.

    enter image description here

  3. Make sure Format view & Gallery is selected like below:

    enter image description here

  4. Click on Edit card & then select Advanced mode


Additional reference:

  1. Change the width of a card in Gallery view of a List
6
  • Getting closer, have added description of what I did and the results to end of original question, just need to remove those little icons somehow...i am going to try and hide everything that creates svg with the class sp-card-defaultImageOverlay. Jul 9, 2021 at 9:34
  • 1
    For display property of svg elements, you need opposite conditions of img element. that means, when there is no image, default svg icons will be shown. Jul 9, 2021 at 9:46
  • Have added another update, with steps that seem to have got desired behaviour. I wonder what happens when Microsoft pushes out an update though, will that Gallery Layout JSON get overridden? Jul 9, 2021 at 9:47
  • 1
    If you don't want the default svg icons when there is no image, you can completely remove the svg elements as well. Jul 9, 2021 at 9:47
  • 1
    No, customized JSON will not get overridden by any update from Microsoft. Jul 9, 2021 at 9:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.