Webuilder240

Railsのimage_tagで画像のオリジナルの幅と高さを設定して表示するヘルパーメソッドを書いた

2020-07-03 00:21:51 +0900

CSS Rails Ruby
どうしてほしかったかというとこの記事を見たから。
https://parashuto.com/rriver/development/img-size-attributes-are-back

新しいバージョンのブラウザ（主にFirefoxやChrome、Safariはプレビュー中らしい。）では画像に対してwidthとheightを設定しておくことでコンテンツのがたつきを防ぐことが可能になる。このあたりの仕様については、URLの記事に任せるとして、Railsで画像をRenderするときに使うimage_tagで、オリジナル画像のwidthとheightが設定されるヘルパーメソッドが実装されていれば便利だな、と思ってサクッと作った。

利用したGemはOGPと同じく、FastImage。
https://github.com/sdsykes/fastimage

というか方法についてもAMP対応の時と全く同じで以下のような感じ。
image_tagのメソッドにFastImageでサイズを取得して、widthとheightを追加したものである。
下記のコードをconfig/initializers/add_extention_action_view_helper.rb に追加した。
module ActionView
  module Helpers #:nodoc:
    module AssetTagHelper
      def image_tag_with_original_size(source, options = {})
        options = options.symbolize_keys
        check_for_image_tag_errors(options)
        skip_pipeline = options.delete(:skip_pipeline)

        options[:src] = resolve_image_source(source, skip_pipeline)

        if options[:srcset] && !options[:srcset].is_a?(String)
          options[:srcset] = options[:srcset].map do |src_path, size|
            src_path = path_to_image(src_path, skip_pipeline: skip_pipeline)
            "#{src_path} #{size}"
          end.join(", ")
        end
        options[:width], options[:height] = extract_dimensions(options.delete(:size)) if options[:size]
        if !options[:width].present? && !options[:height].present?
          options[:width], options[:height] = FastImage.size("#{request.protocol + request.host_with_port}/#{options[:src]}")
        end
        tag("img", options)
      end
    end
  end
end
FastImage.sizeメソッドで、引数がローカル参照の場合にうまくいかないケースがあるみたいで、フルのURLを入れるようにした。
これで <%= image_tag_with_original_size('hoge.png') %> と呼び出すことでオリジナルサイズのwidthとheightが設定されてimgタグが描画されているのがわかるかと思います。

image_tag以外の対応について

ユーザのコンテンツなど、Railsのimage_tagをコールしない場合のimgタグの場合は、AMP記事の対応と同じようにすればいい。Nokoigiriでパースして同じようにFastImageでサイズを取得して、設定してやればOKだと思う。

https://webuilder240.com/blogs/809c261f-c07b-4eec-9dd0-1ebc1d4de73d

雑感

  • Railsのコアにもオプションの項目として入っていてもいい機能だなとは思いました。
  • 実はすでにもうRailsに会ったりGemとしてなかったりはないですかね？もしあれば教えてください。

関連しそうなブログ