Comments (14)
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 adjustframe-src
andimg-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 tohttps
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 frommain
) calledimage-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.
Related Issues (20)
- Add support for native Bootstrap forms
- Make module configurations loosely coupled HOT 3
- [BUG] Support deployment to folder HOT 8
- [BUG] menu items links in navigation bar are incorrect HOT 2
- [BUG] Reduce screen flickering in color mode HOT 2
- [BUG] Sidebar menu does not support multiple languages HOT 1
- [BUG] Sidebar does not support links to external pages
- [BUG] "Last updated" string is not localized with i18n HOT 2
- Save and get the selected language just as the theme switch HOT 15
- [BUG] Prevent recursion when targeting a local page
- [BUG] Fix use of declarations after nested rules (deprecated in Sass 1.77.7)
- [BUG] Purge page translations from search index (FlexSearch)
- [BUG] Blockquote rendering is missing the Bootstrap class HOT 5
- [BUG] File component arguments not working HOT 2
- [BUG] Date defaults to Jan 01 if not specified in metadata
- [BUG] Search background flickers between light and back background when color primary color is used for navbar HOT 9
- [BUG] Flash of unstyled content HOT 1
- [BUG] Theme toggle button flickers HOT 4
- Allow adding aria-label to featured Actions HOT 1
- [BUG] Enable overlay when fixed is turned off
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hinode.