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

**URL:** <https://forum.ghost.org/t/ruby-theme-index-hbs-post-hbs/47748>\
**Category:** Themes\
**Created:** [May 29, 2024, 6:53pm UTC](https://forum.ghost.org/t/ruby-theme-index-hbs-post-hbs/47748 "2024-05-29T18:53:59Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![csffsc](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/csffsc/32/30214_2.png) [@csffsc](https://forum.ghost.org/u/csffsc)\
**Post date:** [May 29, 2024, 6:53pm UTC](https://forum.ghost.org/t/ruby-theme-index-hbs-post-hbs/47748/1 "2024-05-29T18:53:59Z")

</div>

I’m using the [Ruby theme](https://ruby.ghost.io), 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.  

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](https://www.digitalocean.com/community/tutorials/css-cropping-images-object-fit) .

---

<div class="post-metadata">

**Author:** ![brightthemes](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/brightthemes/32/25099_2.png) [@brightthemes](https://forum.ghost.org/u/brightthemes)\
**Post date:** [June 3, 2024, 7:15pm UTC](https://forum.ghost.org/t/ruby-theme-index-hbs-post-hbs/47748/2 "2024-06-03T19:15:54Z")

</div>

The ruby theme is using the [“loop” partial](https://github.com/TryGhost/Ruby/blob/main/partials/loop.hbs) 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:

```html
<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:

```html
<style>
.post-feed .post-image {
    object-fit: cover; 
    object-position: top;
}
</style>

```