Img Kit для создания изображений разного размера в рельсах - PullRequest
Новая
       32

Img Kit для создания изображений разного размера в рельсах

3 голосов
/ 24 апреля 2019

Привет У меня есть небольшое приложение, которое делит png изображения с помощью img kit. Эти изображения предназначены для социальных сетей, поэтому я хотел бы создать несколько версий изображений, например, 1080 X 1080 для Instagram и 1240 X 644 для LinkedIn.

Я задаю вопрос: как создать несколько изображений для одного и того же вида с помощью imgkit

В настоящее время изображения создаются в контроллере 

def show
    respond_to do |format|
      format .html
      format.png do
        kit = IMGKit.new render_to_string, width: 1080, height: 1080
        send_data kit.to_png, type: "image/png", disposition: "inline"
      end
    end
  end

и доступны в представлении через панель обмена 

<div class="row d-flex justify-content-center mb-1 mr-lg-5 ml-lg-5 pr-lg-5 pl-lg-5">
  <div class="col d-flex justify-content-center align-items-center pt-3 border-dark border-top border-left border-bottom">
    <p class="text-justify text-center">SHARE:</p>
  </div>
  <div class="col facebookshare d-flex justify-content-center align-items-center p-0 m-0 border-dark border-top border-bottom">
    <%= link_to "https://www.pinterest.com/pin/create/button/" do %>
      <i class="fab fa-facebook-f fa-2x d-none d-sm-block"></i>
      <i class="fab fa-facebook-f d-sm-none d-md-none d-lg-none d-xl-none"></i>
    <% end %>
  </div>
  <div class="col instashare d-flex justify-content-center align-items-center p-0 m-0 border-dark border-top border-bottom">
    <%= link_to "https://www.pinterest.com/pin/create/button/" do %>
      <i class="fab fa-instagram fa-2x d-none d-sm-block"></i>
      <i class="fab fa-instagram d-sm-none d-md-none d-lg-none d-xl-none"></i>
    <% end %>
  </div>
  <div class="col twittershare d-flex justify-content-center align-items-center p-0 m-0 border-dark border-top border-bottom">
    <%= link_to "https://twitter.com/share?ref_src=twsrc%5Etfw" do %>
      <i class="fab fa-twitter fa-2x d-none d-sm-block"></i>
      <i class="fab fa-twitter d-sm-none d-md-none d-lg-none d-xl-none"></i>
    <% end %>
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  </div>
  <div class="col pinteresrshare d-flex justify-content-center align-items-center p-0 m-0 border-dark border-top border-bottom">
    <%= link_to("https://www.pinterest.com/pin/create/button/") do %>
      <i class="fab fa-pinterest-p fa-2x d-none d-sm-block"></i>
      <i class="fab fa-pinterest d-sm-none d-md-none d-lg-none d-xl-none"></i>
    <% end %>
    <script async defer src="//assets.pinterest.com/js/pinit.js"></script>
  </div>
  <div class="col tumblrshare d-flex justify-content-center align-items-center p-0 m-0 border-dark border-top border-bottom">
    <%= link_to("http://tumblr.com/widgets/share/tool?canonicalUrl=\#{quote_url(@quote)}", data: {
        content: quote_url(@quote, format: 'png'),
        caption: @quote.quote,
        url: quote_url(@quote) })do %>
    <i class="fab fa-tumblr fa-2x d-none d-sm-block"></i>
    <i class="fab fa-tumblr d-sm-none d-md-none d-lg-none d-xl-none"></i>
    <% end %>
    <script id="tumblr-js" async src="https://assets.tumblr.com/share-button.js"></script>
  </div>
  <div class="col buffershare d-flex justify-content-center align-items-center p-0 m-0 border-dark border-top border-bottom">
    <%= link_to("http://bufferapp.com/add", data: {
        picture: quote_path(@quote, format: 'png'),
        text: "this is the tweet text",
        url: quote_path(@quote),
        via: "@motiv8kit"}) do %>
    <i class="fab fa-buffer fa-2x d-none d-sm-block"></i>
    <i class="fab fa-buffer d-sm-none d-md-none d-lg-none d-xl-none"></i>
    <% end %>
    <script type="text/javascript" src="https://static.buffer.com/js/button.js"></script>
  </div>
  <div class="col dload d-flex justify-content-center align-items-center p-0 m-0 border-dark border-top border-bottom border-right">
    <%= link_to quote_path(@quote, format: "png"), download: "" do %>
      <i class="fas fa-download fa-2x d-none d-sm-block"></i>
      <i class="fas fa-download d-sm-none d-md-none d-lg-none d-xl-none"></i>
    <% end %>
  </div>
</div>

1 Ответ

2 голосов
/ 24 апреля 2019

quote_path это именованный маршрут для show, верно?Если это так, то добавьте размер в качестве параметра: 

class MyClass
  SIZES = {'linkedin' => [1240, 644], 'instagram' => [1080, 1080]}

  def show    
    respond_to do |format|
      format .html
      format.png do
        w, h = SIZES[params[:s]] # Remember to check presence of :s
                                 # and set default values
        kit = IMGKit.new render_to_string, width: w, height: h
        send_data kit.to_png, type: "image/png", disposition: "inline"
      end
    end
  end
end

На ваш взгляд (в любом случае используйте ссылку): 

<%= link_to quote_path(@quote, format: "png", s: 'linkeding') do %>
<% end %>
<%= link_to quote_path(@quote, format: "png", s: 'instagram') do %>
<% end %>
...