Bookmark-card theme-rendered markup

Themes
1

Hi,

when inserting a bookmark-card in the editor, I get this markup

<div class="kg-bookmark-metadata">
        <img src="https://www.quantamagazine.org/favicon.png" class="kg-bookmark-icon">
        <span class="kg-bookmark-publisher">Quanta Magazine</span>
        <span class="kg-bookmark-author">Natalie Wolchover</span>
</div>

but when rendered in a theme I get this

<div class="kg-bookmark-metadata">Natalie WolchoverQuanta Magazine</div>

This makes it a bit impossible to style properly. Any ideas?

$ ghost -v
Ghost-CLI version: 1.13.1
Ghost version: 3.38.2

2

I’m not sure why you’re getting those results.

Nonetheless, if you’d like to manipulate a bookmark card (and/or create one from scratch) you can drop the following code into an HTML-card, fill in the blanks, and adjust things as you’d like with extra classes or whatever.

<figure class="kg-card kg-bookmark-card">
    <a class="kg-bookmark-container" href="LINK_URL">
        <div class="kg-bookmark-content">
            <div class="kg-bookmark-title">TITLE</div>
            <div class="kg-bookmark-description">WRITE-UP</div>
            <div class="kg-bookmark-metadata">
                <img class="kg-bookmark-icon" src="FEATURE_IMAGE_URL">
                <span class="kg-bookmark-author">AUTHOR_NAME</span>
                <span class="kg-bookmark-publisher">PUBLISHER_NAME</span>
            </div>
        </div>
        <div class="kg-bookmark-thumbnail">
            <img src="THUMBNAIL_IMAGE_URL">
        </div>
    </a>
</figure>

Be aware though – and anybody please correct me if I’m wrong – but I think some things relating to the author and publisher may be getting switched up in version 4.0, which may require you to re-edit any bookmark cards you’ve manually created.

3

@gnimmelf you shouldn’t need to resort to using html cards for bookmarks. The markup you’ve shared is not what is output by the bookmark card renderer and themes don’t have control over that. I’d suggest looking for reasons why you might be seeing modified html - JS in the theme, extensions in your browser, etc.

Perhaps share an example URL where you’re seeing the issue? It’s difficult for anyone to help with the limited details provided.

1 Like
4

Yes, you were right Kevin. I had a small, older script washing markup from the description, since some low-end* sites too often format their metatdata. Thanks.

*WP =)