パート2:レールグラヴァーター

前回の記事では、アクティブストレージについて学びました.ユーザーがユーザープロファイルにアバターを追加できるインターフェイスを設定します.

パート1：レールアクティブストレージ

チャック・ 9月22日・ 5分読む

#rails #ruby #webdev

この2つの部分シリーズのパート2、我々はフォールバック画像、グラブサービスとして使用するには、この機能を拡張します.
目標は、ユーザーが添付イメージを持っているかどうかを確認することです.彼らがそうしないならば、Gravatarサービスからイメージに戻ってください.Gravatarウェブサイトによると

Your Gravatar is an image that follows you from site to site appearing beside your name when you do things like comment or post on a blog

興味深いことは、ユーザーがgravatarで自分のプロファイルのアバターイメージを提供していない場合は、標準のイメージにデフォルトであることです.それで、本質的にそれは我々のケースで冗長性をつくります.
TLあなたがcodeにまっすぐにジャンプしたいならば、完成した倉庫.

ヘルパーメソッド

そこで、私たちがapp/helpers/application_helpers.rbに見つけるヘルパーを作成する必要があります.

def avatar_url_for(user, opts = {})
    size = opts[:size || 32]

    if user.avatar.attached?
      user.avatar.variant(
        resize: "#{size}x#{size}!"
      )
    else
      hash = Digest::MD5.hexdigest(user.email.downcase)
      "https://secure.gravatar.com/avatar/#{hash}.png?s=#{size}"
    end
 end

このメソッドは、ユーザーとオプションのオプションハッシュの2つの引数を受け取ります.このハッシュは、画像サイズを制御する場所です.条件付きロジックは、アタッチされたアバターをチェックし、ユーザーが選択したアバターを使用したり、Gravatarに戻り、オプションの配列に基づいて変更します.

ネーブル

前の記事では、ユーザーのアバターを確認しました.

<li class="nav-item">
    <%= link_to user_path(current_user.username), class: "nav-link" do %>
      <% if current_user.avatar.nil? %>
        <%= image_tag current_user.avatar.variant(resize: "24x24!"), class: "mr-1" %>
      <% end %>
      <%= current_user.username %>
    <% end %>
</li>

アバターをチェックするロジックが含まれているヘルパーを使用するには、このコードを編集できます.このドライアウトは私たちのビューファイルです.

<li class="nav-item">
    <%= link_to user_path(current_user.username), class: "nav-link" do %>
      <%= image_tag avatar_url_for(current_user, size: 24), class: "rounded-circle mr-1" %>
      <%= current_user.username %>
    <% end %>
</li>

したがって、ユーザーがグラビアまたはそのユーザープロファイルにアバターを設定していない場合、フォールバックイメージが使用されます.

エディット

ヘルパーロジックを使用するにはedit.html.erbファイルを更新する必要があります.このファイルの完全なsourceを見てみましょう.

<div class="row">
    <div class="col-sm-2">
      <%= image_tag avatar_url_for(current_user, size: 128), class: "rounded-circle m-4" %>
    </div>
    <div class="col-sm-10">
      <div class="form-group">
        <%= f.label :avatar %>
        <%= f.file_field :avatar %>
      </div>
    </div>
  </div>

プロフィール

最後に、ヘルパーロジックを使用するためにedit.html.erbファイルを更新する必要があります.

<div class="d-flex align-items-center justify-content-center mt-5">
  <div class="media mr-5 align-self-start">
    <%= image_tag avatar_url_for(current_user, size: 128), class: "rounded-circle mr-4" %>
  </div>
  <div class="media">
    <div class="media-body">
      <div class="d-flex flex-row align-items-center justify-content-between">
        <h1><%= @user.username %></h1>
        <%= link_to "Edit", edit_user_registration_path, class: "ml-3 btn btn-secondary btn-sm" if current_user.id == @user.id %>

      </div>
    </div>
  </div>
</div>

脚注

これは楽しかったです.私はあなたがこの短い記事シリーズを楽しんだことを望みます、そして、それは何らかの方法で役に立ちました.コメントを残すか、私にDMを送ってください.
Shameless Plug :あなたが素晴らしい会社で働いていて、あなたが様々な技術セットと人生経験でソフトウェア開発者のために市場にいるならば、私にメッセージを送って、私のチェックアウトをしてください.