# Resize\_image with floating images

**URL:** https://zola.discourse.group/t/resize-image-with-floating-images/300
**Category:** Feature requests
**Created:** [January 3, 2020, 7:09pm UTC](https://zola.discourse.group/t/resize-image-with-floating-images/300 "2020-01-03T19:09:51Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![saturn77](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/saturn77/32/142_2.png) [@saturn77](https://zola.discourse.group/u/saturn77)
#### Post date: [January 3, 2020, 7:09pm UTC](https://zola.discourse.group/t/resize-image-with-floating-images/300/1 "2020-01-03T19:09:51Z")

</div>

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](https://www.w3schools.com/Css/tryit.asp?filename=trycss_layout_clearfix2)

---

<div class="post-metadata">

### Author: ![saturn77](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/saturn77/32/142_2.png) [@saturn77](https://zola.discourse.group/u/saturn77)
#### Post date: [January 3, 2020, 10:43pm UTC](https://zola.discourse.group/t/resize-image-with-floating-images/300/2 "2020-01-03T22:43:13Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![HugoTrentesaux](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/hugotrentesaux/32/105_2.png) [@HugoTrentesaux](https://zola.discourse.group/u/HugoTrentesaux)
#### Post date: [January 7, 2020, 6:48pm UTC](https://zola.discourse.group/t/resize-image-with-floating-images/300/3 "2020-01-07T18:48:13Z")

</div>

You can indeed implement your own shortcodes. But I think what you suggest is too specific to be included in Zola.

---

<div class="post-metadata">

### Author: ![saturn77](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/saturn77/32/142_2.png) [@saturn77](https://zola.discourse.group/u/saturn77)
#### Post date: [January 9, 2020, 4:28am UTC](https://zola.discourse.group/t/resize-image-with-floating-images/300/4 "2020-01-09T04:28:01Z")

</div>

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.

```auto
 {% 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 %}

```

---

<div class="post-metadata">

### Author: ![HugoTrentesaux](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/hugotrentesaux/32/105_2.png) [@HugoTrentesaux](https://zola.discourse.group/u/HugoTrentesaux)
#### Post date: [January 9, 2020, 11:15am UTC](https://zola.discourse.group/t/resize-image-with-floating-images/300/5 "2020-01-09T11:15:08Z")

</div>

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.