Fix OpenGraph/TwitterCard meta tag ordering for posts with multiple attachments

changelog.d/twittercard-tag-order.fix

@@ -0,0 +1 @@
+Fix OpenGraph/TwitterCard meta tag ordering for posts with multiple attachments

lib/pleroma/web/metadata/providers/open_graph.ex

@@ -78,9 +78,9 @@ defmodule Pleroma.Web.Metadata.Providers.OpenGraph do
           # object when a Video or GIF is attached it will display that in Whatsapp Rich Preview.
           case Utils.fetch_media_type(@media_types, url["mediaType"]) do
             "audio" ->
+              acc ++
                 [
                   {:meta, [property: "og:audio", content: MediaProxy.url(url["href"])], []}
-                | acc
                 ]
 
             # Not using preview_url for this. It saves bandwidth, but the image dimensions will
@@ -89,18 +89,18 @@ defmodule Pleroma.Web.Metadata.Providers.OpenGraph do
             # in timelines too, but you can get clever with the aspect ratio metadata as a
             # workaround.
             "image" ->
+              (acc ++
                  [
                    {:meta, [property: "og:image", content: MediaProxy.url(url["href"])], []},
                    {:meta, [property: "og:image:alt", content: attachment["name"]], []}
-                | acc
+                 ])
-              ]
               |> maybe_add_dimensions(url)
 
             "video" ->
+              (acc ++
                  [
                    {:meta, [property: "og:video", content: MediaProxy.url(url["href"])], []}
-                | acc
+                 ])
-              ]
               |> maybe_add_dimensions(url)
               |> maybe_add_video_thumbnail(url)
 

lib/pleroma/web/metadata/providers/twitter_card.ex

@@ -61,12 +61,12 @@ defmodule Pleroma.Web.Metadata.Providers.TwitterCard do
         Enum.reduce(attachment["url"], [], fn url, acc ->
           case Utils.fetch_media_type(@media_types, url["mediaType"]) do
             "audio" ->
+              acc ++
                 [
                   {:meta, [name: "twitter:card", content: "player"], []},
                   {:meta, [name: "twitter:player:width", content: "480"], []},
                   {:meta, [name: "twitter:player:height", content: "80"], []},
                   {:meta, [name: "twitter:player", content: player_url(id)], []}
-                | acc
                 ]
 
             # Not using preview_url for this. It saves bandwidth, but the image dimensions will
@@ -75,6 +75,7 @@ defmodule Pleroma.Web.Metadata.Providers.TwitterCard do
             # in timelines too, but you can get clever with the aspect ratio metadata as a
             # workaround.
             "image" ->
+              (acc ++
                  [
                    {:meta, [name: "twitter:card", content: "summary_large_image"], []},
                    {:meta,
@@ -83,8 +84,7 @@ defmodule Pleroma.Web.Metadata.Providers.TwitterCard do
                       content: MediaProxy.url(url["href"])
                     ], []},
                    {:meta, [name: "twitter:image:alt", content: truncate(attachment["name"])], []}
-                | acc
+                 ])
-              ]
               |> maybe_add_dimensions(url)
 
             "video" ->
@@ -92,6 +92,7 @@ defmodule Pleroma.Web.Metadata.Providers.TwitterCard do
               height = url["height"] || 480
               width = url["width"] || 480
 
+              acc ++
                 [
                   {:meta, [name: "twitter:card", content: "player"], []},
                   {:meta, [name: "twitter:player", content: player_url(id)], []},
@@ -101,7 +102,6 @@ defmodule Pleroma.Web.Metadata.Providers.TwitterCard do
                    []},
                   {:meta, [name: "twitter:player:stream:content_type", content: url["mediaType"]],
                    []}
-                | acc
                 ]
 
             _ ->

test/pleroma/web/metadata/providers/open_graph_test.exs

@@ -9,6 +9,7 @@ defmodule Pleroma.Web.Metadata.Providers.OpenGraphTest do
 
   alias Pleroma.UnstubbedConfigMock, as: ConfigMock
   alias Pleroma.Web.Metadata.Providers.OpenGraph
+  alias Pleroma.Web.Metadata.Utils
 
   setup do
     ConfigMock
@@ -197,4 +198,58 @@ defmodule Pleroma.Web.Metadata.Providers.OpenGraphTest do
                 "http://localhost:4001/proxy/preview/LzAnlke-l5oZbNzWsrHfprX1rGw/aHR0cHM6Ly9wbGVyb21hLmdvdi9hYm91dC9qdWNoZS53ZWJt/juche.webm"
             ], []} in result
   end
+
+  test "meta tag ordering matches attachment order" do
+    user = insert(:user, name: "Jimmy Hendriks", bio: "born 19 March 1994")
+
+    note =
+      insert(:note, %{
+        data: %{
+          "actor" => user.ap_id,
+          "tag" => [],
+          "id" => "https://pleroma.gov/objects/whatever",
+          "summary" => "",
+          "content" => "pleroma in a nutshell",
+          "attachment" => [
+            %{
+              "url" => [
+                %{
+                  "mediaType" => "image/png",
+                  "href" => "https://example.com/first.png",
+                  "height" => 1024,
+                  "width" => 1280
+                }
+              ]
+            },
+            %{
+              "url" => [
+                %{
+                  "mediaType" => "image/png",
+                  "href" => "https://example.com/second.png",
+                  "height" => 1024,
+                  "width" => 1280
+                }
+              ]
+            }
+          ]
+        }
+      })
+
+    result = OpenGraph.build_tags(%{object: note, url: note.data["id"], user: user})
+
+    assert [
+             {:meta, [property: "og:title", content: Utils.user_name_string(user)], []},
+             {:meta, [property: "og:url", content: "https://pleroma.gov/objects/whatever"], []},
+             {:meta, [property: "og:description", content: "pleroma in a nutshell"], []},
+             {:meta, [property: "og:type", content: "article"], []},
+             {:meta, [property: "og:image", content: "https://example.com/first.png"], []},
+             {:meta, [property: "og:image:alt", content: nil], []},
+             {:meta, [property: "og:image:width", content: "1280"], []},
+             {:meta, [property: "og:image:height", content: "1024"], []},
+             {:meta, [property: "og:image", content: "https://example.com/second.png"], []},
+             {:meta, [property: "og:image:alt", content: nil], []},
+             {:meta, [property: "og:image:width", content: "1280"], []},
+             {:meta, [property: "og:image:height", content: "1024"], []}
+           ] == result
+  end
 end

test/pleroma/web/metadata/providers/twitter_card_test.exs

@@ -202,4 +202,58 @@ defmodule Pleroma.Web.Metadata.Providers.TwitterCardTest do
              {:meta, [name: "twitter:player:stream:content_type", content: "video/webm"], []}
            ] == result
   end
+
+  test "meta tag ordering matches attachment order" do
+    user = insert(:user, name: "Jimmy Hendriks", bio: "born 19 March 1994")
+
+    note =
+      insert(:note, %{
+        data: %{
+          "actor" => user.ap_id,
+          "tag" => [],
+          "id" => "https://pleroma.gov/objects/whatever",
+          "summary" => "",
+          "content" => "pleroma in a nutshell",
+          "attachment" => [
+            %{
+              "url" => [
+                %{
+                  "mediaType" => "image/png",
+                  "href" => "https://example.com/first.png",
+                  "height" => 1024,
+                  "width" => 1280
+                }
+              ]
+            },
+            %{
+              "url" => [
+                %{
+                  "mediaType" => "image/png",
+                  "href" => "https://example.com/second.png",
+                  "height" => 1024,
+                  "width" => 1280
+                }
+              ]
+            }
+          ]
+        }
+      })
+
+    result = TwitterCard.build_tags(%{object: note, activity_id: note.data["id"], user: user})
+
+    assert [
+             {:meta, [name: "twitter:title", content: Utils.user_name_string(user)], []},
+             {:meta, [name: "twitter:description", content: "pleroma in a nutshell"], []},
+             {:meta, [name: "twitter:card", content: "summary_large_image"], []},
+             {:meta, [name: "twitter:image", content: "https://example.com/first.png"], []},
+             {:meta, [name: "twitter:image:alt", content: ""], []},
+             {:meta, [name: "twitter:player:width", content: "1280"], []},
+             {:meta, [name: "twitter:player:height", content: "1024"], []},
+             {:meta, [name: "twitter:card", content: "summary_large_image"], []},
+             {:meta, [name: "twitter:image", content: "https://example.com/second.png"], []},
+             {:meta, [name: "twitter:image:alt", content: ""], []},
+             {:meta, [name: "twitter:player:width", content: "1280"], []},
+             {:meta, [name: "twitter:player:height", content: "1024"], []}
+           ] == result
+  end
 end