Is it possible to have feature images as image links?

Using Ghost
1

Is it possible to have feature images as image links?
This would be useful because I want to have multiple images on the features page (using Edge theme) linking to the same post.

2

The Edge theme displays a grid of feature images on the home page that each link to their respective post. It’s basically a visual way to represent a list of posts.

Not sure I fully understand your use case - but if you wanted a homepage with multiple images, where some link to the same post URL, then that would require creating a custom homepage with static images and links.

3

Thanks Kym,

Yeah I like the grid style, but would like to have some of these feature images link to the same post. I am setting up the site not really as a blog but more as a portfolio type of website and some posts will feature large projects which have many multiple types of images, so it’s just a way of showcasing work in an interesting way.

I have a workaround that I’m using a snippet of the same post content which I am repeating in each of the Post “duplicates” so it all looks like it links to the same page,
But the problem with this is if I update the main post with new work, then I have to update the duplicate posts too.

One great feature which could be useful here (and for other situations) is if whole posts or content could be dynamically linked as a snippet, then if you updated the original source of the snippet it also updates the copies. But maybe that’s difficult to implement. :)

4

would like to have some of these feature images link to the same post

I see. This isn’t the way posts are designed to work — Ghost is built for publishing.

Ghost themes are very flexible, though. So you definitely could create something custom if you wanted, but this would require building a static home page in your theme. I can’t think of a more obvious way than that :thinking:

5

That’s true, Ghost is flexible :)

I am creating custom pages and I already have a custom home page with a different usage as I prefer having a more simple single image for that.

But the main thing about the Edge theme is the grid view and it’s nice, just a shame that it’s not a bit more customisable without advanced coding skills (including changing how the grid behaves, numbers of columns etc). But with the workaround I am finding it works ok for what I’m doing.

6

Put this code in the post’s code injection footer (not the code injection section for the site)
This works because the image by default has a link that goes right back to the post it is on

<script>
for (let elem of document.getElementsByTagName('a')) {
// presumes the link you want to change starts with a slash and is the first one that does
    if (elem.matches('a[href^="/"]')) {
// presumes you want the new link to go to google
      elem.href = "https://www.google.com/"
      break;
    }
  }
</script>
1 Like
8

Thanks for this :slight_smile:
I couldn’t get it working on my website yet but the idea is a good one if it’s working for you.

I looked at the element on the feed page in chrome developer tools and can see that the image links show initially as:

<a class="post-link" href="/......../">

But i tried replacing the href link in your script with the same href link and it hasn’t worked for me.
But maybe there’s a way of placing your script in one of the .hbs files?

9

Got it working :slight_smile:
But I put your script in the loop.hbs file instead (with the actual href link)

many thanks!

edit: I’ve found that it does work with the actual href link in the code injection footer in the site settings, so that’s much easier to edit.

The only slight problem is that I still haven’t worked out how to do the same for the lightbox link of the image so that still goes to the duplicate post version.