Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add markdown template hooks for links and images #6545

Closed
bep opened this issue Nov 27, 2019 · 26 comments · Fixed by #6614
Closed

Add markdown template hooks for links and images #6545

bep opened this issue Nov 27, 2019 · 26 comments · Fixed by #6614
Assignees
Labels
Milestone

Comments

@bep
Copy link
Member

@bep bep commented Nov 27, 2019

This is the number one pain point left vs rendering of content files, and I will do a fast implementation for this for Hugo 0.61.**

Common issues that are currently very hard/impossible to do:

  • Adding attributes/classes to links, e.g. target=_blank on external links.
  • Resolve links using .GetPage
  • Resolve and resize images
  • Collecting all images/links in a content file.
  • ...

We may do improved (and faster) plugin interfaces for this (re. Starlight discussion in another thread), but what I suggest we do very short term is outlined in the below:

layouts
├── _markup
│   ├── render-link.html
│   └── render-image.html
└── index.html
  • So render-link and render-image are predefined hook macros that will be responsible for producing the markup for links and img tags.
  • They will receive a context with the current page, output format (which I will add to the page), and information about the link/image.
  • The template lookup will follow the same rules as other templates vs. output format and language etc, templates in the project will override any in the theme(s), if no found we will use the default behaviour.

/cc @regisphilibert @onedrawingperday @kaushalmodi and gang.

** I know people are waiting "Pages for data", and it's in the pipeline. I have a branch where I'm working on it, so it's coming ... eventually.

@bep bep added the Enhancement label Nov 27, 2019
@bep bep added this to the v0.61 milestone Nov 27, 2019
@bep bep self-assigned this Nov 27, 2019
@bep bep added Proposal and removed Enhancement labels Nov 27, 2019
@onedrawingperday

This comment has been minimized.

Copy link
Contributor

@onedrawingperday onedrawingperday commented Nov 27, 2019

Yes please. Pretty please with sugar on top!

This is a feature that I really-really want...

Having the ability to control markdown syntax images from the templates will make content editing in Hugo much more intuitive and portable.

Just closed #6505 in favor of this issue.

@HenrySkup

This comment has been minimized.

Copy link

@HenrySkup HenrySkup commented Nov 27, 2019

Very great! Currently i'm doing this by pre-regexing .Content before markdownify ...

Might be helpful to have some custom syntax interface? (so that we aren't limited to just ahref / img / or other pre-backed ones?)

@regisphilibert

This comment has been minimized.

Copy link

@regisphilibert regisphilibert commented Nov 27, 2019

Very exciting indeed.

Would this be limited to the .Content renderer, or also applied when using the markdownify function?

@bep

This comment has been minimized.

Copy link
Member Author

@bep bep commented Nov 27, 2019

Would this be limited to the .Content renderer, or also applied when using the markdownify function?

I was thinking about .Content. For this to work with markdownify we need to add Page.Markdownify (which I guess is described in another issue) -- because we need a page context.

@regisphilibert

This comment has been minimized.

Copy link

@regisphilibert regisphilibert commented Nov 27, 2019

This one #5976 and this one #6094 thought the latter won't be needed after once #5976 is implemented.

@bep

This comment has been minimized.

Copy link
Member Author

@bep bep commented Nov 27, 2019

because we need a page context.

I guess we strictly don't must have it, but it would be nice. We could and probably should make it optional, so you need to do

{{ with .Page }}
{{ else }}
{{ end }}
@regisphilibert

This comment has been minimized.

Copy link

@regisphilibert regisphilibert commented Nov 27, 2019

I guess we strictly don't must have it, but it would be nice. We could and probably should make it optional, so you need to do

I agree.
This would not break too many people's code, as people would have to start using shortcode in markdownifyed string for this to break without a proper with clause.

@regisphilibert

This comment has been minimized.

Copy link

@regisphilibert regisphilibert commented Nov 27, 2019

As for naming, I think we should stay away from HTML tags so 👍 for link.html but not for img.html. I'd suggest

layouts
├── _markup
│   ├── render-link.html
│   └── render-image.html
└── index.html
@bep

This comment has been minimized.

Copy link
Member Author

@bep bep commented Nov 27, 2019

link.html but not for img.html. I'd suggest

I agree with the link vs href, but render-image might be misleading ... But I guess it's fine.

@regisphilibert

This comment has been minimized.

Copy link

@regisphilibert regisphilibert commented Nov 27, 2019

Also, the dir is being called markup, this could expand to rendering from something else than markdown?

@davidsneighbour

This comment has been minimized.

Copy link

@davidsneighbour davidsneighbour commented Nov 27, 2019

I wonder if anywhere the - in render-image might bring issues and an underscore like render_image would fit more? But that's just because of my bad experiences in other templating systems where the - might be interpreted mathematically.

@regisphilibert

This comment has been minimized.

Copy link

@regisphilibert regisphilibert commented Nov 27, 2019

I agree with the link vs href, but render-image might be misleading ... But I guess it's fine.

Ideally there is an agreed upon list somewhere of markdown "function/feature" names we could use when expanding this to more than images and links. But not sure where to look...

@sephore

This comment has been minimized.

Copy link

@sephore sephore commented Nov 27, 2019

I can see this feature being used to generate a sitemap file with images...

@bep bep modified the milestones: v0.61, v0.62 Nov 28, 2019
@bep bep added Enhancement and removed Proposal labels Nov 28, 2019
@bep bep modified the milestones: v0.62, v0.61 Nov 28, 2019
@bep

This comment has been minimized.

Copy link
Member Author

@bep bep commented Nov 28, 2019

My first very rough implementation of this tells me that this is a great idea.

@bep bep pinned this issue Nov 28, 2019
bep added a commit to bep/hugo that referenced this issue Dec 1, 2019
This commit also revises the change detection for templates used by content files in server mode.

Fixes gohugoio#6545
Fixes gohugoio#4663
@bep bep modified the milestones: v0.61, v0.62 Dec 11, 2019
bep added a commit to bep/hugo that referenced this issue Dec 12, 2019
This commit also revises the change detection for templates used by content files in server mode.

Fixes gohugoio#6545
Fixes gohugoio#4663
Closes gohugoio#6043
bep added a commit to bep/hugo that referenced this issue Dec 12, 2019
This commit also revises the change detection for templates used by content files in server mode.

Fixes gohugoio#6545
Fixes gohugoio#4663
Closes gohugoio#6043
bep added a commit to bep/hugo that referenced this issue Dec 12, 2019
This commit also revises the change detection for templates used by content files in server mode.

Fixes gohugoio#6545
Fixes gohugoio#4663
Closes gohugoio#6043
bep added a commit to bep/hugo that referenced this issue Dec 13, 2019
This commit also revises the change detection for templates used by content files in server mode.

Fixes gohugoio#6545
Fixes gohugoio#4663
Closes gohugoio#6043
bep added a commit to bep/hugo that referenced this issue Dec 13, 2019
This commit also revises the change detection for templates used by content files in server mode.

Fixes gohugoio#6545
Fixes gohugoio#4663
Closes gohugoio#6043
bep added a commit to bep/hugo that referenced this issue Dec 13, 2019
This commit also revises the change detection for templates used by content files in server mode.

Fixes gohugoio#6545
Fixes gohugoio#4663
Closes gohugoio#6043
bep added a commit to bep/hugo that referenced this issue Dec 15, 2019
This commit also revises the change detection for templates used by content files in server mode.

Fixes gohugoio#6545
Fixes gohugoio#4663
Closes gohugoio#6043
bep added a commit to bep/hugo that referenced this issue Dec 15, 2019
This commit also revises the change detection for templates used by content files in server mode.

Fixes gohugoio#6545
Fixes gohugoio#4663
Closes gohugoio#6043
bep added a commit to bep/hugo that referenced this issue Dec 18, 2019
This commit also revises the change detection for templates used by content files in server mode.

Fixes gohugoio#6545
Fixes gohugoio#4663
Closes gohugoio#6043
bep added a commit to bep/hugo that referenced this issue Dec 18, 2019
This commit also revises the change detection for templates used by content files in server mode.

Fixes gohugoio#6545
Fixes gohugoio#4663
Closes gohugoio#6043
bep added a commit to bep/hugo that referenced this issue Dec 18, 2019
This commit also revises the change detection for templates used by content files in server mode.

Fixes gohugoio#6545
Fixes gohugoio#4663
Closes gohugoio#6043
bep added a commit to bep/hugo that referenced this issue Dec 18, 2019
This commit also revises the change detection for templates used by content files in server mode.

Fixes gohugoio#6545
Fixes gohugoio#4663
Closes gohugoio#6043
bep added a commit to bep/hugo that referenced this issue Dec 18, 2019
This commit also revises the change detection for templates used by content files in server mode.

Fixes gohugoio#6545
Fixes gohugoio#4663
Closes gohugoio#6043
bep added a commit to bep/hugo that referenced this issue Dec 18, 2019
This commit also revises the change detection for templates used by content files in server mode.

Fixes gohugoio#6545
Fixes gohugoio#4663
Closes gohugoio#6043
bep added a commit to bep/hugo that referenced this issue Dec 18, 2019
This commit also revises the change detection for templates used by content files in server mode.

Fixes gohugoio#6545
Fixes gohugoio#4663
Closes gohugoio#6043
@bep bep closed this in e625088 Dec 18, 2019
@bep bep closed this in #6614 Dec 18, 2019
@jakejarvis

This comment has been minimized.

Copy link
Contributor

@jakejarvis jakejarvis commented Dec 18, 2019

@bep this is awesome! Playing with it now and have a quick question though, not sure if this is a full bug/regression – if so I can repost. I have links where the inner text includes code styling (via markdown, single tildes) but .Text in render-link.html returns plaintext like so:

<a href="{{ .Destination | safeURL }}" target="_blank" rel="noopener">{{ .Text }}</a>
[`should be code`](https://gohugo.io)

...returns <a href....>should be code</a> instead of <a href....><code>should be code</code></a> as before.

Same with bold text ([**asdf**](#)) and other markdown styling. I've tried {{ .Text | markdownify }} as well with the same result. Am I missing something?

This is still a HUGE feature for me though, especially with images, so thanks!!! 👍

@bep

This comment has been minimized.

Copy link
Member Author

@bep bep commented Dec 18, 2019

@jakejarvis can you create a separate issue. This may be related to a similar issue we fixed in the ToC extension earlier.

@onedrawingperday

This comment has been minimized.

Copy link
Contributor

@onedrawingperday onedrawingperday commented Dec 18, 2019

@bep

I have already tested the new functionality and I also think that this is such an amazing update that will simplify my workflow a lot. Now every Markdown editor out there can be used as a CMS for Hugo, even on mobile.

Thank you so much! 🥇

@bep

This comment has been minimized.

Copy link
Member Author

@bep bep commented Dec 18, 2019

Yes, it's pretty great.

@bep bep unpinned this issue Dec 19, 2019
@inwardmovement

This comment has been minimized.

Copy link

@inwardmovement inwardmovement commented Dec 23, 2019

Awesome!
Would it make sense to have a render-anchors.html to be able to customize anchors generated via .TableOfContents? > using anchorize.

This would allow to bypass Goldmark's stripping non Unicode characters from anchors (6616) without the need of an extension, but maybe an extension would make more sense I don't know (I guess an extension would indeed feel more "native" than a custom template).

@deanishe

This comment has been minimized.

Copy link

@deanishe deanishe commented Jan 1, 2020

How is render-image.rss.xml supposed to work? It's name-checked, but not described in the docs.

I've created both render-image.html and render-image.rss.xml templates, but render-image.html is being used for RSS feed content, not render-image.rss.xml.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
9 participants
You can’t perform that action at this time.