Images

​

Overview

This guide explains how to change Product Images dimensions and different storage options for ActiveStorage which is the default attachment storage system in Spree.

​

Dimensions

To change the default image dimensions or add new ones you need to create a decorator file:

mkdir -p app/models/spree && touch app/models/spree/image_decorator.rb

with the following content:

module Spree
  module ImageDecorator
    module ClassMethods
      def styles
        {
          # change existing default sizes used in Admin Panel and API
          mini:    '48x48>',
          small:   '100x100>',
          product: '240x240>',
          large:   '600x600>', 
          # add your new size here, which will be automatically available in the API
          my_custom_size: '1000x1000>'
        }
      end
    end

    def self.prepended(base)
      base.inheritance_column = nil
      base.singleton_class.prepend ClassMethods
    end
  end

  Image.prepend(ImageDecorator)
end

​

Using image variations in templates

You can also create image variations on the fly in your templates, eg.

<%= image_tag(main_app.url_for(@product.images.first.attachment.variant(resize: '150x150'))) %>

​

Storage service

By default Spree will use the storage service you have set in your environment file eg. config/environments/development.rb:

config.active_storage.service = :amazon

If you have multiple storage services you can customize which storage service to use for images. This is done in the config/initializers/spree.rb:

Spree.public_storage_service_name = :amazon

The storage name needs to match the name you configured in config/storage.yml.

​

Using CDNs

To use a CDN service such as AWS Cloudfront or Cloudflare, you need to set Spree.cdn_host to the hostname of your CDN service. This is done in the config/initializers/spree.rb:

Spree.cdn_host = 'https://mycloudfrontserviceid.cloudfront.net'

Spree will handle the rest as we have a built-in reverse proxy for ActiveStorage.

To use CDN in your templates please use cdn_image_url helper:

<%= main_app.cdn_image_url(@product.images.first.attachment.variant(resize: '150x150')) %>