Gifs as Character Images

Keryth987
Keryth987

@Thaen

This came up on the discord and am sharing it here:

Currently, moveable images cannot be utilized in the character image on a character sheet, and I think its about time we were able to utilize GIFs as character images on the Sheet. And furthermore, those images should in turn be utilized on both the main page and hover over as mocing images.

Comments

  • thaen
    thaen
    Posts: 975

    Thanks for the request!  I'll add it to the list.

    In the mean time, you can do this with Custom CSS now.  This CSS should get you there:


    /* Replace Character Index Image with GIF */
    .character-index img[src=" ... replace with the url used by the character-index page image ... "] {
    /* New gif saved in your Media Library */
    background: url(https://db4sgowjqfwig.cloudfront.net/campaigns/216494/assets/1269277/Rotating_earth__large_.gif?1658400182) no-repeat;
    background-size: 96px 96px;
    padding-left: 96px;
    }

    /* Replace Character Show Image with GIF */
    .character-show img[src=" ... replace with the url used by the character-show page image ... "] {
    /* New gif saved in your Media Library */
    background: url(https://db4sgowjqfwig.cloudfront.net/campaigns/216494/assets/1269277/Rotating_earth__large_.gif?1658400182) no-repeat;
    background-size: 226px 226px; /* Height and width of new gif */
    height: 226px; /* Height of new gif */
    padding-left: 226px; /* Equal to width of new gif */
    }

    /* Replace Wiki Link Hover with GIF */
    .wiki-content-link span.avatar-hover img[src=" ... replace with the url used by the character-show page image ... "] {
    /* New gif saved in your Media Library */
    background: url(https://db4sgowjqfwig.cloudfront.net/campaigns/216494/assets/1269277/Rotating_earth__large_.gif?1658400182) no-repeat;
    background-size: 80px 80px;
    height: 80px;
    padding-left: 80px;
    }

     

    Let me know if that doesn't work or doesn't make sense.

    Obsidian Portal Developer

  • Keryth987
    Keryth987
    Posts: 1,011

    Your code, when saved, returns this error

    The following errors occurred: Custom css Invalid or disallowed characters in the CSS. We do not allow Javascript or other advanced CSS, just the basics. ×

  • Keryth987
    Keryth987
    Posts: 1,011

    @Thaen See above

  • Keryth987
    Keryth987
    Posts: 1,011

    OK, with the assistance of Nuadaria  and others on the Discord, here is the WORKING CSS code


    /* Replace Character Index Image with GIF */
    .character-list-item > img[src*="... replace with the url used by the character-index page image ... "] {
    background: url("…replace with 96x96 gif from Media Library…") no-repeat;
    background-size: 96px 96px;
    padding-left: 96px;
    }

    /* Replace Character Show Image with GIF */
    .character-avatar > div > img[src*="... replace with the url used by the character-show page image ... ] { content:url("…Replace with 256x256 gif from Media Library…");
    background-size: 226px 226px;
    height: 226px;
    }

    /* Replace Wiki Link Hover with GIF */
    .wiki-content-link span.avatar-hover > img[src*="... replace with the url used by the character-show page image ...
    "] {
    background: url("…replace with 96x96 gif from Media Library…);
    background-size: 80px 80px;
    height: 80px;
    padding-left: 80px;
    }

     

  • thaen
    thaen
    Posts: 975

    Sorry ... I should have put more of an "assembly required" disclaimer on that code.  Thanks to @nuadaria and co for helping to get it figured out!

    Obsidian Portal Developer

  • nuadaria
    nuadaria
    Posts: 30

    I think an email should just show up out of the aether when you first start to dabble with CSS that disclaims "assembly required".

     

    That or perhaps "DEMONS, RUN!!"

  • twiggyleaf
    twiggyleaf
    Posts: 1,938

    laugh

    "I met a traveller from an antique land....."

    CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.

    Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign

    Inner Council Member

  • Keryth987
    Keryth987
    Posts: 1,011

    OK, so necroing my own topic. The code here works perfectly on the Character page and character sheet, and on the hover...but I need to figure how to replace the image in the character sidebar on the main page now.

     

    @nuadaria since you are the guru on this :)

  • nuadaria
    nuadaria
    Posts: 30

    Might try this for a selector

     

    .character-container > a > img



    Theoretically the rest of what you have should work.

Sign In or Register to comment.

November 2022
Curse of the Crimson Throne

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions