Views

Generating Open Graph Images with SVG partial and Vips

Curated ago by @jeremysmithco

Description

I found a way to generate custom Open Graph images for Sample files on this site using an SVG partial that is rendered and converted to PNG by ImageProcessing::Vips.

1
2
3
4
5
6
7
8
9
10
<% set_meta_tags(
  title: @sample.title,
  description: strip_markdown(@sample.description),
  og: {
    image: (rails_blob_url(@sample_file.open_graph_image) if @sample_file.open_graph_image.attached?)
  },
  twitter: {
    image: (rails_blob_url(@sample_file.open_graph_image) if @sample_file.open_graph_image.attached?)
  }
) %>

The show view passes the full URL to the Open Graph image (if present) to the set_meta_tags method, so the appropriate meta tags are set on the page.