better open graph

loftwah · Aug 9, 2024 · 87daa93 · 87daa93
1 parent f8f26b8
commit 87daa93
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 22 deletions.
diff --git a/app/assets/images/default_og_image.png b/app/assets/images/default_og_image.png
diff --git a/app/assets/images/judgemental_linkarooie.png b/app/assets/images/judgemental_linkarooie.png
diff --git a/app/assets/images/og_template.png b/app/assets/images/og_template.png
diff --git a/app/services/open_graph_image_generator.rb b/app/services/open_graph_image_generator.rb
@@ -1,39 +1,48 @@
 class OpenGraphImageGenerator
+  IMAGE_WIDTH = 1200
+  IMAGE_HEIGHT = 630
+  AVATAR_SIZE = 200
+  BORDER_SIZE = 10
+
   def initialize(user)
     @user = user
   end
 
   def generate
     template_path = Rails.root.join('app', 'assets', 'images', 'og_template.png')
     output_path = Rails.root.join('public', 'uploads', 'og_images', "#{@user.username}_og.png")
-
     image = MiniMagick::Image.open(template_path)
     avatar = download_image(@user.avatar)
 
-    avatar.resize '200x200'
+    # Resize avatar and add a white square border
+    avatar.resize "#{AVATAR_SIZE}x#{AVATAR_SIZE}"
+    avatar.combine_options do |c|
+      c.bordercolor 'white'
+      c.border BORDER_SIZE
+    end
 
+    # Generate the final image with all elements
     image.combine_options do |c|
       c.font "Liberation-Sans"
-      # Positioning avatar (example: 50px from left, 100px from top)
-      c.draw "image Over 50,100 200,200 '#{avatar.path}'"
 
-      # Positioning full name
-      c.gravity 'NorthWest'
-      c.pointsize '36'
-      c.draw "text 300,150 '#{@user.full_name}'"
-
-      # Positioning username
-      c.pointsize '24'
-      c.draw "text 300,200 '#{@user.username}'"
-
-      # Positioning description
-      c.pointsize '18'
-      c.draw "text 300,250 '#{@user.description.truncate(60)}'"
-
-      # Optionally add tags
-      tag_text = @user.parsed_tags.join(', ')
-      c.pointsize '18'
-      c.draw "text 300,300 '#{tag_text}'"
+      # Centered avatar
+      c.gravity 'Center'
+      c.draw "image Over 0,-100 #{AVATAR_SIZE + 2 * BORDER_SIZE},#{AVATAR_SIZE + 2 * BORDER_SIZE} '#{avatar.path}'"
+
+      # Centered Full name
+      c.fill '#BEF264'
+      c.pointsize '40'
+      c.draw "text 0,50 '#{@user.full_name}'"
+
+      # Centered Username with "@" symbol
+      c.pointsize '28'
+      c.draw "text 0,100 '@#{@user.username}'"
+
+      # Centered Tags, in white
+      tag_text = @user.parsed_tags.join(' | ')
+      c.fill 'white'
+      c.pointsize '20'
+      c.draw "text 0,150 '#{tag_text}'"
     end
 
     image.write(output_path)
@@ -51,4 +60,4 @@ def download_image(url)
     tempfile.rewind
     MiniMagick::Image.open(tempfile.path)
   end
-end
+end
diff --git a/public/uploads/og_images/loftwah_og.png b/public/uploads/og_images/loftwah_og.png