Need Method to Specify URLs in Content Pages

[theory]

Followup from #4803. The issue is to have a reliable way to specify relative and absolute URLs as well as page bundle reference URLs when writing a content document. The use case would be to reference documents in a bundle, files elsewhere in the hierarchy (e.g., a static image), and reliably get the proper URL given the base URL, including a path prefix. One ought to be able to use such a feature either on its own:

![My Wedding]({{% .URLForBundleFile "mawidge.jpeg" %}})

Or in combination with shortcodes:

{{% image src = {{% .URLForBundleFile "mawidge.jpeg" %}} %}}

Some examples of major use cases:

<!-- Relative URL; Page.AbsURL makes an absolute URL relative to the current page -->
{{% image src = {{% .AbsURL "../leopard/cat.png" %}} %}}

<!-- Path relative to base URL; Page.RelURL makes a URL relative to the root directory. -->
{{% image src = {{% .RelURL "/foo/img/hi.png" %}} %}}

<!-- AbsURLForBundleFile makes an absolute URL for an item in the page bundle. -->
{{% image src = {{% .AbsURLForBundleFile "wedding.png" %}} %}}

<!-- Absolute URL; nothing to do. -->
{{% image src = "https://google.com/logo.png" %}}

[vassudanagunta]

If #4728 were resolved, and either the ref/relref shortcodes worked for images or Hugo automatically adjusted all local absolute Markdown links for the site's base URL, wouldn't that take care of it more cleanly?

[theory]

If ref/relref worked for page bundle items (or just whatever is in the current directory), then yes, I think so?:

<!-- Relative URL; ref makes an absolute URL relative to the current page -->
{{% image src = ref "../leopard/cat.png" %}}

<!-- Path relative to base URL; relref makes a URL relative to the root directory. -->
{{% image src = relref "/foo/img/hi.png" %}}

<!-- ref makes an absolute URL for an item in the page bundle. -->
{{% image src = ref "wedding.png" %}}

<!-- Absolute URL; nothing to do. -->
{{% image src = "https://google.com/logo.png" %}}

I'm assuming, of course, that embedding one shortcode in another would work. But if not, perhaps the image shortcode could be updated to use ref — assuming ref recognizes a complete URL (with scheme).

[theory]

Oh, and the link param to the image shortcode should probably use ref, too.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. The resources of the Hugo team are limited, and so we are asking for your help.
If this is a bug and you can still reproduce this error on the master branch, please reply with all of the information you have about it in order to keep the issue open.
If this is a feature request, and you feel that it is still relevant and valuable, please tell us why.
This issue will automatically be closed in the near future if no further activity occurs. Thank you for all your contributions.

[theory]

Still think it's relevant to have a unified way to link to files within a bundle.

[bep]

Still think it's relevant to have a unified way to link to files within a bundle.

You can. I will explain, but add that the internal shortcodes of Hugo is a little bit behind the whole "bundle thing". But that does not mean that you cannot create your own shortcodes that will support this:

If this was you calling your custom image shortcode:

{{< image page="../some-other-bundle"  match="**cat.png" >}}

And then in your image.html shortcode (note that I'm typing this on GitHub untested):

{{ $page := .Page.GetPage (.Get "page") }}
{{ $image := $page.Resources.Match (.Get "match") }}
<img src="{{ $image.RelPermalink }}">

There are lots of additional possibilities to the above (image processing etc).

/cc @kaushalmodi

[theory]

Yeah, I have this shortcode:

{{- partial "link.html" (dict "Page" $.Page "Site" $.Site "src" (.Get 0 )) -}}

I call it like this:

    <img src="{{% link "over_engine.jpg" %}}" alt="Shot over the prop engine" />

And it, in turn, calls this partial:

{{- if hasPrefix .src "/" }}
    {{/*  Cannot use absURL because it doesn't work as expected if baseURL has a subdir. */}}
    {{- printf "%v%v" (replaceRE "/$" "" .Site.BaseURL) .src -}}
{{- else if (findRE "(^|:)//" .src ) }}
    {{- .src -}}
{{- else }}
    {{- printf "%v%v" (replaceRE "[.][a-zA-Z0-9]$" "/" .Page.Permalink) .src -}}
{{- end -}}

I admit I've not had my head in Hugo for a while, so I don't recall exactly why I wrote it this way. I've just been depending on this as-is. And while it works well enough, it feels pretty hackish. But perhaps I've overlooked something.

[theory]

To get back to the OP, can you do something like:

![My Wedding]({{% image page="."  match="mawidge.jpg" %}})

And nest it inside another shortcode?

{{% image src = {{% image page="."  match="mawidge.jpg" %}} %}}

PS: Amused that my spell-checker keeps correcting "shortcode" to "shortcake".

[kaushalmodi]

The figure shortcode can be updated using the various techniques discussed above:

• For images not in bundles (this is really important for my sites): prefix the Site.BaseURL so that the figure src links work in summary renders on the list pages too.
• For images in bundles: Use the resource + match + permalink approach that @bep suggested.

I can work on a PR that solves both of the above issues. Would that be accepted? (Is that why I was Cc'ed? :))

[bep]

(Is that why I was Cc'ed? :))

No.

I will close this issue now. I don't know how such a shortcode would/should look like. But this issue is not the correct medicine. You should continue any discussion at the forum.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.