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