DEV Community

Konnor Rogers
Konnor Rogers

Posted on • Updated on

 

ActionText: Modify the rendering of ActiveStorage attachments

If you have not already, make sure to run both the ActiveStorage and ActionText installers respectively.

The ActiveStorage generator should create a file that looks like this:

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

<figure class="attachment attachment--<%= blob.representable? ? "preview" : "file" %> attachment--<%= blob.filename.extension %>">
  <% if blob.representable? %>
    <%= image_tag 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>
Enter fullscreen mode Exit fullscreen mode

You can modify this file however you see fit. For example, you may want to provide custom overrides onto these dimensions for things like retina rendering or other optimizations.

The reason I took the time to document this is because I noticed when I turned on file annotations for rendering partials, this is what showed up:

<!-- BEGIN /Users/konnorrogers/.asdf/installs/ruby/3.1.2/lib/ruby/gems/3.1.0/gems/actiontext-7.0.4/app/views/action_text/contents/_content.html.erb -->
Enter fullscreen mode Exit fullscreen mode

Other use cases include using something like tailwind and adjusting the produced markup!

I'll be documenting more undocumented things from ActionText as I go along and hopefully will upstream them into the official Rails guides!

Top comments (7)

Collapse
 
julianrubisch profile image
julianrubisch

As I’ve myself taken a deepish dive into ActionText attachments, I find your title a bit misleading, because it actually only deals with ActiveStorage attachments, right?

Also, where does contents/_content.html.erb come into play?

Collapse
 
konnorrogers profile image
Konnor Rogers

contents/_content.html.erb comes into play when we talk about custom attachments.

This is specific to active storage attachments. Perhaps "changing the default rendering of activestorage attachment" makes more sense?

Collapse
 
konnorrogers profile image
Konnor Rogers

Modified it to say "ActiveStorage attachments"

Collapse
 
julianrubisch profile image
julianrubisch

I know! Iβ€˜m just afraid it’s a bit confusing in this context because first you talk about _blob.html.erb, then _content.html.erb without further explanation.

Thread Thread
 
konnorrogers profile image
Konnor Rogers

I just re-read, for some reason when actiontext renders the blob, the file name annotations say the blob is being rendered from _content.html.erb and not by _blob.html.erb

Thread Thread
 
julianrubisch profile image
julianrubisch

🀯

Thread Thread
 
konnorrogers profile image
Konnor Rogers

On inspection, turns out ActionText strips HTML comments on renders.

twitter.com/RogersKonnor/status/15...

12 Rarely Used Javascript APIs You Need

Practical examples of some unique Javascript APIs that beautifully demonstrate a practical use-case.