帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签:rails  整合  img  Projects  proj  INT  GEM  
A Rails gem for easy imgix integration into Rails projects

  • 源代码名称:imgix-rails
  • 源代码网址:http://www.github.com/imgix/imgix-rails
  • imgix-rails源代码文档
  • imgix-rails源代码下载
  • Git URL:
    git://www.github.com/imgix/imgix-rails.git
  • Git Clone代码到本地:
    git clone http://www.github.com/imgix/imgix-rails
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/imgix/imgix-rails
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
  • imgix logo

    imgix Build Status

    imgix-rails 是一个 gem,旨在使imgix应用程序更容易集成到你的Rails 应用程序中。 它构建在 imgix,提供一些rails特定接口。

    imgix是实时图像处理服务和 CDN。 它允许你仅仅通过改变它们的URL参数来操作图像。 有关URL参数的完整列表,请参见 imgix URL API文档。

    我们建议使用诸如 Paperclip再归档。Carrierwave插件或者s3_direct_upload插件之类的东西来处理上传。 在上传之后,你可以使用这个 gem 服务它们。

    安装

    将此行添加到你的应用程序的Gemfile中:

    gem 'imgix-rails'

    然后执行:

     
    $ bundle
    
    
    
     

    用法

    imgix rails提供了几个不同的钩子来处理现有的Rails 应用程序。 所有当前方法都在 image_tag helper的替换中丢失。

    配置

    开始之前,你需要在 config/application.rb 中定义你的imgix配置,或者在特定的配置文件中定义你的配置。

    Rails.application.configure do config.imgix = {
     source:"Name of your source, e.g. assets.imgix.net" }end

    将遵循以下配置标志:

    • :use_https 切换HTTPS的使用。 默认为 true
    • :source 一个字符串或者 array,指定imgix源地址。 应该是 "assets.imgix.net"的形式。
    • :secure_url_token 在你的仪表板( https://webapp.imgix.com ) 中找到的可选安全URL令牌用于签名请求
    • :hostnames_to_replace 要替换为 :source 指定的值的主机名的array。 如果在数据库中存储完全限定的S3 url,但希望通过imgix服务图像,这很有用。

    ix_image_tag

    通过使用 ix_image_tag 方法将参数传递到 imgix,可以通过自动生成基于所传递参数的srcset 来简化对 Rails 应用的响应,从而简化了对应用的响应。 我们在以下博客文章中讨论如何在应用程序中使用 srcset 属性: "带 srcset 和imgix的响应图像。"

    ix_image_tag 生成带有填充 srcset 属性的<img> 标记,该属性依靠imgix来完成硬工作。 如果你已经知道这里图像需要显示的最小物理像素数,可以传递 min_width 和/或者 max_width 选项。 这将导致一个更小,更定制的srcset

    <%= ix_image_tag('/unsplash/hotairballoon.jpg', { w:300, h:500, fit:'crop', crop:'right', alt:'A hot air balloon on a sunny day' }) %>

    将呈现如下所示的HTML:

    <imgalt="A hot air balloon on a sunny day"sizes="100vw"srcset=" https://assets.imgix.net/unsplash/hotairballoon.jpg?w=100&amp;h=167&amp;fit=crop&amp;crop=right 100w, https://assets.imgix.net/unsplash/hotairballoon.jpg?w=200&amp;h=333&amp;fit=crop&amp;crop=right 200w,. . . https://assets.imgix.net/unsplash/hotairballoon.jpg?w=2560&amp;h=4267&amp;fit=crop&amp;crop=right 2560w"src="https://assets.imgix.net/unsplash/hotairballoon.jpg?w=300&amp;h=500&amp;fit=crop&amp;crop=right">

    建议在你的应用程序中利用这里功能生成强大的助手,如下所示:

    defprofile_image_tag(user)
     ix_image_tag(user.profile_image_url, { w:100, h:200, fit:'crop' })end

    然后在应用程序中呈现 portrait 非常简单:

    <%= profile_image_tag(@user) %>

    如果你已经知道需要图像的所有确切宽度,那么可以通过将 widths 选项作为 array 来指定来指定。 在这种情况下,imgix rails将只为指定的widths 生成 srcset 对。

    <%= ix_image_tag('/unsplash/hotairballoon.jpg', { widths: [320, 640, 960, 1280] w:300, h:500, fit:'crop', crop:'right', alt:'A hot air balloon on a sunny day' }) %>

    ix_picture_tag

    ix_picture_tag 方法使得在你的应用程序中生成 picture 元素变得简单。 当图片需要不同屏幕大小的艺术时,picture 元素是很有用的。

    ix_picture_tag 接受四个参数:

    • source: 要显示的图像的路径或者 URL。
    • picture_tag_options: 适用于父 picture 元素的任何选项。 这对于添加类名等等非常有用。
    • imgix_default_options: 默认的imgix选项。这些选项用于为旧浏览器生成回退标记,并在每个中使用,除非被 breakpoints 所覆盖。
    • breakpoints: 描述变量的哈希。 每个键必须是一个媒体查询( 比如。 (max-width: 880px) ),并且每个值必须是该媒体查询的参数重写的哈希值。 将为指定的每个断点生成一个 source 元素。
    <%= ix_picture_tag('bertandernie.jpg',picture_tag_options: {class:'a-picture-tag' },imgix_default_options: {w:300,h:300,fit:'crop', },breakpoints: {'(max-width: 640px)' => {h:100,sizes:'calc(100vw - 20px)' },'(max-width: 880px)' => {crop:'right',sizes:'calc(100vw - 20px - 50%)' },'(min-width: 881px)' => {crop:'left',sizes:'430px' } }) %>

    ix_image_url

    ix_image_url helper 使你可以轻松地在 Rails 应用程序中生成一个图像的URL。

    <%= ix_image_url('/users/1/avatar.png', { w:400, h:300 }) %>

    将生成以下 URL:

    https://assets.imgix.net/users/1/avatar.png?w=400&h=300

    由于 ix_image_url 是 inside UrlHelper,所以它还可以很容易地用于视图之外的其他地方。 这对于在序列化程序类中包括imgix输出中的url很有用。

    includeImgix::Rails::UrlHelperputs ix_image_url('/users/1/avatar.png', { w:400, h:300 })# => https://assets.imgix.net/users/1/avatar.png?w=400&h=300

    在链轮中的使用

    ix_image_url 也被拉入一个链轮 helper,因此你可以在你的资产pipline文件中生成 imgix url。 例如这里是 inside .scss.erb file:的工作方式

    .something {
     background-image: url(<%=ix_image_url('a-background.png', {w: 400, h: 300}) %>);
    }

    主机名删除

    你还可以配置 imgix-rails以忽略给定的主机名,并且只使用给定url中的路径组件。 如果你已经配置了 ,或者配置了 AmazonS3 imgix源,但在数据库中存储了这些资源的完全限定 url,那么这很有用。

    例如假设你正在使用S3进行存储。 在应用程序中,#avatar_url 值可能如下所示:

    @user.avatar_url #=>"https://s3.amazonaws.com/my-bucket/users/1.png"

    然后,在 Rails 应用程序中配置imgix以忽略 's3.amazonaws.com' 主机名:

    Rails.application.configure do config.imgix = {
     source:"my-imgix-source.imgix.net",
     hostname_to_replace:"s3.amazonaws.com" }end

    现在当你调用 ix_image_tag 或者其他 helper 时,你会得到一个 imgix URL:

    <%= ix_image_tag(@user.avatar_url) %>

    呈现:

    <imgsrc="https://my-imgix-source.imgix.net/my-bucket/users/1.png"/>

    使用图像上传库

    由于 imgix rails只需要URL和可选参数作为参数,所以它与图像上传库很好。 处理这种交互的一个好方法是创建在你的选择库和 imgix-rails之间桥接的帮助器。 below 是如何使用一些公共库的示例。 如果你想查看其他示例的具体示例,请提交问题 !

    Paperclip 和 CarrierWave

    Paperclip 和CarrierWave可以直接提供上传图像的路径,因这里我们可以在没有桥的imgix轨道上使用。

    <%= ix_image_tag(@user.avatar.path, { auto: 'format', fit: 'crop', w: 500}) %>

    重新归档

    由于归档实际上并不在数据库( 使用一个"前缀"+ 图像标识符) 中存储url或者路径,所以基本设置略有不同。 在这种情况下,我们使用一对帮助器在重新归档和 imgix-rails之间桥接。

    moduleImgixRefileHelperdefix_refile_image_url(obj, key, **opts)
     path = s3_path(obj, key)
     path ? ix_image_url(path, opts) : ''enddefix_refile_image_tag(obj, key, **opts)
     path = s3_path(obj, key)
     path ? ix_image_tag(path, opts) : ''endprivatedefs3_path(obj, key)
     refile_id = obj["#{key}_id"]
     s3_prefix = obj.send(key).try(:backend).instance_variable_get(:@prefix)
     s3_prefix ?"#{s3_prefix}/#{refile_id}" : nilendend
    <%= ix_refile_image_tag(@blog_post, :hero_photo, {auto: 'format', fit: 'crop', w: 500}) %>

    插件开发

    在签出 repo 之后,运行 bin/setup 安装依赖项。 然后,运行 bin/console 以获得允许你进行实验的交互式提示。

    若要将这里 gem 安装到本地计算机上,请运行 bundle exec rake install 要发布新版本,请更新 version.rb 中的版本号,然后运行 bundle exec rake release 要创建版本的git标记,请推入git和标签,并将 .gem 文件推到 rubygems.org



    文章标签:INT  proj  rails  整合  Projects  GEM  img  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语