Unable to link any external image in a post about hinode HOT 14 CLOSED

Hi @rimatech987, thanks for reporting this issue. The theme supports local images only at the moment, as it preprocesses them to optimize the rendered image for different sizes and resolutions. For example, the post content/en/blog/code-highlighting.md contains a reference to img/notepad.jpg. The image is retrieved from the assets/img/ folder. So copying the desired image to your local folder should resolve your issue for now.

I agree it would be helpful to support references to external images too, and to simply skip any optimization steps in this case. I'll flag this as an enhancement.

from hinode.

I committed several changes to the develop branch. Both local and remote images should now be supported. A warning is added to the log if the image cannot be found. Care to test the changes?

git clone -b develop https://github.com/markdumay/hugo-theme-hinode.git

from hinode.

Hi @markdumay , thank you for your quick reply.
I tested all your changes in the develop branch but only the thumbnail works both with external and local images (local pictures must be saved to /img folder to be viewed).

This is the test.md file I used.

---
author: "Hugo Authors"
title: "Test"
date: 2022-07-13
description: "Lorem Ipsum Dolor Si Amet"
tags: ["markdown", "text"]
thumbnail: https://picsum.photos/id/1002/3000/2000
---


![Placeholder](https://picsum.photos/id/1002/3000/2000)

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" style="width:104px;height:142px;">

![Bird](/bird.jpg)


<p>This is a paragraph</p>


<iframe id="test"  style=" height:400px; width:100%;" scrolling="yes"  frameborder="0" src="http://leafletjs.com/examples/mobile/example.html"></iframe>

And here the result

P.S.Local pictures work in markdown only if you put them into the /static folder but NO image resizing is applied (compared to Blist). Tried in /assets/img and /images folders with no luck. I don't really care because I'm more interested in external image support but someone else might still be interested in it).

![Bird](/bird.jpg)

I tried also inserting some simple html code. <p> works , <img> no, <iframe> doesn't show me the frame properly.

Here instead in Blist

Everything works perfectly here (html code, image resizing, thumbnail , local and external image in markdown)

In brief:

• Thumbnail

• HTML code - <img>, <iframe> etc.

• Local image in Markdown - ![name](/img.jpg)

• External image in Markdown - ![name](url)

from hinode.

Thanks for your elaborate review and feedback. It appears most of the issues are related to a strict Content Security Policy. You can review and modify the settings in config/_default/server.toml. In particular, you might want to adjust frame-src and img-src, for example:

frame-src 'self' localhost:1313 https://utteranc.es https://www.youtube-nocookie.com https://www.youtube.com http://leafletjs.com; \
img-src 'self' https: data:; \

The example link to the iframe requires additional permissions for the geolocation (and I would suggest to link to https to avoid mixed content).

I realize the content security policy is rather strict by default, without any explanation. I'll tweak the default settings and add a section to the README.

Finally, the link to the local image does not work, as the content in assets/img is preprocessed by Hugo. Instead, you should link to content in the static folder. For example:

![Logo](/logo512x512.png)

You could use the image shortcode if you would like to link to a processed image, which uses Bootstrap rendering:

{{< image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded">}}

from hinode.

I submitted a new release (v0.5.1) with the above changes. Any additional thoughts / comments?

from hinode.

In addition, I modified the code to ensure all static and processed images are stored in the img folder. See release v0.5.2.

from hinode.

Thanks for your elaborate review and feedback. It appears most of the issues are related to a strict Content Security Policy. You can review and modify the settings in config/_default/server.toml. In particular, you might want to adjust frame-src and img-src, for example:

frame-src 'self' localhost:1313 https://utteranc.es https://www.youtube-nocookie.com https://www.youtube.com http://leafletjs.com; \
img-src 'self' https: data:; \

The example link to the iframe requires additional permissions for the geolocation (and I would suggest to link to https to avoid mixed content).

I realize the content security policy is rather strict by default, without any explanation. I'll tweak the default settings and add a section to the README.

Well done @markdumay . I appreciate it very much!
I modified the server.toml file as you suggested and now everything works perfectly.

I have not tested your new release yet, but one small problem remains.

I noticed that no matter of the resolution of the thumbnail photo you wanna set, it always stays at the max resolution of 1280x640 (if I remember correctly).
This is perfect.

Would it be possible to do the same for the other images in the post?

Because otherwise, to get a good effect, you have to manually resize one by one and it becomes rather long and boring as a workflow to create a post with pictures.

What do you think?

from hinode.

Great to hear your issues have been resolved!

Regarding the image sizing, I would suggest to use the image shortcode instead of plain markdown (such as ![Bird](/bird.jpg):

{{< image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded">}}

The image shortcode takes an aspect ratio as input and crops the image accordingly. In addition, the image is provided as an image set. This means that the browser determines which image is best to download, according to screen DPI and viewport size. Hugo preprocesses all the images and stores them in the /img folder. You can now provide either a local or remote image url.

You can use npm run build to generate the static web site and inspect the results. More details about the shortcode can be found in the source documentation.

from hinode.

Also, I modified the code to ensure that all static and processed images are stored in the img folder. See release v0.5.2.

Hi Mark, release v0.5.2 is not working for me.

I started from scratch by creating new site but I can't get it working (with both the child and main theme).

Instead no problem with the develop branch one.

Errors during compiling

ERROR 2022/11/06 10:13:39 "section" rendering failed: "/xxx/themes/my-hinode-site/layouts/_default/list.html:9:28": template execution failed: template: _default/list.html:9:28: execution of "main" to <partial "assets/blog-card.html" $element>: error in calling partial: "/xxx/themes/my-hinode-site/layouts/partials/assets/blog-card. html:4:16": template execution failed: template: partials/assets/blog-card.html:4:16: execution of "partials/assets/blog-card. html" to <partial "image.html" (dict "url" .Params. thumbnail "ratio" "16x9" "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" .Params.title)>: error in calling partial:"/xxx/themes/my-hinode-site/layouts/partials/image. html:59:19": template execution failed: template: partials/image.html:59:19: execution of "partials/image.html" to <$img.Fill>: error in calling Fill: this method is only available for image resources
ERROR 2022/11/06 10:13:39 the rendering of "home" failed: "/xxx/themes/my-hinode-site/layouts/index.html:14:36": template execution failed: template: index.html:14:36: execution of "main" to <partial "assets/blog-card. html" $element>: error in calling partial: "/xxx/themes/my-hinode-site/layouts/partials/assets/blog-card.html:4:16": execute of template failed: template: partials/assets/blog-card.html:4:16: executing "partials/assets/blog-card. html" to <partial "image.html" (dict "url" .Params.thumbnail "ratio" "16x9" "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" .Params.title)>: error in calling partial:"/xxx/themes/my-hinode-site/layouts/partials/image. html:59:19": template execution failed: template: partials/image.html:59:19: execution of "partials/image.html" to <$img.Fill>: error in calling Fill: this method is only available for image resources
Error: Error building site: failed to render pages: render of "page" failed: execute of template failed: template: partials/head/head.html:7:7: executing "head" at <partial "head/seo.html" .>: error calling partial: "/xxx/themes/my-hinode-site/layouts/partials/head/seo. html:29:20": execute of template failed: template: partials/head/seo.html:29:20: executing "partials/head/seo.html" at <.Fill>: error calling Fill: this method is only available for image resources

I think you forgot to update the layouts folder.
In fact, by replacing the layouts folder with the one from the develop branch, the site works perfectly without errors.

from hinode.

That's strange, I could not reproduce your error. The GitHub actions also check out fine. What happens if you start entirely from scratch, e.g. git clone https://github.com/markdumay/hugo-theme-hinode.git in a new directory?

Anyways, I have refined the image processing code to make it more robust. It should now also generate appropriate warnings in Hugo's log.

from hinode.

That's strange, I could not reproduce your error. The GitHub actions also check out fine. What happens if you start entirely from scratch, e.g. git clone https://github.com/markdumay/hugo-theme-hinode.git in a new directory?

Anyways, I have refined the image processing code to make it more robust. It should now also generate appropriate warnings in Hugo's log.

I downloaded it again but I got this.

Error: Error building site: "/xxx/themes/hugo-theme-hinode/content/en/blog/test2.md:14:1": failed to render shortcode "image": failed to process shortcode: "/xxx/themes/hugo-theme-hinode/layouts/shortcodes/image.html:58:23": execute of template failed: template: shortcodes/image.html:58:23: executing "shortcodes/image.html" at <$img.Fill>: error calling Fill: this method is only available for image resources

test2.md file attached
test2.md

Also here, by replacing the layouts folder with the one from the develop branch, the site works like a charm.

The difference between the two image.html files is here

Developed branch - Image.html

{{ $img := resources.GetMatch $url }}
    {{ if not $img }}
        {{ $img = resources.GetRemote $url -}}
    {{ end}}

Default branch - Image.html

  {{ $img := resources.GetMatch $url }}
    {{ if not $img }}
        {{ $img = resources.GetRemote $url -}}
        {{ if $img }}
            {{ $filename := index (last 1 (split (delimit (split $url "/") "," "") ",")) 0 }}
            {{ $img = $img.Content | resources.FromString (printf "/img/%s" $filename) }}
        {{ end }}
    {{ end}}

from hinode.

Thanks for checking again and for sharing the example. I was now able to identify the error. The error was caused by the below URL containing query parameters (the section after the ?). The part after the . was identified as an unrecognized file extension.

https://images.unsplash.com/photo-1621014287453-532d3cc71fab?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=1280

I updated the GetImage.html partial to strip the query parameters from the filename. It should now work correctly. I created a new branch (derived from main) called image-test. Care to test it?

from hinode.

Thanks for checking again and for sharing the example. I was now able to identify the error. The error was caused by the below URL containing query parameters (the section after the ?). The part after the . was identified as an unrecognized file extension.

https://images.unsplash.com/photo-1621014287453-532d3cc71fab?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=1280

I updated the GetImage.html partial to strip the query parameters from the filename. It should now work correctly. I created a new branch (derived from main) called image-test. Care to test it?

We did it! Image-test branch works 😄

All that remains is to update the changes in the main and child themes as well 👍

from hinode.

Great! I've merged the changes into the main branch and updated the child theme too. Thanks again for your feedback.

from hinode.