Resize_image with floating images

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"

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 :slight_smile:
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.