HUGO

Resize an image with markdown

I have been using markdown in hugo-theme-relearn

![Tux, the Linux mascot](/images/tux.png?width=20pc "Photo by tux")

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]);
				}
			}
		}
	});
1 Like

Use a Markdown Render Hook.

2 Likes

@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.

1 Like

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