​
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')) %>