UI display for equippable resources

[Erebos0506]

Proposal:

Adding a way to hide the main resource("src" field) (and show thumb instead) for equippable nfts/resources when viewing the item

Reasons:

• As some equippables only make sense in conjunction with the base composed image showing the actual equippable resource would lead to weird looking images that don't make sense by themselves or just look unfinished thereby negatively affecting user experience
• Not showing the resource that will be shown after equipping would make it possible/easier to create puzzles/eastereggs or other nfts where the owners are encouraged to explore the different possibilities offered on their own instead of being presented the solution by looking at the item
• In some cases a item might even just be used to hide a fallback leading to the item not showing anything as a transparent picture is used as resource causing users to think there are some problems with the items when they're actually working fine

Possible solutions:

• Adding a field to the nft metadata to specify whether to show the "src" or "thumb" field for items - eg "concealed":"true"
• Instead of adding a field with boolean value add a field with ipfs link to another picture that will be displayed instead thereby enabling higher quality pictures to be shown when viewing the item instead of the thumb - eg "substitute":"ipfs://ipfs/HASH"

Possible problems:

• Buyers won't see exactly what they're buying -> Possible partial solution: Add a UI warning that says that the equippable resource isn't shown when viewing the item
• Would need the UI to read from the metadata which resource to show which might slow down loading a bit as metadata would need to be loaded before the images can start to be loaded -> The loading time shouldn't be affected much especially as only items are affected by this

[MaEdAlpha]

Just an idea and some psuedo code.
when minting, for type add a displayThumbAsItem:boolean.

          resaddSendRemarks.push(
          equipableNft.resadd({
            //adds resource link between slot and equipableNft.
            src: `ipfs://ipfs/${ASSETS_CID}/Wegland%20Items/${resource}`,
            thumb: `ipfs://ipfs/${ASSETS_CID}/Wegland%20Items/${item.thumb}`,
            id: primaryItemResource,
            slot: slotName,
            displayThumbAsItem: true,
          })
        );

Then on front end client side,

toggle your img path based off this boolean.

<svg src= { resource.displayThumbAsItem ? resource.thumb : resource.src } >

[Yuripetusko]

sounds easy enough. I would perhaps use a different name. preferThumb

[Yuripetusko]

No no, I just mean that it's better to put it on IPFS than on chain as a new resource field.

It can be part of metadata spec. preferThumb

[MaEdAlpha]

No no, I just mean that it's better to put it on IPFS than on chain as a new resource field.

It can be part of metadata spec. preferThumb

ahhh I gotcha. so something like this?

  const metadataCid = await pinSingleMetadataFromDir(
        `${ASSET_PATH}/Wegland Items`,
        item.thumb,
        item.name,
        {
          description: item.description,
          image: `.....`,
          externalUri: `.....`
          preferThumb:   `ipfs://ipfs/${ASSETS_CID}/PathTo-UI-Default`
        }
      )

[Yuripetusko]

well kinda but it should be ipfs cid basically already pinned., and I think it can go on properties on metadata on ipfs.

I think I'll make a PR in spec today

[Yuripetusko]

https://github.com/rmrk-team/rmrk-spec/pull/52/files

[MaEdAlpha]

sorry for the delayed response.

essentially when pinning the metadataCID IPFS, our TS interface should have this added in.

[MaEdAlpha]

Ahhh I see, sorry that part didn't sink in. I was mostly responding to my current need which is a low res 'default' image. High res artwork may not work because pngs can get 'fuzzy' based off of screen dimensions, and probably shouldn't be so large...or it defeats the purpose.