JSON to resize picture based on another column value

Question

I am using SharePoint Online and have a list

I have two columns:

• Department (single line of text)
• Logo (URL formatted showing as a picture)

I have formatted the Logo column as follows:

{"elmType":"div","children":[{"elmType":"img","attributes":{"src":"@currentField","title":"=if(@currentField == '', 'No picture available', @currentField)"},"style":{"position":"relative","top":"50%","left":"50%","width":"200px","height":"200px","margin-left":"-50%","margin-top":"0%"}}]}

What I want is that is the column called "Department" is "No1" then the Logo column will be 50% scale.

If the Department is "No2" then the Logo column will be "20%" scale.

If the Department is "No3" then the Logo column will be "35% scale".

---

Current JSON for gallery is:

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json" }

Column Name: Department Internal Field Name: Title Field Type: Single Line of Text

Column Name Logo: Internal Field Name: Logo Field Type: Hyperlink or Picture Format URL as Picture

Answer 1

You can use expressions based on department column like this:

=if([$Department] == 'No1', 500px, if([$Department] == 'No2', 200px, if([$Department] == 'No3', 350px, '1000px')))

For example:

{
    "elmType": "div",
    "children": [
        {
            "elmType": "img",
            "attributes": {
                "src": "@currentField",
                "title": "=if(@currentField == '', 'No picture available', @currentField)"
            },
            "style": {
                "position": "relative",
                "top": "50%",
                "left": "50%",
                "width": "=if([$Department] == 'No1', 500px, if([$Department] == 'No2', 200px, if([$Department] == 'No3', 350px, '1000px')))",
                "height": "=if([$Department] == 'No1', 500px, if([$Department] == 'No2', 200px, if([$Department] == 'No3', 350px, '1000px')))",
                "margin-left": "-50%",
                "margin-top": "0%"
            }
        }
    ]
}

Note:

1. You have to use the internal name of department column in JSON. You can get the internal name of your Image column by following this article: How to find the Internal name of columns in SharePoint Online?
2. You have to show/include department column in list view.

Documentation: SharePoint JSON formatting