Cover and avatar

It's common for a record to have a visual representation. A user might have a headshot, a company might have a logo, or a product might have an image. Avo can display these in two ways:

• the avatar (self.avatar) — a small photo shown on the Show and Edit views and in the breadcrumbs
• the cover (self.cover) — a large banner image displayed at the top of the record

Add an avatar

Use the avatar option. It takes two arguments: visible_on and source.

# app/avo/resources/user.rb
self.avatar = {
  visible_on: [:show, :forms],
  source: -> {
    if view.index?
      # We're on the index page and don't have a record to reference
      DEFAULT_IMAGE
    else
      # We have a record so we can reference its avatar
      record.avatar
    end
  }
}

When no avatar is configured (or the source is blank), Avo falls back to the record's initials in places like the breadcrumbs.

To also show the avatar as a column on the Index view, add the avatar field to the resource.

Add a cover photo

Use the cover option. It takes the same visible_on and source arguments, plus a size.

You can point it to an Active Storage field or a custom path.

# app/avo/resources/post.rb
self.cover = {
  size: :md, # :sm, :md, :lg, or :full
  visible_on: [:show, :forms], # can be :show, :index, :edit, or a combination [:show, :index]
  source: -> {
    if view.index?
      # We're on the index page and don't have a record to reference
      DEFAULT_IMAGE
    else
      # We have a record so we can reference its cover photo
      record.cover_photo
    end
  }
}

Renamed in Avo 4

These options were called profile_photo and cover_photo in Avo 3. See the upgrade guide.

Options

Both avatar and cover accept visible_on and source. size applies only to cover.

-> visible_on

This controls where the photo should be displayed.

It defaults to the Show, Edit, and New views, but you can change that to be displayed on the Index view or a combination of views.

• Type: Symbol or Array of Symbols
• Default: [:show, :forms]
• Values: one view or a combination of them using an array — :show, :edit, :new, :index, :forms, :display, [:show, :edit]

-> source

This controls what should be displayed as the image.

You can call a field on the record using a Symbol:

self.cover = {
  source: :cover_photo # this will run `record.cover_photo`
}

Or use a block to compute your own value:

self.cover = {
  source: -> {
    if view.index?
      # We're on the index page and don't have a record to reference
      DEFAULT_IMAGE
    else
      # We have a record so we can reference its cover photo
      record.cover_photo
    end
  }
}

source is called on every view, so you can use a conditional to display the image on the Index view too.

• Type: Symbol or Proc
• Default: nil

INFO

When source is a Symbol, nothing is displayed for new (unpersisted) records — use a block if you want a placeholder there. On the Edit view, Avo reads the persisted attachment so a failed update with a direct upload doesn't render a temporary value.

-> size

Only for cover. This represents the height of the cover photo.

• Type: Symbol
• Default: :md
• Values: :sm, :md, :lg, or :full (no height cap)