Forum Discussion

Claudius's avatar
Claudius
Boss
5 years ago

Support for SVGs in Khoros Studio image management

I've set up node avatars using SVG scalable vector graphic images using Admin's Community Structure view. The tooltip for "Avatar" when editing node properties states:

Select an image to use for this node's avatar. The file extension must be one of the supported image file extensions configured for the community. We recommend a square image, at least 256px x 256px for the best display across all devices.

So I went to /t5/bizapps/bizappspage/tab/community%3Aadmin%3Afeatures%3Aimage-upload%3Aimage-upload-settings?setting=imageupload.legal_file_extensions to add ;*.svg;*.SVG - After this change SVGs uploaded as node Avatars are accepted and the Save button on that screen works.

The problem seems to start when studio attempts to offer these SVGs in different sizes. In my component I use this call to the nodes collection to obtain the node avatar:

<#assign boardImg = liql("SELECT avatar.medium_href FROM nodes WHERE id = 'board:${board.id}'") />

Unfortunately the returned medium_href value /t5/image/serverpage/image-id/180i27BA191A88147CB1/image-size/medium?v=1.0&px=400 returns a page ressource showing an Unexpected Error message for SVGs. (NB: These urls return the actual image fine for bitmap images)

The fix for SVGs would actually to omit the section starting from the slash before "image-size", e.g. simply /t5/image/serverpage/image-id/180i27BA191A88147CB1 returns the SVG image resource all fine.

So can Khoros API be made aware of the image media type and instead of

      "avatar" : {
        "type" : "avatar",
        "tiny_href" : "/t5/image/serverpage/image-id/180i27BA191A88147CB1/image-size/tiny?v=1.0&px=100",
        "small_href" : "/t5/image/serverpage/image-id/180i27BA191A88147CB1/image-size/small?v=1.0&px=200",
        "medium_href" : "/t5/image/serverpage/image-id/180i27BA191A88147CB1/image-size/medium?v=1.0&px=400",
        "large_href" : "/t5/image/serverpage/image-id/180i27BA191A88147CB1/image-size/large?v=1.0&px=999"
      }

return for SVGs

      "avatar" : {
        "type" : "avatar",
        "tiny_href" : "/t5/image/serverpage/image-id/180i27BA191A88147CB1",
        "small_href" : "/t5/image/serverpage/image-id/180i27BA191A88147CB1",
        "medium_href" : "/t5/image/serverpage/image-id/180i27BA191A88147CB1",
        "large_href" : "/t5/image/serverpage/image-id/180i27BA191A88147CB1"
      }

Let me know if I should submit this as a product enhancement idea instead or if further clarification or refinement is needed.

  • luk's avatar
    luk
    Boss
    5 years ago

    Nice little research =), we had similar issues and the workaround we used was to basically handle this in the rendering Freemarker code where you access the avatar-url. As you said, if the image-size part is stripped out, it works, therefore something like this:

    <#list response.items as item>
    <img class="avatar" src="${item.avatar.href_medium?keep_before('/image-size')}" alt="" />
</#list>

    should do the trick. But I agree that this should be fixed in the product, especially if SVGs are technically allowed (which should of course be the case in times of retina displays)

      • AmyS's avatar
        AmyS
        Khoros Alumni (Retired)
        5 years ago

        SuzieH Claudius 

        We've actually got a ticket open for Image Service SVG support that's being actively tracked. Meaning, a developer has been looking into it, though I can't say exactly if/when it will be in a release.

         

        I've included this request in the ticket as supporting info.