scrivito_picture_widget 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 5e4c06410b8aadb0b8c468bfc0432bdf14ca36fd
+  data.tar.gz: 987967e70e8bbd2c202996dca0b016bf7e6f51ac
+SHA512:
+  metadata.gz: 2b888962d5770f97312f314c4c59870c815544bf6e391aa5c1a63c473fc31e5195505c9e82552cadebcc0606bde1d2dcb8bfc15d368f3b82111a2eb3ba14d3cf
+  data.tar.gz: e6a43c86046fee3f92964627fddc7a47549a39b08143abcf0fdb8ada9e0bd27c2708fdab89e079c2c39c83e27454bb2c50c8672dc1c3fe0d2f5f24b2d5e7dcce

data/LICENSE

@@ -0,0 +1,4 @@
+Copyright (c) 2009 - 2016 Infopark AG (http://www.infopark.com)
+
+This software can be used and modified under the LGPL-3.0. Please refer to
+http://www.gnu.org/licenses/lgpl-3.0.html for the license text.

data/Rakefile

@@ -0,0 +1,35 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'ScrivitoPictureWidget'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+
+
+load 'rails/tasks/statistics.rake'
+
+
+
+require 'bundler/gem_tasks'
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task default: :test

data/app/assets/stylesheets/picture_widget.scss

@@ -0,0 +1,3 @@
+/*
+ *= require_tree ./scrivito_picture_widget
+ */

data/app/assets/stylesheets/scrivito_picture_widget/application.scss

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/app/helpers/scrivito_picture_widget_helper.rb

@@ -0,0 +1,37 @@
+module ScrivitoPictureWidgetHelper
+  def image_srcset(widget)
+    widths = ScrivitoPictureWidget.configuration.desktop_srcsets
+
+    image_srcset_for(widget, widget.image, widths)
+  end
+
+  def mobile_image_srcset(widget)
+    widths = ScrivitoPictureWidget.configuration.mobile_srcsets
+
+    image_srcset_for(widget, widget.mobile_image || widget.image, widths, :crop)
+  end
+
+  def tablet_image_srcset(widget)
+    widths = ScrivitoPictureWidget.configuration.tablet_srcsets
+
+    image_srcset_for(widget, widget.tablet_image || widget.image, widths, :crop)
+  end
+
+  private
+  def image_srcset_for(widget, obj, widths, fit=nil)
+    image = obj.try(:binary)
+    return unless image
+
+    widths.map do |width|
+      if(fit && obj.id == widget.image.id)
+        height = (width*image.meta_data[:height])/widths.map(&:to_i).max
+        transformed_image = image.transform(width: width, height: height, fit: fit, crop: widget.crop)
+      else
+        transformed_image = image.transform(width: width)
+      end
+      url = scrivito_url(transformed_image)
+
+      "#{url} #{width}w"
+    end.join(", ")
+  end
+end

data/app/models/picture_widget.rb

@@ -0,0 +1,6 @@
+class PictureWidget < Widget
+  attribute :image, :reference, only: Image
+  attribute :mobile_image, :reference, only: Image
+  attribute :tablet_image, :reference, only: Image
+  attribute :crop, :enum, values: ['left','center','right'], default: 'center'
+end

data/app/views/picture_widget/details.html.erb

@@ -0,0 +1,17 @@
+<%= scrivito_details_for t('scrivito_picture_wigdet.details.crop', default: 'Crop') do %>
+  <%= scrivito_tag :div, widget, :crop %>
+<% end %>
+
+<%= scrivito_details_for t('scrivito_picture_wigdet.details.image', default: 'Image') do %>
+  <%= scrivito_tag :div, widget, :image %>
+<% end %>
+
+<%= scrivito_details_for t('scrivito_picture_wigdet.details.mobile_image', default: 'Mobile image') do %>
+  <div class="alert alert-info"><%= t('scrivito_picture_wigdet.details.transform_info', default: 'Set if the automatic transformed image does not fit') %></div>
+  <%= scrivito_tag :div, widget, :mobile_image %>
+<% end %>
+
+<%= scrivito_details_for t('scrivito_picture_wigdet.details.tablet_image', default: 'Tablet image') do %>
+  <div class="alert alert-info"><%= t('scrivito_picture_wigdet.details.transform_info', default: 'Set if the automatic transformed image does not fit') %></div>
+  <%= scrivito_tag :div, widget, :tablet_image %>
+<% end %>

data/app/views/picture_widget/show.html.erb

@@ -0,0 +1,22 @@
+<% if widget.image %>
+  <picture class="img-responsive">
+    <source media='(max-width: <%= ScrivitoPictureWidget.configuration.mobile_breakpoint %>px) and (orientation: portrait)'
+     sizes='100vw'
+     srcset='<%= mobile_image_srcset(widget) %>' class="img-responsive">
+
+     <source media='(max-width: <%= ScrivitoPictureWidget.configuration.mobile_breakpoint %>px) and (orientation: landscape)'
+     sizes='100vw'
+     srcset='<%= tablet_image_srcset(widget) %>' class="img-responsive">
+
+    <source media='(min-width: <%= ScrivitoPictureWidget.configuration.mobile_breakpoint + 1 %>px) and (max-width: <%= ScrivitoPictureWidget.configuration.tablet_breakpoint %>px)'
+     sizes='100vw'
+     srcset='<%= tablet_image_srcset(widget) %>' class="img-responsive">
+
+    <img
+     src='<%= scrivito_path(widget.image.binary.transform(width: 1170)) %>'
+     alt='This is a cool image'
+     srcset='<%= image_srcset(widget) %>' class="img-responsive">
+  </picture>
+<% else %>
+  <div class="alert alert-warning">No image is set. Go to the details view and select one.</div>
+<% end %>

data/app/views/picture_widget/thumbnail.html.erb

@@ -0,0 +1,3 @@
+<%= scrivito_thumbnail t('scrivito_picture_widget.thumbnail.title', default: 'Picture'), image_tag("widgets/scrivito_picture_widget.png") do %>
+  <%= t('scrivito_picture_widget.thumbnail.description', default: 'A widget with an responsive image') %>
+<% end %>

data/lib/scrivito_picture_widget.rb

@@ -0,0 +1,21 @@
+require "scrivito_picture_widget/engine"
+require "scrivito_picture_widget/configuration"
+
+module ScrivitoPictureWidget
+  class << self
+    attr_writer :configuration
+  end
+
+  def self.configuration
+    @configuration ||= Configuration.new
+  end
+
+  def self.reset
+    @configuration = Configuration.new
+  end
+
+  def self.configure
+    yield(configuration)
+  end
+
+end

data/lib/scrivito_picture_widget/configuration.rb

@@ -0,0 +1,20 @@
+module ScrivitoPictureWidget
+  class Configuration
+    attr_accessor :image_fallback_size
+    attr_accessor :mobile_breakpoint
+    attr_accessor :mobile_srcsets
+    attr_accessor :tablet_breakpoint
+    attr_accessor :tablet_srcsets
+    attr_accessor :desktop_srcsets
+
+
+    def initialize
+      @image_fallback_size = 1170
+      @mobile_breakpoint = 700
+      @mobile_srcsets = [900, 700, 500, 300]
+      @tablet_breakpoint = 992
+      @tablet_srcsets = [1300, 1000, 800, 500]
+      @desktop_srcsets = [1900, 1600, 1400, 1200]
+    end
+  end
+end

data/lib/scrivito_picture_widget/engine.rb

@@ -0,0 +1,9 @@
+module ScrivitoPictureWidget
+  class Engine < ::Rails::Engine
+    isolate_namespace ScrivitoPictureWidget
+
+    initializer "scrivito.scrivito_picture_widget_helper" do
+      ActionView::Base.send :include, ScrivitoPictureWidgetHelper
+    end
+  end
+end

data/lib/scrivito_picture_widget/version.rb

@@ -0,0 +1,3 @@
+module ScrivitoPictureWidget
+  VERSION = '0.1.0'
+end

data/lib/tasks/scrivito_picture_widget_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :scrivito_picture_widget do
+#   # Task goes here
+# end

metadata

@@ -0,0 +1,73 @@
+--- !ruby/object:Gem::Specification
+name: scrivito_picture_widget
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Scrivito
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2017-01-11 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: scrivito
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: A responsive image widget for scrivito using the picture tag
+email:
+- support@scrivito.de
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE
+- Rakefile
+- app/assets/images/widgets/scrivito_picture_widget.png
+- app/assets/stylesheets/picture_widget.scss
+- app/assets/stylesheets/scrivito_picture_widget/application.scss
+- app/helpers/scrivito_picture_widget_helper.rb
+- app/models/picture_widget.rb
+- app/views/picture_widget/details.html.erb
+- app/views/picture_widget/show.html.erb
+- app/views/picture_widget/thumbnail.html.erb
+- lib/scrivito_picture_widget.rb
+- lib/scrivito_picture_widget/configuration.rb
+- lib/scrivito_picture_widget/engine.rb
+- lib/scrivito_picture_widget/version.rb
+- lib/tasks/scrivito_picture_widget_tasks.rake
+homepage: https://scrivito.com
+licenses:
+- LGPL-3
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.5.1
+signing_key: 
+specification_version: 4
+summary: A responsive image widget for scrivito using the picture tag
+test_files: []