Would be wonderful to have an additional argument to the resize_image shortcode “op” field where the image could be floated to the left or to the right of text, with or without clearfix.
Perhaps there is a direct way to implement this by wrapping some scss functions around the resize_image shortcode, but I’ve been unsuccessful so far. Have the float as an additional argument to the tera macro would seem efficient. For example :
resize_image(path=path, width=width, height=height, op=op)
op ( optional ): Resize operation. This can be one of:
"scale""fit_width""fit_height""fit""fill""float_right""float_left""float_right_clearfix""float_left_clearfix"
https://www.w3schools.com/Css/tryit.asp?filename=trycss_layout_clearfix2
This is a basic modification that is more or less a hack at this point, but does get my images floating to the right:
<img src="{{path}}" style="float:right;margin:0 5px 0 0;width:{{width}}px;height:{{height}}px;margin-left:{{margin}}px;" />
This is put into a shortcode, called “resize_image_right” and the main feature that it is missing at the moment is the the clearfix functionality.
You can indeed implement your own shortcodes. But I think what you suggest is too specific to be included in Zola.
Yes, I agree that the feature is too specific to Zola.
I have extended the shortcode as shown below to give more flexibility. This allows for placing to the left or to the right. Overall, I see the value of shortcodes now after this implementation.
{% if position == "left"%}
<img src="{{path}}" style="float:left;margin:10px 10px 10px 10px;width:{{width}}px;height:{{height}}px;margin-right:{{margin}}px;" />
{% endif %}
{% if position == "right"%}
<img src="{{path}}" style="float:right;margin:0 5px 0 25px;width:{{width}}px;height:{{height}}px;margin-left:{{margin}}px;" />
{% endif %}
Nice work 
It makes me think that there should be a way to share shortcodes without putting them inside a theme.
Doing so would allow to take inspiration from other people’s shortcodes.
2 Likes