Suggestions for approaches to render lists using custom template?

Themes
1

I’d like to make a simple template and use this when I want to post lists (favorite books, music, etc.) Currently, when I make custom lists I end up writing some HTML blocks and it’s kind of annoying (everything ends up as blocks and it’s harder to tweak HTML in a block vs just edit text in the editor.)

One of the custom HTML formats I like has an image along the side and text next to it and this stacks nicely. I’d love to have a simple process that just takes the image/text I add in the editor and auto transforms the style when I hit preview/post. Even better if it shows it in realtime in the editor but I kinda don’t care how the data looks there. I just don’t want to fidget with HTML when I am writing.

I was wondering if folks had any advice for how to best achieve this and/or examples for how they’ve done it? I assume I might need to write some custom JS which is fine but if there’s a simpler way I’d love to understand it. I was hoping to just stick to a simple format when I type in the ghost editor like what’s described below and have it transformed using a template with HTML similar to what’s embedded further down. Thanks for any thoughts!

image /n
title #1/subtitle text /n
author name /n
description text /n

image /n
title #2/subtitle text /n
author name /n
description text /n

etc, etc

<div style="display: flex; align-items: start; width: 100%; margin-bottom: 20px;">
    <a href="https://customlink.com" style="flex: 0 0 40%; margin-right: 20px; text-decoration: none;">
        <img src="https://customlink.com/image.jpeg" style="width: 100%; margin-top: 7px;">
    </a>
    <div style="flex: 1; margin-top: 0;">
        <a href="https://customlink.com">Title: Subtitle</a><br>by Author / Artist<br><br>
        Description text
    </div>
</div>
2

I’d take a look at the product card. If you overwrite that css, you could get what you’re describing, without any javascript.

Here’s some rough examples I made a while back:
Using Product Cards for things other than products.

2 Likes
3

Good suggestion. Any chance you could explain at a high level how product cards work and where I can find them to edit? For instance, I presume it’s just an existing CSS class. But, I’m not sure where it lives. And, I am curious if I am stuck customizing just the default class? Or, if it’s possible to duplicate and make multiple variations of it? Thanks for sharing!

4

Product cards are an option on the Ghost editor. I like repurposing then because they group together a bunch of content that can be restyled with css.

It would require edits to the ghost core to duplicate and edit a card. But you could set up the styles so that posts with a specific template (or a different #tag) use different styling for product cards. Or you could preface your product cards with a <Div class=“customcard”> html card.
And then add your product cards, followed by a </div>
That allows you to selectively style one group of cards on the page without having to do all of then.

You don’t need to edit the css for cards (which is in cards.min.js). Just override it by declaring styles with more specificity or the same specificity but loaded later.

2 Likes