RailsでAstiveStorageを利用して表示している画像を丸く切り抜く方法

Question

表題の通り、railsでActiveStorageで保存している画像を丸く切り抜く方法を探しています。
用途としてはTwitterのようなユーザーのアイコンです。
いろいろ調べてimagemagickというgemで行うことができるようなのですが下記リンクのような記述をどこに書けばいいのかがわかりません。
参考サイト
また、CSSで記述しても効果がありませんでした。
方法は上記のような方法か、何か丸くする方法をご教授いただけないでしょうか。

<%= link_to image_tag(current_user.image.variant(resize: '50x50',)), "#", class:"user-icon"%>

.user-icon{
  border-radius: 50%;
}

Rails version
Rails 6.0.3.4

何卒、よろしくお願いいたします。

Comments

[m.ts10806]

ライブラリのドキュメントは確認されたのでしょうか。答えだけ求めてもおそらくやりたいことは実現できません

[suzu__]

ご意見ありがとうございます。確かに公式のドキュメントを読んでいませんでした。
英語だからと敬遠せずに読んでみようと思います。

[m.ts10806]

むしろほとんどの原作が英語由来でドキュメントも英語で書かれています。
Google翻訳でも十分な日本語にはなりますので、そこから。

Answer 1

回答依頼を頂いたので、あてずっぽうですが、回答してみます。

<%= link_to image_tag(current_user.image.variant(resize: '50x50',)), "#", class:"user-icon"%>

これだと、<a href="#" class="user-icon"><img src="...." /></a>みたいなタグが出力されるんじゃないでしょうか。

でも、おそらく、a要素じゃなくてimg要素の方に、user-iconクラスを付けたいんだと思います。そのためには、

<%= link_to image_tag(current_user.image.variant(resize: '50x50'), class:"user-icon"), "#" %>

こう書けば良さそうな気がします(未確認です)。

思ったような結果が得られない場合は、ブラウザの「開発者ツール」という機能を使って、HTMLやCSSを調査してみることをオススメします。「ブラウザ 開発者ツール」でググってみたら、紹介記事が沢山見つかると思うので、読みやすそうな記事で勉強してみてください。

Comments

[suzu__]

ご回答ありがとうございました。
頭が凝り固まってActiveStorage側の問題と決めつけてしまっていました。
おっしゃる通り、単にClassの位置の問題でした。
開発者ツール、検証ツール等参考にさせていただきます。
ありがとうございました！