How to make Tumblr indexpage Posts redirect to Permalink?

I need to display first image and title of a post in indexpage, clicking on them would redirect to Post Permalink.

I tried this code:

{block:IndexPage}
<a href="{Permalink}" class="post-content">
<div class="body-text e-content">{Body}</div>
</a>
{/block:IndexPage}

and css in order to hide rest of the post:

.index-page.grid .npf_row {
    height:9.5em;
    overflow: hidden;
}
.index-page .post .body-text .npf_row:not(:first-child){
    display: none;
}
.index-page .post .body-text p {
    display: none;
}
.index-page .photoset p{
    display: none;
}
.index-page .html_photoset {
    height:9.5em;
    overflow: hidden;
}

Post content won't display. Tumblr changed the post format type last year, so old solutions won't work anymore.

OK.

There might be an issue with {Body} containing an anchor. You cannot nest anchors. Chrome will auto close the first one, which I think is what is happening.

However I think you can target the anchor just on the index page and pass some css props to it.

.index-page .npf_col a {
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
}

You may have to tweak this, but I think your permalink being wrapped around the entire block is being auto closed.

My only concern is that the css selector might be generic. So It might be preferable to add a class name in the html and then target that in the css.

Was thinking .index-page .npf_col > a or <a class="post-wrapper"> and then pass the css props to .post-wrapper { ... etc.

I did a quick test in the browser (adding some background colour and opacity, just to make sure the link works, so I have only tested this using a hack, but it looks OK to me).

Also I think as this is just passing different css depending on index-page or not, you might not need the permalink block at all.