Handling images (size, aligning,...)

support
1

Hello,

moving to Hugo the posts in the site I need to convert have images, so there is need to properly handle them, iow. have ability for different aligning (left/right/center), resizing them, taking care about responsiveness etc.

I’m using ‘beg’ theme along with Asciidoc(tor) markup and wonder if there is some contributed shortcode to handle it since I’m not sure whether one is supposed to handled everything by using ‘figure’ shortcode and appropriate CSS class(es) along with it?

1 Like
2

This is not specific to any particular theme, but handy for the floating that you’re after:

You can use a bit of an undocumented cheat in your markdown image code to float images left or right:

![](/image.png#floatleft) to float left.
Or if you use figure shortcode: {{% figure src="/image.png#floatleft" caption="blah blah" %}}

![](/image.png#floatright) to float right.
Or if you use figure shortcode: {{% figure src="/image.png#floatright" caption="blah blah" %}}

And then handle in your CSS as follows:

img[src$='#floatleft']
{
	float:left;
        //etc. etc/
}

img[src$='#floatright']
{
	float:right;
       //etc. etc.
}
8 Likes
3

Whoops! –just noticed you said you’re using ASCIIdoc, not Markdown. So this is probably no use to you.

I’ll leave it here anyway, as it might be a handy tip for other folks.

3 Likes
4

whoa, neat hack!

5

The figure shortcode accepts a class parameter. (Source)

In the Icarus theme I am using, i spotted an alignright class which floats the target. So {{<figure class="alignright" ... will float the image left or right for you.

6

I stumbled upon this thread when googling for letting figures in hugo float in the text.
The solution that worked for my purpose, letting some pictures float left or right of the text with a width of 30% of the content was using the class attribute of figure and adding following 2 css statements to the template:

figure.floatright {
	max-width: 30%;
	width: auto\9*0.3; /* ie8 */
	height: auto;
	float: right;
}

figure.floatleft {
	max-width: 30%;
	width: auto\9*0.3; /* ie8 */
	height: auto;
	float: left;
}
3 Likes