파트 2: 레일즈 그라바타

이 시리즈의 이전 기사에서 Active Storage에 대해 배웠습니다. 사용자가 사용자 프로필에 아바타를 추가할 수 있도록 인터페이스를 설정했습니다.

1부: 레일스 액티브 스토리지

척 ・ 2020년 9월 22일 ・ 5분 읽기

#rails #ruby #webdev

두 부분으로 구성된 이 시리즈의 두 번째 부분에서는 Gravatar 서비스를 폴백 이미지로 사용하도록 이 기능을 확장합니다.

목표는 사용자에게 첨부된 이미지가 있는지 확인하는 것입니다. 그렇지 않은 경우 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에서 자신의 프로필에 대한 아바타 이미지를 제공하지 않은 경우 표준 이미지로 기본 설정된다는 것입니다. 따라서 본질적으로 우리의 경우 중복성을 생성합니다.

요약: 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

이 메서드는 사용자와 선택적 옵션 해시라는 두 가지 인수를 허용합니다. 이 해시는 이미지 크기를 제어하는 ​​곳이며 기본값은 32px입니다. 조건부 로직은 부착된 아바타를 확인하고 사용자가 선택한 아바타를 사용하거나 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>

이 코드를 편집하여 아바타를 확인하는 논리가 포함된 도우미를 사용할 수 있습니다. 이 DRY는 보기 파일에 포함되어 있지 않습니다.

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

따라서 사용자가 Gravatar 또는 사용자 프로필에 아바타를 설정하지 않은 경우 대체 이미지가 사용됩니다.

프로필 편집

도우미 논리를 사용하려면 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: 당신이 훌륭한 회사에서 일하고 있고 다양한 기술과 인생 경험을 가진 소프트웨어 개발자를 찾고 있다면 에 메시지를 보내고 내 .