Alle Originalinhalte werden auf Ukrainisch erstellt. Noch nicht alle Inhalte wurden übersetzt. Einige Beiträge sind möglicherweise nur auf Ukrainisch verfügbar.Mehr erfahren
Open Graph-Bilderzeugung in Rails mit SVG-Vorlagen
Als Vorlage zur Generierung von JPG-Bildern habe ich SVG gewählt, aufgrund der Einfachheit und der schnellen Verarbeitung dieses Formats. Zum Beispiel bietet HTML als Vorlage mehr Möglichkeiten, ist jedoch komplexer in der Umsetzung und Wartung.
Die Aufgabe besteht darin, ein JPG-Bild für die OpenGraph-Markup (dies ist das Bild/Vorschaubild für einige soziale Netzwerke) zu generieren. Die Rails-Anwendung läuft auf Heroku. Der RAM ist nicht sehr groß, daher muss die Bildgenerierungsaufgabe irgendwo ausgelagert werden. Es macht keinen Sinn, Sidekiq für ein Pet-Projekt einzurichten und dafür zu bezahlen. Eine gute Option für mich war der Heroku Scheduler. Dieses standardmäßige (kostenlose) Addon wird unsere Rake-Task nach einem Zeitplan (einmal täglich) ausführen. Die Aufgabe wird die Beiträge finden, die noch kein OG-Bild haben, und sie generieren und anhängen (ActiveStorage wird verwendet, das Bild wird auf AWS hochgeladen) an das Modell.
Das erste, was zu tun ist, ist, die SVG-Vorlage zu erstellen. Zuerst spielen wir mit SVG. Das OG-Bild sollte 1200px x 630px groß sein.
So wird die SVG-Vorlage ungefähr aussehen:
Diese Vorlage hat keine Variablen. Die Variablen werden im .erb-Template interpretiert. Wir fügen diese SVG-Vorlage in unsere Rails-Anwendung ein und geben ihr die Erweiterung .erb, zum Beispiel lib/templates/og_image_template.svg.erb.
Ich verwende die Bibliothek mini_magick. Daher habe ich bereits in der Gemfile:
gem "mini_magick"
Nun der Code selbst lib/cover_image_generator.rb.
require 'mini_magick'
require 'erb'
module CoverImageGenerator
class Generator
def generate_and_attach(entry, entry_title)
begin
# Dynamisch das SVG-Template ausfüllen
@entry_title = entry_title.truncate(160)
@blog_name = entry.blog.slug
svg_template = File.read(File.expand_path('./templates/cover_image_template.svg.erb', __dir__))
svg_content = ERB.new(svg_template).result(binding)
# Erstellen Sie ein MiniMagick-Bild aus dem SVG-Inhalt
cover_image = MiniMagick::Image.read(svg_content)
# In JPG konvertieren
cover_image.format('jpg')
temp_file_path = entry.slug + '.jpg'
cover_image.write(temp_file_path)
# Bild an den Eintrag anhängen
entry.cover_image.attach(io: File.open(temp_file_path), filename: "#{entry.slug}.jpg", content_type: 'image/jpeg')
# Temporäre Datei löschen
File.delete(temp_file_path)
rescue => e
# Hier wird es wahrscheinlich Probleme mit Texten geben, die spezielle Zeichen enthalten, die nicht in JPG konvertiert werden können.
# Solche Titel ignoriere ich vorerst - ich muss eine Lösung für dieses Problem finden.
# Derzeit, wenn das Modell kein hinzugefügtes OG-Bild hat, zeige ich das Standardbild an.
puts "Fehler bei: #{@entry_title}, ID: #{entry.id}"
puts e
puts "=========================================="
end
puts "Bild angehängt an: #{@entry_title}, ID: #{entry.id}"
puts "=========================================="
end
end
end
AWS ist bereits eingerichtet und alles, was zu tun ist, ist, cover_image zu unserem Modell (zum Beispiel Topic) hinzuzufügen.
Unsere SVG-Vorlage muss unsere Variablen rendern. Außerdem müssen wir, unter Berücksichtigung der Eigenschaften der SVG-Dateistile, lange Titel in mehrere Zeilen aufteilen.
Dieser Code muss in die Rake-Task eingefügt werden, die durchläuft und OG-Bilder für alle erforderlichen Objekte generiert. Dieser Code kann auch verwendet werden, um ein Bild nach der Erstellung oder Aktualisierung (des Titels) eines Objekts zu generieren.
Das Ergebnis:
Приклад створеного JPEG з SVG шаблону
Dieses Beispiel für Code/Konzept ist nicht die endgültige Version. Es gibt noch viel zu tun.
