ruby-on-railsimgkit

Img Kit to create multiple image sizes in rails


Hi I have a small app that shares a png of an image using img kit. These images are for social, so i would like to create multiple image versions for example a 1080 X 1080 version for instagram & a 1240 X 644 for LinkedIn.

The question I am asking is how do i create multiple images for the same view with imgkit

currently the images are created in the controller

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

and accessed in the view via a share bar

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

Solution

  • quote_path is a named route for show, right? If so, then add the size as a param:

    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
    

    In your view (adapt link in any case):

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