I am using the following code {{< figure src="../img/img.png" title="the image title" >}} to display image on hugo website and it works fine. I found this piece of code from: Add image to webpage which uses hugo framework
Now I wanted to do some image processing and was using the following link: https://gohugo.io/content-management/image-processing/
I was trying to use the following lines of code:
{{ $image := resources.Get "images/sunset.jpg" }}
{{ $image := resources.GetRemote "https://gohugo.io/img/hugo-logo.png" }}
For first line in above code, the folder structure is as follows. Inside the blog-code(root folder) I created assets/images, with sunset.jpg inside. It does not work i.e. image is not displayed on the page.
Folder Structure
blog-code/assets/images/sunset.jpg
The second line in above code is fetching a remote image. It also does not work.
I have tried following link, Processing images in Hugo, and few other links but not able to solve the issue.
Please guide, where I am getting wrong.
Thanks.
{{ $image := resources.Get "images/sunset.jpg" }} <- you're getting the image resource and assigning to a variable
<img src="{{$image.Permalink}}"> <- now you are giving the image resources URI to the src attribute
You're referenced link DOES show this exact pattern.
Reading the Hugo Docs for Image processing:
https://gohugo.io/content-management/image-processing/#readout
Seems like what you need so you do not fall prey to misunderstanding.
It does not work i.e. image is not displayed on the page.
This code:
{{ $image := resources.Get "images/sunset.jpg" }}
does not display an image, it only sets the variable $image.
Related
I am running an open source comment engine on my server which I want to integrate to my Hugo site.
After doing all the listed things below, the comment section is not visible, and only the heading appears.
What are the possible reasons for this and error and how can I solve it?
So I created a partials file for It, added some code in single.hmtl and edited my config.toml correspondingly.
This is what's inside my partial file named commento.html:
<div id="commento"></div>
<script defer src="{{ .Site.Params.CommentoURL }}/js/commento.js"></script>
<noscript>Please enable JavaScript to load the comments.</noscript>
This is what's inside my single.html file:
{{ if and .Site.Params.CommentoURL (and (not .Site.BuildDrafts) (not .Site.IsServer)) -}}
<h2>Comments</h2>
{{ partial "commento.html" . }}
{{- end }}
and I added the commentoURL parameter in config.toml file like this:
CommentoURL = "http://qwerty.abc:8080"
Please Inspect the output HTML. I am pretty sure you will find this empty div:
<div id="commento"></div>
This means that your Javascript is broken. This has nothing to do with Hugo, partials or even Hugo themes. You probably also have a red error in your Javascript console. This is what you should focus on.
Is there any way to tweak how Hugo output codefences?
if I have some markdown like so:
```csharp
//some code
```
It will be generated as:
<pre class="language-csharp">
<code class="language-csharp">
//some code
Can I somehow change the pre+code output?
I'm trying to integrate Mermaid.js into my site and this fails due to having the two tags.
If it manages to hook onto the code tag, the Mermaid output is just shown as code inside the pre
And if it hooks onto the pre, then the inner text is wrong and cant be parsed.
For anyone stuck on this issue, here is how I ended up solving it.
In the template for our pages, we take the content of the markdown file.
Then find-replace language-mermaid with just mermaid.
This prevents collision with other libraries like Prism.JS.
And it allows Mermaid.JS to correctly find the proper tag and class to hook into.
<div>
{{ $content := .Content }}
//other replace hacks ....
//...
{{ $content = replace $content "language-mermaid" "mermaid" }}
{{ safeHTML $content}}
This results in generated files containing the following output.
<pre>
<code class="mermaid">
...
Ugly hack, but works. so that is good enough for us right now.
So far, 6th March 2022, it is not possible. According to the official documentation, only images, links, and headings are adjustable in this way.
However, you should be able to create your own shortcode and implement it in a way that will provide you the features you want to get and use.
How can I have /posts as homepage?
Should I redirect, change the baseURL in hugo 1config or make changes in
the theme 2config?
Footnotes
1 https://gohugo.io/getting-started/configuration/
2 https://github.com/luizdepra/hugo-coder/wiki/Configurations
You can modify the home.html file, as the index.html file is embedding it and there is nothing else in index.html
https://github.com/luizdepra/hugo-coder/blob/master/layouts/partials/home.html
Make the changes in the above file in theme/layouts/partials/home.html these changes will take effect on the site as soon as you save the file (if you are already running $ hugo server -D)
For me, it helped to add a layouts/index.html file to my theme. Here is its content:
{{ define "main" }}
{{ $pag := .Paginate (where site.RegularPages "Type" "in" site.Params.mainSections ) 6 }}
<div class="archive-body">
{{ range $pag.Pages }}
{{ .Render "li" }}
{{ end }}
</div>
{{ partial "pagination" . }}
{{ end }}
"li" is a partial HTML template, which renders a single page for me.
Then I had to specify mainSections in my config.toml. Since my content is located inside content/post directory, here is the configuration.
[params]
mainSections = ["post"]
Since this is a list, you should be able to add more than one section. For example, if your content is spread let's say between content/post and content/articles and so on. I haven't tried this, though.
I know this is an old question, but the easiest way for me to set a particular markdown page as the landing page was simply to create a layouts/index.html to override my theme's, and put this in it:
<script>window.location = "/mainlist"</script>
This way, I can keep all my theme's styling, not worry about editing templates, and just focus on creating the content. As a newcomer to hugo, this worked quite well as a replacement for Pelican's save_as: index.html.
Look, Hugo is for writing static (and blog) sites in markdown. GREAT! How do I create the home page (i.e. not the home post)?!
By home page I mean I want to have some markdown file rendered in my theme at the root: http://example.com/, not http://example.com/home (I will change themes if necessary, but I'm currently using hugo-nuo).
Here's how I'm trying to do it:
add my own layouts/index.html (overriding the theme's)
{{ define "main" }}
{{ partial "header.html" . }}
<section class="main">
WHERE I WISH I COULD IMPORT home.md OR SOME SUCH, HECK I'D BE ALRIGHT JUST PUTTING MARKDOWN HERE
</section>
{{ partial "footer.html" . }}
{{ end }}
This incredibly long thread seems to discuss a bunch of issues that've been addressed, but I don't see this answer.
This answer says to use shortcodes. I'm willing to do that, but it looks like shortcodes can only be used from within content (citation needed).
You can add a _index.md into the folder content/ and access it, e.g. via {{ .Content }}.
Some context:
I'm using a .twig file to display some .png images, like this
<img class="output-icons" src="{{ asset('path/to/images/output_icon_' ~ '{{ output.slug }}' ~ '.png') }}">
The images are all named output_icon_(output.slug).png; output.slug has 11 different slugs, same number of pictures I have. here's a picture name example: output_icon_balance.png.
So far so good, it all works as it should, but even tho all 11 pictures are being displayed, the console is showing this
GET URL/path/output_icon_%7B%7B%20output.slug%20%7D%7D.png?v2212 404 not found
You have to use ng-src to render images defined on your scope. The reason is that browser will read it as {{variable}} assigned to your src tag instead of rendering it first and then assigning. So, ng-src will make sure that your variable is first rendered and then assigned to your tag.
For more Info:
https://docs.angularjs.org/api/ng/directive/ngSrc