# Can ActionText show gifs?

**URL:** <https://discuss.rubyonrails.org/t/can-actiontext-show-gifs/79525>\
**Category:** rubyonrails-talk\
**Tags:** actiontext\
**Created:** [December 16, 2021, 1:23pm UTC](https://discuss.rubyonrails.org/t/can-actiontext-show-gifs/79525 "2021-12-16T13:23:53Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Confused\_Vorlon](https://sea2.discourse-cdn.com/rubyonrails/user_avatar/discuss.rubyonrails.org/confused_vorlon/32/1256_2.png) [@Confused\_Vorlon](https://discuss.rubyonrails.org/u/Confused_Vorlon)\
**Post date:** [December 16, 2021, 1:23pm UTC](https://discuss.rubyonrails.org/t/can-actiontext-show-gifs/79525/1 "2021-12-16T13:23:53Z")

</div>

Action text merrily accepts a gif upload through the trix editor. However when it is actually displayed - it seems to show a variant which has been ‘flattened’ to show only the first frame of the gif.

Is there a way to either show the original gif, or to tweak things so that the variants are not flattened?

thanks

---

<div class="post-metadata">

**Author:** ![lmansur](https://avatars.discourse-cdn.com/v4/letter/l/74df32/32.png) [@lmansur](https://discuss.rubyonrails.org/u/lmansur)\
**Post date:** [December 16, 2021, 9:59pm UTC](https://discuss.rubyonrails.org/t/can-actiontext-show-gifs/79525/2 "2021-12-16T21:59:45Z")

</div>

There are a couple of issues.

First of all, ActiveStorage [hardcodes](https://github.com/rails/rails/blob/8f5b35b6107c28125b571b9842e248b13f804e5c/activestorage/lib/active_storage/transformers/image_processing_transformer.rb#L19) the image’s first frame when doing a transformation, which breaks animated GIFs. You can solve this by setting the page to `nil` alongside your other transformations. If you are resizing the GIF, for example:

```ruby
blob.variant(loader: { page: nil }, resize_to_limit: [nil, 560])

```

This solves the animation problem, but you’ll still run into weird layering issues if you’re working with optimized GIFs. You’ll need to remove these optimizations before calling `resize` (or `resize_to_limit`) when creating the variant. Putting everything together:

```ruby
blob.variant(loader: { page: nil }, coalesce: true, resize_to_limit: [nil, 560])

```

---

<div class="post-metadata">

**Author:** ![Confused\_Vorlon](https://sea2.discourse-cdn.com/rubyonrails/user_avatar/discuss.rubyonrails.org/confused_vorlon/32/1256_2.png) [@Confused\_Vorlon](https://discuss.rubyonrails.org/u/Confused_Vorlon)\
**Post date:** [December 16, 2021, 11:22pm UTC](https://discuss.rubyonrails.org/t/can-actiontext-show-gifs/79525/3 "2021-12-16T23:22:52Z")

</div>

Hi @Imansur,

thanks for your response. I can see how this would help if I was taking a gif and transforming it myself - however in this case, the gif is an attachment in ActionText.

the full code isn’t much more than

`has_rich_text :description`

in my model and a form field to accept it.

Can I ‘tell’ ActionText how it should handle gif attachments?

---

<div class="post-metadata">

**Author:** ![lmansur](https://avatars.discourse-cdn.com/v4/letter/l/74df32/32.png) [@lmansur](https://discuss.rubyonrails.org/u/lmansur)\
**Post date:** [December 17, 2021, 1:48pm UTC](https://discuss.rubyonrails.org/t/can-actiontext-show-gifs/79525/4 "2021-12-17T13:48:38Z")

</div>

ActionText is deeply integrated with ActiveStorage. When you attach something to your editor, you’re using AS behind the scenes, including how it renders attachments by default.

You should have a partial in `app/views/active_storage/blobs/_blob.html.erb` that calls `blob.representation(...)`—this is where it applies the transformations for the attachment.

---

<div class="post-metadata">

**Author:** ![Confused\_Vorlon](https://sea2.discourse-cdn.com/rubyonrails/user_avatar/discuss.rubyonrails.org/confused_vorlon/32/1256_2.png) [@Confused\_Vorlon](https://discuss.rubyonrails.org/u/Confused_Vorlon)\
**Post date:** [December 17, 2021, 2:10pm UTC](https://discuss.rubyonrails.org/t/can-actiontext-show-gifs/79525/5 "2021-12-17T14:10:21Z")

</div>

> [@Confused\_Vorlon](#):
>
> Hi @Imansur,

Thank you - I was aware that ActionText uses ActiveStorage, but wasn’t aware of how that view handles the transformation.

For anyone coming to this later, the simple change below works for me:

Is there any case where this change would cause problems? Some representable class where setting loader/coalesce might break things?

thanks again 🙂

`#app/views/active_storage/blobs/_blob.html.erb`

previously:

```ruby

<figure class="attachment attachment--<%= blob.representable? ? "preview" : "file" %> attachment--<%= blob.filename.extension %>">
  <% if blob.representable? %>
    <%= image_tag url_for(blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [800, 600] : [1024, 768])) %>
  <% end %>

  <figcaption class="attachment__caption">
    <% if caption = blob.try(:caption) %>
      <%= caption %>
    <% else %>
      <span class="attachment__name"><%= blob.filename %></span>
      <span class="attachment__size"><%= number_to_human_size blob.byte_size %></span>
    <% end %>
  </figcaption>
</figure>

```

now:

```ruby
<figure class="attachment attachment--<%= blob.representable? ? "preview" : "file" %> attachment--<%= blob.filename.extension %>">
  <% if blob.representable? %>
    <%= image_tag url_for(blob.representation(loader: { page: nil }, coalesce: true, resize_to_limit: local_assigns[:in_gallery] ? [800, 600] : [1024, 768])) %>
  <% end %>

  <figcaption class="attachment__caption">
    <% if caption = blob.try(:caption) %>
      <%= caption %>
    <% else %>
      <span class="attachment__name"><%= blob.filename %></span>
      <span class="attachment__size"><%= number_to_human_size blob.byte_size %></span>
    <% end %>
  </figcaption>
</figure>

```

---

<div class="post-metadata">

**Author:** ![lmansur](https://avatars.discourse-cdn.com/v4/letter/l/74df32/32.png) [@lmansur](https://discuss.rubyonrails.org/u/lmansur)\
**Post date:** [December 17, 2021, 2:30pm UTC](https://discuss.rubyonrails.org/t/can-actiontext-show-gifs/79525/6 "2021-12-17T14:30:59Z")

</div>

> [@Confused\_Vorlon](#):
>
> Is there any case where this change would cause problems? Some representable class where setting loader/coalesce might break things?

I’m not sure, but my advice would be to only apply these transformations on GIF attachments. You can check `blob.content_type == Mime[:gif].to_s`

---

<div class="post-metadata">

**Author:** ![Confused\_Vorlon](https://sea2.discourse-cdn.com/rubyonrails/user_avatar/discuss.rubyonrails.org/confused_vorlon/32/1256_2.png) [@Confused\_Vorlon](https://discuss.rubyonrails.org/u/Confused_Vorlon)\
**Post date:** [June 13, 2022, 9:58pm UTC](https://discuss.rubyonrails.org/t/can-actiontext-show-gifs/79525/7 "2022-06-13T21:58:17Z")

</div>

Update: Since switching to VIPS, this is broken for me. I get the error `Vips::Error: VipsOperation: class "coalesce" not found`

---

<div class="post-metadata">

**Author:** ![William\_Herry](https://sea2.discourse-cdn.com/rubyonrails/user_avatar/discuss.rubyonrails.org/william_herry/32/5211_2.png) [@William\_Herry](https://discuss.rubyonrails.org/u/William_Herry)\
**Post date:** [November 10, 2022, 2:26am UTC](https://discuss.rubyonrails.org/t/can-actiontext-show-gifs/79525/8 "2022-11-10T02:26:05Z")

</div>

have you find any solution for this issue?

---

<div class="post-metadata">

**Author:** ![Confused\_Vorlon](https://sea2.discourse-cdn.com/rubyonrails/user_avatar/discuss.rubyonrails.org/confused_vorlon/32/1256_2.png) [@Confused\_Vorlon](https://discuss.rubyonrails.org/u/Confused_Vorlon)\
**Post date:** [November 10, 2022, 11:54am UTC](https://discuss.rubyonrails.org/t/can-actiontext-show-gifs/79525/9 "2022-11-10T11:54:52Z")

</div>

I’m just sticking with rmagick for now

---

<div class="post-metadata">

**Author:** ![Sean](https://sea2.discourse-cdn.com/rubyonrails/user_avatar/discuss.rubyonrails.org/sean/32/9114_2.png) [@Sean](https://discuss.rubyonrails.org/u/Sean)\
**Post date:** [January 25, 2023, 12:44am UTC](https://discuss.rubyonrails.org/t/can-actiontext-show-gifs/79525/10 "2023-01-25T00:44:28Z")

</div>

For VIPS use:

```ruby
blob.variant(loader: { n: -1 }, resize_to_limit: [nil, 560])

```

with `loader: { n: -1 }` being the important bit that corresponds to the arguments passed to [vips\_gifload](https://www.libvips.org/API/current/VipsForeignSave.html#vips-gifload).