Is there code to enable displaying character image on hover over the link?

Gomez
Gomez

Our campaign will utimately have a TON of NPCs in the Characters section, and I think it would be awesome if you could see the stored avatar image of the character when you hover over their link from the Adventure Log (or anywhere else really). Is that a feature someone has already solved for? I searched the forums but I'm not seeing it.

Comments

  • gastoff
    gastoff
    Posts: 75

    That's an interesting feature that would be handy if it was implemented. As for how to accomplish it with CSS, I would have to play around with it a bit. I feel like you would need to adde a :before or :after element to the links that is hidden away, then have it displayed when :hover is used. It can be done with individual customized CSS coding for every player/NPC that gets called out in the inline text...but I do not know how to make it where a single CSS code can apply to each character.

    Maybe with some form of wildcard that is automatically populated with the character slug that is nested in the brackets? I will play around with this on my test CSS page and see how far down the CSS rabbit hole I can go.

    image

  • Gomez
    Gomez
    Posts: 10

    Awesome thank you gastoff - appreciate your time and thoughtful response!

  • gastoff
    gastoff
    Posts: 75 edited February 19

    Good news: I was able to figure some CSS to make an image preview on hover work: https://csstestcampaign.obsidianportal.com/adventure-log/test-entry

    Bad news: Each one has to have unique inline HTML to make it work. Hopefully someone with more CSS knowledge can come along and show a way to make it work with minimal HTML shenanigans.

    The Custom CSS:


    .thumbnail{
    position: relative;
    z-index: 0;
    }

    .thumbnail:hover{
    background-color: transparent;
    z-index: 50;
    }

    .thumbnail span{ /*Creates an invisible element tied to the .thumbnail class*/
    position: absolute;
    background-color: transparent;
    padding: 5px;
    left: -1000px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
    width:100px;
    }

    .thumbnail span img{ /*CSS for enlarged image when hidden*/
    border-width: 0;
    padding: 2px;
    }

    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: 0;
    left: 60px; /*position where enlarged image is offset. Can be altered as needed*/
    }

    With the CSS above in place in your Custom CSS area, you would then need to make your inline entry follow the following format:

    <a class="thumbnail" href="URL of character page">LINK TEXT<span><img src="URL of Character Image" /></span></a>

    If feel like there should be a way to make the HTML pull in the URL information by looking at the page slug:

    <a class="thumbnail"> [[character-slug | Character ]] </a>

    and somehow get it to apply the span CSS...but I have no idea how to get that to work.

    Post edited by gastoff on

    image

  • Gomez
    Gomez
    Posts: 10

    Awesome - great start gastoff! Hopefully someone will jump in and add to this. Seems like there are lots of smart people on this forum.

  • JaymesBolton
    JaymesBolton
    Posts: 278

    Ok that is cool and could be very useful for popping up all sorts of images. 

  • Keryth987
    Keryth987
    Posts: 848

    This is awesome. I'm using it already HERE in Shadows and will slowly, but surely, be redoing every synopsis, starting with season 4 (the current one) then the other previous seasons, with this.

     

    Thank you

  • Gomez
    Gomez
    Posts: 10

    Yeah this is super cool. Wow @Keryth987! Your "Shadows" campaign is awesome!

    And @gastoff, I'm going to do what Keryth987 did and use your code throughout my campaign too. I've also submitted as a feature request because I think it would be low lift for the devs to add this to the default functionality offered by the Character Link button. But since I'm impatient, and appreciate the time you spent, I'm going to use your version in the meantime. 

    Appreciate you both!

  • Keryth987
    Keryth987
    Posts: 848

    @Gomez Thanks. Put alot of work into Shadows.

  • Keryth987
    Keryth987
    Posts: 848

    THIS NEEDS TO BE STICKIED

  • thaen
    thaen
    Posts: 217

    I added some code to make this work on OP as a beta feature.  The details are over in the Feature Request thread for this feature:

    https://forums.obsidianportal.com/discussion/5510/cause-thumbnail-to-appear-when-hovering-over-linked-character-name#latest

     

  • Gomez
    Gomez
    Posts: 10

    Wow thank you @thaen! I'll give this a whirl today!

Sign In or Register to comment.

August's Campaign of the Month, In Search of Hidden Dragons!

Read the feature post on the blog!
Or 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