I’m currently working in building ArtsySpace, a community of people that enjoy decorating their rooms. For my project, I’m using Rails 6 with ActionText, reach text content and editing for rails. While working on creating the section page for questions I noticed that the ActionText content attachments were shown in the size.

  <div class="h-56 my-8">
    <%= @question.content %>
  </div>

@question.content is the rich text, the content can contain images, links , text, and other rich tech content elements. In my case, users of ArtsySpace can add images to a question. For example, “What color paintings would go along with this brick wall?” and a picture of the wall may be added to the Question post.

So to style ActionText’s embedded images and other attachments (known as blobs) Rails provides a template located in app/views/active_storage/blobs/_blob.html.erb. I used TailwindCSS, to create an image card to style the _blob.html.erb partial. Here is the default template:

 <!--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>

Here is what the template looks like after adding the figcaption and image_tag to the card I created.

<figure class="attachment attachment--<%= blob.representable? ? "preview" : "file" %> attachment--<%= blob.filename.extension %>">
  <% if blob.representable? %>
      <div class="max-w-xl mx-auto rounded overflow-hidden shadow-lg">
        <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]) %>
        <div class="px-6 py-4">
          <figcaption class="attachment__caption">
            <% if caption = blob.try(:caption) %>
              <%= caption %>
            <% else %>
              <div class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">
                <span class="attachment__name"><%= blob.filename %></span>
                <span class="attachment__size"><%= number_to_human_size blob.byte_size %></span>
              </div>
            <% end %>
          </figcaption>
        </div>
      </div>
  <% end %>
</figure>

this was the outcome:

Blob template styled with TailwindCSS