New Display Template: Image-type Credential

bmuramatsu commented 2 years ago

Add support for a primarily image based credential to LCW.

issuer.name: The institution’s name or program’s name issuing the credential issuer.url: The institution’s website issuer.image: URL to logo of the institution’s choosing expirationDate: Date on which the credential expires, if specified credentialSubject.name: Name of the individual receiving the credential 'image<field name TBD>: Single PNG or JPEG image type`: Type label(s) TBD

alexandermuehle commented 2 years ago

For openHPI we are currently using PDF templates generated by Adobe Illustrator (example ) and a XML/SVG for the dynamic content placement

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">

<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" width="595" height="842" viewBox="0 0 595 842" xml:space="preserve">
    <g id="Dynamic data">
        <text fill="#DE6926" stroke-width="0" x="353" y="106"  font-size="23" font-family="NeoSansMedium" text-anchor="middle" xml:space="preserve">##NAME##</text>
        <text fill="#5E646C"  stroke-width="0" x="353" y="124"  font-size="11" font-family="Helvetica" text-anchor="middle" xml:space="preserve">##EMAIL##</text>
        <text fill="#5E646C" stroke-width="0" x="353" y="141"  font-size="11" font-family="Helvetica" text-anchor="middle" xml:space="preserve">##BIRTHDAY##</text>
        <text fill="#3B3939" stroke-width="0" x="180" y="544"  font-size="11" font-family="Helvetica" text-anchor="start" xml:space="preserve">##GRADE##</text>
        <text fill="#3B3939"  stroke-width="0" x="180" y="564"  font-size="11" font-family="Helvetica" text-anchor="start" xml:space="preserve">##TOP##</text>
        <text fill="#3B3939" stroke-width="0" x="165" y="757"  font-size="11" font-family="Helvetica" text-anchor="start" xml:space="preserve">Potsdam, ##ISSUED_AT##</text>
<text fill="#3B3939"  stroke-width="0" x="165" y="771"  font-size="7" font-family="Helvetica" text-anchor="start" xml:space="preserve">##VERIFY##</text>
    </g>
</svg>

Could be a good alternative for visual credentials, as this allows for rendering from information that is in the VC, rather than already baking the information in the image.

alexfigtree commented 8 months ago

Can take a look at Ian Malcolm Student ID mock cred on app for image example. Closing this ticket.

digitalcredentials / learner-credential-wallet

New Display Template: Image-type Credential #165