Adding hyperlink to Front Matter Title Field

Hi. I’ve implemented a gallery component on my website, where a number of thumbnails are displayed on the page. When visitors click a thumbnail, a larger image is shown with a title printed below.

This all works well, but I would like to add a hyperlink to the text of the title, that opens a pdf download. I’ve searched on the forum and tried: [title_text] followed by ‘(path_to_pdf){:target="_blank"}’
But Jekyll just displays the title text, with no hyperlink.
Is it even possible to do this?

An example of my front matter for one of the images:
gallery:

  • full: /images/fulls/01.jpg
    thumb: /images/thumbs/01.jpg
    title: Link to pdf

you are adding a link to the text only and not the image so you can do

[My title](/assets/01.pdf)

Or for new tab, like you originally had.

[My title](/assets/01.pdf){:target="_blank"}

I have more info here on the target functionality Links | Dev Cheatsheets

To display image and text, and add a hyperlink to the text only:

![my image fallback text](/images/fulls/01.jpg)

[My title](/assets/01.pdf){:target="_blank"}

Rather than markdown, You probably want to do this in HTML if you are showing a popup. So you can add classes for styling and behavior like show and hide. And you can use figure and caption in HTML with CSS to give a nice caption below a framed image, like a Polaroid.

Also you can consider adding a download link to the image itself which points to pdf too

<a href="/assets/01.pdf" _target="blank">
    <img src="...">
    <p>My image caption</p>
</a>

2 Likes

You should use backticks to convert your text to code in forums, then you can put your title and link as one instead of splitting it your answer. And your frontmatter won’t have a bullet point.

```md
**markdown** code
```
---
title: 
thumbnail:
large:
---

yaml instead of liquid


And a screenshot of what you see on your page or your HTML source also adds to the clarity of a question.

You might find that if you look at the HTML of the rendered page, you figure your own question

I’d also recommend going from what you know works to some new behavior. Looking at the rendered page and the HTML together at each step so you know exactly what is going on and when something breaks.

E.g.

Does this work? On a new page with no other content.

[My text](#)

Yes it does. It’s a link that goes nowhere but it’s a start.

Okay now with a real link.

That works.

Now adding target=...

okay maybe that breaks so that’s the issue.

Okay now that is fixed, now to bring in the image.

Okay now to replace hardcoded strings with Jekyll variables.

Hi Michael,
When I try your first two suggestions, I get the same result: the title text is displayed, with no hyperlink. Even when I link to nowhere, the same thing happens.

From the screenshot below, it seems my site, adapted from a template, displays image and text, together (and I want to add a hyperlink to the text only). I think I need to use your third suggestion, where you added the exclamation sign before the line, but it breaks the CSS and I get a YAML exception warning: did not find expected key while parsing a block

I’m still in the process of trying to fix this

It is hard brackets first and round brackets second. Your screenshot has it reversed.

1 Like

An exclamation mark is specifically for making an image. You don’t need it to fix a text link.

1 Like

When I put the hard brackets first, round brackets second, Jekyll gives the following:

YAML Exception reading /home/index.html: (): did not find expected key while parsing a block mapping at line 19 column 3.
The site still builds, but the site is only partially working. css/js is not working.

Can you please share your code snippet from a file? All I have to go on is the bit of markdown in a sentence from your original question, but I need to see what you are doing currently. In particular whatever you have at “line 19” that is causing the error.

See for example my snippets where I provide YAML frontmatter and then markdown or HTML

A screenshot of your console error would also help.

Are you perhaps trying to do []() inside your frontmatter? I’m trying to image how making a link in markdown can cause a YAML error.

Thanks Michael. Line 19 is the line below which starts with “full”:

gallery:
- full: /images/fulls/01.jpg
  thumb: /images/thumbs/01.jpg
  title: [My text](#)

I am indeed trying to do [ ] ( ) inside my frontmatter title field.

From my terminal:

Generating... 
YAML Exception reading /home/j/testing/index.html: (<unknown>): did not find expected key while parsing a block mapping at line 19 column 3 
                    done in 1.008 seconds.
 Auto-regeneration: enabled for '/home/j/testing'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

What you have above isn’t valid YAML. Put the Markdown in quotes or use a pipe.
Then in your Liquid make sure you’re using the markdownify filter to convert the string into HTML.


gallery:
- full: /images/fulls/01.jpg
  thumb: /images/thumbs/01.jpg
  title: "[My text](#)"

# or do this
gallery:
- full: /images/fulls/01.jpg
  thumb: /images/thumbs/01.jpg
  title: |
    [My text](#)

e.g. {{ some_var | markdownify }}

1 Like

Thank you. The double quote or pipe does fix the yaml error, but still there’s no hyperlink, just text. i.e. [My text](#)

So I’ve found that the variable I want to markdownify is
title ="{{ site.baseurl }}{{ image.title }}"
I’m confused now as to where in my liquid to do the: {{ some_var | markdownify }}?
I’ve tried to input {{ image.title | markdownify }} in the liquid part of my index.html, as well as in my gallery.html component, but still I get no hyperlink.

I am reading more, but there’s no info at:

If you can share the code you have so far it’ll be way easier to point out what you need to change to make it do what you want.

I’m sorry. I can’t share the code as i purchased the template on which it’s based

Yeah I dunno then, going to be hard to point out suggestions then.

The way markdownify works is it converts a Markdown string into HTML. So if you’re doing something like:

gallery:
- full: /images/fulls/01.jpg
  thumb: /images/thumbs/01.jpg
  title: "[My text](#)"

When you loop over gallery and apply markdownify to the title key it would convert [My text](#) to the following HTML:

<p><a href="#">My text</a></p>

Which depending on your gallery component might need additional manipulations. For example maybe you want to remove the wrapping paragraph element:

{{ image.title | markdownify | replace: '<p>' | replace: '</p>' }}

What might be helpful is if you shared the HTML you’re getting now in the page. Simply saying “but still I get no hyperlink” doesn’t really tell us much.

Does it output text? Does it output text with no wrapping <a> element? Etc. If you can’t share the source then the compiled HTML is the next best thing.

1 Like

Thanks.

So in my gallery.html file, I’ve included the line:
{{ image.title | markdownify }}

In the title, where I’m expecting the hyperlinked text, I just get the following text, with no link:
[my text](#)

Perhaps I need to do something like the below?? but I’m not sure of the syntax:
{{ {{ site.baseurl }}{{ image.title }} | markdownify }}

Yeah you are going to have an issue inserting baseurl into the brackets.

Can I suggest instead of storing your title as flat text, store it as the pieces. Then in your Liquid you build up the link.

---
gallery:
- full: /images/fulls/01.jpg
  thumb: /images/thumbs/01.jpg
  title: My text
  target: foo.md

---

{% assign item = gallery[0] %}

![]({{ item.full }})

[{{ item.title }}]({{ item.target | relative_url }})

Note that relative_url filter here will prepend the url with baseurl