Ruby Theme: Index.hbs / Post.hbs /?

Themes
1

I’m using the Ruby theme, and I’d like to adjust how the cards are being displayed on the front page, which I expected to find in index.hbs template, instead its just a loop over the posts. While the posts.hbs file is the template for posts that have been clicked on.

How do I modify the way in which it’s rendered at the index?

  1. Would like to see the tag data on the same line as the title data. So it would look something like “Google - Is Chromebook Still a Thing”, in this example.

    image
    image602×826 68.8 KB

  2. The way in which the post images get resized for this “baseball card” post, sometimes isn’t ideal. In the example I’m working with, it tends to crop faces. I think it’s cropping/aligning the image from the bottom going upwards, rather than centering it. My guess is the solution is somewhere in here: How To Scale and Crop Images with CSS object-fit | DigitalOcean .

2

The ruby theme is using the “loop” partial in the index template.
So if you want to make changes you would have to do it in the partials/loop.hbs file. These changes will affect all templates using this partial.

Alternatively you could make these changes from code injection:

  1. You can add the following in code injection:
<style>
.post-feed .post-tag:after { content: " — "; }
.post-feed .post-title { display: inline; }
</style>
  1. You can change the object-fit (set to cover, set it contain to keep the original aspect ratio) and object-position (set to center) attributes:
<style>
.post-feed .post-image {
    object-fit: cover; 
    object-position: top;
}
</style>