I have been using markdown in hugo-theme-relearn
but have now switched to hugo-theme-bootstrap
Whilst the bootstrap theme does not have any methods to resize the image, is there a Hugo/markdown method to do this please ?
After quite a bit of searching it seems this can only be done with shortcode, or as in the case of huge-theme-relearn , within the theme.
Can this be a Hugo enhancement (resize an image with markdown), given that it requires a lot of shortcode to achieve the same result ?
Hello @jehoshua7
Hugo didnāt provide any features like this, but you can add this feature to your project with some custom js.
// Get Parameters from some url
var getUrlParameter = function getUrlParameter(sPageURL) {
var url = sPageURL.split('?');
var obj = {};
if (url.length == 2) {
var sURLVariables = url[1].split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
obj[sParameterName[0]] = sParameterName[1];
}
return obj;
} else {
return undefined;
}
};
// Execute actions on images generated from Markdown pages
var images = $(".content img").not(".inline");
// Change styles, depending on parameters set to the image
images.each(function (index) {
var image = $(this)
var o = getUrlParameter(image[0].src);
if (typeof o !== "undefined") {
var h = o["height"];
var w = o["width"];
var c = o["classes"];
image.css("width", function () {
if (typeof w !== "undefined") {
return w;
} else {
return "auto";
}
});
image.css("height", function () {
if (typeof h !== "undefined") {
return h;
} else {
return "auto";
}
});
if (typeof c !== "undefined") {
var classes = c.split(',');
for (i = 0; i < classes.length; i++) {
image.addClass(classes[i]);
}
}
}
});
Use a Markdown Render Hook.
@Mehedi and @jmooring , thank you for your replies, very helpful. I did see some solutions where the addition of HTML within the markup was suggested. I may test that.
This feature is marked as a future enhancement, see Resize images Ā· Issue #216 Ā· razonyang/hugo-theme-bootstrap Ā· GitHub
Resizing an image with markdown is now a feature in the bootstrap theme, see Resize images Ā· Issue #216 Ā· razonyang/hugo-theme-bootstrap Ā· GitHub
Have now switched to the GitHub - kakawait/hugo-tranquilpeak-theme: A gorgeous responsive theme for Hugo blog framework , and there is no provision for resizing images.
Have been reading up at Image Processing | Hugo , and I assume that is all by the use of shortcodes , rather than by directly in the MD file - Markdown Render Hooks | Hugo , which seems a lot easier.
In regards to that example at layouts/_default/_markup/render-image.html
<p class="md__image">
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
</p>
I donāt understand how the MD code uses the template to then create the static HTML ? Can someone enlighten me please. 
Also, whilst there is a file called ā¦/hugo-tranquilpeak-theme-master/layouts/shortcodes/image.html
{{ $.Scratch.Set "i-classes" (split (.Get "classes") " ") }}
{{ if in ($.Scratch.Get "i-classes") "clear" }}
{{ $.Scratch.Set "i-clear" 1 }}
{{ $classes := $.Scratch.Get "i-classes" }}
{{ $.Scratch.Set "i-classes" (slice) }}
{{ range $classes }}
{{ if ne . "clear" }}
{{ $.Scratch.Add "i-classes" . }}
{{ end }}
{{ end }}
{{ end }}
{{ if in ($.Scratch.Get "i-classes") "fancybox" }}
{{ $.Scratch.Set "i-fancybox" 1 }}
{{ $classes := $.Scratch.Get "i-classes" }}
{{ $.Scratch.Set "i-classes" (slice) }}
{{ range $classes }}
{{ if ne . "fancybox" }}
{{ $.Scratch.Add "i-classes" . }}
{{ end }}
{{ end }}
{{ end }}
<div class="figure {{ delimit ($.Scratch.Get "i-classes") " " }}" {{ with (.Get "thumbnailWidth") }}style="width:{{ . }};"{{ end }}>
{{ if eq ($.Scratch.Get "i-fancybox") 1 }}
<a class="fancybox" href="{{ .Get "src" }}"{{ with (.Get "title") }} title="{{ . }}"{{ end }} data-fancybox="{{ with (.Get "group") }}{{ . }}{{ end }}">
{{ end }}
<img class="fig-img" src="{{ with (.Get "thumbnail") }}{{ . }}{{ else }}{{ .Get "src" }}{{ end }}" {{ if or (.Get "thumbnail-width") (.Get "thumbnail-height") }}style="{{ with (.Get "thumbnail-width") }}width: {{ . }};{{ end }}{{ with (.Get "thumbnail-height") }}height: {{ . }};{{ end }}"{{ end }}{{ with (.Get "title") }} alt="{{ . }}"{{ end }}>
{{ if eq ($.Scratch.Get "i-fancybox") 1 }}
</a>
{{ end }}
{{ if and (.Get "title") (not (in ($.Scratch.Get "i-classes") "nocaption")) }}
<span class="caption">{{ .Get "title" }}</span>
{{ end }}
</div>
{{ if eq ($.Scratch.Get "i-clear") 1 }}
<div style="clear:both;"></div>
{{ end }}
it only refernces the image thumbnail height and width, which is all working just fine. It is when a post is accessed, the fully blown image is shown. I need to resize it somehow.
Have been reading a few articles about Hugo and image processing. At Image Processing in Hugo | Mert Bakır
Before, going further you must know that you canāt store your images under
/staticfolder anymore. To be able to use image processing, an image must be aresource. What is a resource? Hugo has two types of resources. One is called āPage Resourceā, page resources are stored within the pageās directory. So, you create a folder for each post and rename the post content asindex.mdand keep the images in the same folder. The second one is called āGlobal Resourceā which is stored in/assets.
Is that correct ? Just that I have the images in /static and it all works fine on a site.
Hmmm, ā¦later ā¦ it seems to be correct, as there is no mention of /static in Image processing | Hugo
Things in the āstaticā dir are copied as is to the āpublicā dir when you build the site.
Anything you want Hugo to process need to be a resource.
Thanks @frjo . Have just read through How to use Image Processing using a short code? - #16 by bwintx , and it seems there is no way to do any image processing if the images are in /static. That said , @bep is able to do it with a mount.
There is a comment at How to use Image Processing using a short code? - #9 by jmooring that this needs the extended version of Hugo. Iām not using the extended version and it seems the theme has no Hugo pipes support - Add support for Hugo pipe SCSS Ā· Issue #480 Ā· kakawait/hugo-tranquilpeak-theme Ā· GitHub
I have tried many example templates and code, all to no avail. The latest round of errors are of the type
execute of template failed at <$img.Resize>: nil pointer evaluating resource.Resource.Resize
so obviously the image canāt be found. I have tried putting the image in an /assets/images path, and also in the same path as the content, as well as the /static path. The MD code has had the image filename specified with an extension and without an extension. Considering now the time this has consumed, Iāll simply reduce the image size manually.
That is not true. You can mount static to assets in your site configuration:
[[module.mounts]]
source = 'assets'
target = 'assets'
[[module.mounts]]
source = 'static'
target = 'assets'
The extended version of Hugo is required to (a) transpile Sass to CSS with libsass, and (b) decode/encode webp images.
Markdown render hooks are powerful. Try this:
git clone --single-branch -b hugo-forum-topic-34833 https://github.com/jmooring/hugo-testing hugo-forum-topic-34833
cd hugo-forum-topic-34833
hugo server
The image render hook in this example allows you to control processing method, processing options, and much more using a query string. Some markdown examples:
It works with both remote and local images. For local images, it will look for a page resource first, and fallback to a global resource if present.
See the README file for a description of the available query string parameters.
@jmooring - Thanks very much, after I installed Hugo extended and followed your instructions, it works just fine. Added an image, and the resize works great, thanks.
I like the way you have included images from different paths. I was wondering how you did that, and then saw the
[[module.mounts]]
in config.toml. It became one of those ālight bulbā moments. There are certainly a lot of examples at Branches Ā· jmooring/hugo-testing Ā· GitHub
Thanks 
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.