Is there a shortcode to check if is amp page?
My issue is that I am using html tags in my markdown (don’t shoot me). and for amp pages I need to use a different markup for images.
What is the syntax for “If amp page” ?
It’s a Custom Output Format so you can check for it like so:
{{ with .OutputFormats.Get "AMP" }}...{{ end }}
Hi There.
That does not seem to be working. It is being output as text on the amp version and the web version. This is the code I am using in my md file.
<div>
{{ with .OutputFormats.Get "AMP" }}
This should only appear on the AMP Page
{{ end }}
</div>
and this is what I see as text:
{{ with .OutputFormats.Get "AMP" }}
This should only appear on the AMP Page
{{ end }}It most certainly works.
You need to use a condition in your templates.
I gave you a direction regarding the original question but spoon feed the code I shall not.
Please do read:
There is no need to be condescending (This is how it came across). This is a support community and not everyone is as proficient as each other.
I appreciate your pointers so thank you for these I will look into the condition.
There is nothing condescending about following the Requesting Help guidelines.
The Introduction to Hugo Templating is required reading and a basic starting point.
With the above said try:
{{ with .OutputFormats.Get "AMP" }}
<p>This should only appear on AMP Pages</p>
{{ else }}
<p> NOT AMP</p>
{{ end }}
<div>
{{ with .OutputFormats.Get "AMP" }}
<div>This should only appear on the AMP Page</div>
{{ end }}
It’s a template thing … with embedded HTML
I am still having issues.
This is the output web (screenshot):
and the output on the /amp/ page (screenshot):
This has been placed in my what-we-do.md file.
Templating code is not entered in markdown content files.
Instead it goes into the templates. Typically under /layouts/
It’s difficult to say what needs to be done without seeing the source code of the project.
As I mentioned in my original post my markdown file has HTML in it. I have an image tag:
<img src="" alt="" />
however for amp I need to use:
<amp-img src="" alt="" />
So I am not sure how I would change that if I cannot use the condition in the markdown.
This is where I am failing.
I’m sorry I do not see anything of the sort in your original post.
It seems that you need to use Hugo Shortcodes or Inline Shortcodes to achieve what you describe.
In my original post I said:
My issue is that I am using html tags in my markdown (don’t shoot me). and for amp pages I need to use a different markup for images.
I assumed that would be widely understood as an img tag that needed to be different. Perhaps I was wrong to assume. That is my bad (It was super early in morning after coding for hours).
Thanks for the pointers of shortcodes. I will check them out.
Hey, So I read through the links you provided and tried your solution with it but I am either missing something vital or it is not possible 
I am getting the error:
error processing shortcode “shortcodes/image.html” for page “_index.md”: template: shortcodes/image.html:1:22: executing “shortcodes/image.html” at <.OutputFormats.Get>: can’t evaluate field OutputFormats in type *hugolib.ShortcodeWithPage
in my shortcode html (layout/shortcodes/image.html) file I have:
{{ with .OutputFormats.Get "AMP" }}
<amp-img src="{{ .Get 0 }}" alt="{{ .Get 1 }}" class="{{ .Get 2 }}" />
{{ else }}
<img src="{{ .Get 0 }}" alt="{{ .Get 1 }}" class="{{ .Get 2 }}" />
{{ end }}
and in my _index.md I have the following code:
{{% image "/logo.png" "About Us" "mb-3 mt-3" %}}
Do you think I can have your help again?
I don’t think there is (currently) a way to detect what the current output format is from a template.
What you can do is something ala:
myshortcode.html
myshortcode.amp.html
2 Likes
Thank you. This worked. Also thank you to @onedrawingperday for the time and effort to reply a few times.
2 Likes