feat: Initial Implementation of Open Graph (OG) Plugin

administrator/components/com_content/src/Extension/ContentComponent.php

@@ -25,6 +25,7 @@
 use Joomla\CMS\Helper\ContentHelper as LibraryContentHelper;
 use Joomla\CMS\HTML\HTMLRegistryAwareTrait;
 use Joomla\CMS\Language\Text;
+use Joomla\CMS\Opengraph\OpengraphServiceInterface;
 use Joomla\CMS\Schemaorg\SchemaorgServiceInterface;
 use Joomla\CMS\Schemaorg\SchemaorgServiceTrait;
 use Joomla\CMS\Tag\TagServiceInterface;
@@ -53,7 +54,8 @@ class ContentComponent extends MVCComponent implements
     SchemaorgServiceInterface,
     WorkflowServiceInterface,
     RouterServiceInterface,
-    TagServiceInterface
+    TagServiceInterface,
+    OpengraphServiceInterface
 {
     use AssociationServiceTrait;
     use RouterServiceTrait;
@@ -204,6 +206,69 @@ public function getSchemaorgContexts(): array
         return $contexts;
     }
 
+
+    /**
+     * Returns valid contexts for opengraph
+     *
+     * @return  array
+     *
+     * @since  __DEPLOY_VERSION__
+     */
+    public function getOpengraphFields(): array
+    {
+        Factory::getApplication()->getLanguage()->load('com_content', JPATH_ADMINISTRATOR);
+
+        $fields = [
+            'text-fields' => [
+                'title'       => Text::_('JGLOBAL_TITLE'),
+                'articletext' => Text::_('COM_CONTENT_FIELD_ARTICLETEXT_LABEL'),
+                'alias'       => Text::_('JFIELD_ALIAS_LABEL'),
+                'metadesc'    => Text::_('JFIELD_META_DESCRIPTION_LABEL'),
+            ],
+
+            'image-fields' => [
+                'image_intro'    => Text::_('COM_CONTENT_FIELD_INTRO_LABEL'),
+                'image_fulltext' => Text::_('COM_CONTENT_FIELD_FULL_LABEL'),
+
+            ],
+
+            'image-alt-fields' => [
+                'image_intro_alt'    => Text::_('COM_CONTENT_FIELD_INTRO_LABEL') . ' - ' . Text::_('COM_CONTENT_FIELD_IMAGE_ALT_LABEL'),
+                'image_fulltext_alt' => Text::_('COM_CONTENT_FIELD_FULL_LABEL') . ' - ' . Text::_('COM_CONTENT_FIELD_IMAGE_ALT_LABEL'),
+            ],
+
+            'meta-fields' => [
+                'metadesc' => Text::_('JFIELD_META_DESCRIPTION_LABEL'),
+                'metakey'  => Text::_('JFIELD_META_KEYWORDS_LABEL'),
+            ],
+
+
+            'locale-fields' => [
+                'language' => Text::_('JFIELD_LANGUAGE_LABEL'),
+            ],
+
+            'author-fields' => [
+                'created_by'       => Text::_('COM_CONTENT_FIELD_CREATED_BY_LABEL'),
+                'created_by_alias' => Text::_('COM_CONTENT_FIELD_CREATED_BY_ALIAS_LABEL'),
+                'modified_by'      => Text::_('JGLOBAL_FIELD_MODIFIED_BY_LABEL'),
+
+            ],
+            'date-fields' => [
+                'created'      => Text::_('COM_CONTENT_FIELD_CREATED_LABEL'),
+                'modified'     => Text::_('JGLOBAL_FIELD_MODIFIED_LABEL'),
+                'publish_up'   => Text::_('COM_CONTENT_FIELD_PUBLISH_UP_LABEL'),
+                'publish_down' => Text::_('COM_CONTENT_FIELD_PUBLISH_DOWN_LABEL'),
+            ],
+
+
+
+
+        ];
+
+        return $fields;
+    }
+
+
     /**
      * Returns valid contexts
      *
@@ -295,7 +360,6 @@ public function getModelName($context): string
 
         return ucfirst($modelname);
     }
-
     /**
      * Method to filter transitions by given id of state.
      *

administrator/components/com_menus/src/Extension/MenusComponent.php

@@ -15,6 +15,7 @@
 use Joomla\CMS\Extension\BootableExtensionInterface;
 use Joomla\CMS\Extension\MVCComponent;
 use Joomla\CMS\HTML\HTMLRegistryAwareTrait;
+use Joomla\CMS\Opengraph\OpengraphServiceInterface;
 use Joomla\Component\Menus\Administrator\Service\HTML\Menus;
 use Psr\Container\ContainerInterface;
 
@@ -29,7 +30,8 @@
  */
 class MenusComponent extends MVCComponent implements
     BootableExtensionInterface,
-    AssociationServiceInterface
+    AssociationServiceInterface,
+    OpengraphServiceInterface
 {
     use AssociationServiceTrait;
     use HTMLRegistryAwareTrait;
@@ -51,4 +53,20 @@ public function boot(ContainerInterface $container)
     {
         $this->getRegistry()->register('menus', new Menus());
     }
+
+
+    /**
+     * Returns valid contexts for opengraph
+     *
+     * @return  array
+     *
+     * @since  __DEPLOY_VERSION__
+     */
+    public function getOpengraphFields(): array
+    {
+
+        $fields = [];
+
+        return $fields;
+    }
 }

build/media_source/plg_system_opengraph/joomla.asset.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json",
+  "name": "plg_system_opengraph",
+  "version": " __DEPLOY_VERSION__",
+  "description": "Joomla CMS",
+  "license": "GPL-2.0-or-later",
+  "assets": [
+    {
+      "name": "plg_system_opengraph.opengraph-placeholder",
+      "type": "script",
+      "uri": "plg_system_opengraph/opengraph-placeholder.min.js",
+      "dependencies": ["core"],
+      "attributes": {
+        "type": "module"
+      }
+    }
+  ]
+}

build/media_source/plg_system_opengraph/js/opengraph-placeholder.es6.js

@@ -0,0 +1,94 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const maps = Joomla.getOptions("plgOgMappings", {});
+
+  const selectorFor = (token) => {
+    if (token.startsWith("field.")) {
+      const n = CSS.escape(token.slice(6));
+      return `[name="jform[com_fields][${n}]"]`;
+    }
+    if (token.startsWith("image_")) {
+      return `[name="jform[images][${CSS.escape(token)}]"]`;
+    }
+    return `[name="jform[${CSS.escape(token)}]"]`;
+  };
+
+  function getSourceName(token) {
+    if (token.startsWith("field.")) {
+      const fieldKey = token.slice(6).replace(/_/g, " ");
+      return `Custom Field: ${fieldKey}`;
+    }
+
+    const mapCoreNames = {
+      title: "Title",
+      alias: "Alias",
+      metadesc: "Meta Description",
+      metakey: "Meta Keywords",
+      articletext: "Article Text",
+      image_intro: "Intro Image",
+      image_intro_alt: "Intro Image Alt",
+      image_fulltext: "Fulltext Image",
+      image_fulltext_alt: "Fulltext Image Alt",
+      created_by_alias: "Author Alias",
+    };
+
+    return mapCoreNames[token] || token;
+  }
+
+  function sanitizeText(input, maxLen = 60) {
+    if (typeof input !== "string" || !input.trim()) return "";
+
+    // Remove HTML tags manually (just in case innerText fails)
+    const noTags = input.replace(/<[^>]*>/g, " ");
+
+    // Decode HTML entities using a temporary div
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = noTags;
+    const decoded = tempDiv.textContent || tempDiv.innerText || "";
+
+    // Normalize whitespace
+    const cleaned = decoded.replace(/\s+/g, " ").trim();
+
+    // Truncate with word boundary safety
+    if (cleaned.length <= maxLen) return cleaned;
+
+    const cut = cleaned.lastIndexOf(" ", maxLen - 1);
+    const safeCut = cut > maxLen * 0.6 ? cut : maxLen - 1;
+    return cleaned.slice(0, safeCut).replace(/[.,;:\-\s]+$/, "") + "…";
+  }
+
+  const maxLen = {
+    og_title: Number(maps.maxTitleLen) || 60,
+    og_description: Number(maps.maxDescLen) || 160,
+    og_image_alt: Number(maps.maxAltLen) || 125,
+  };
+
+  Object.entries(maps).forEach(([ogKey, token]) => {
+    const ogInput = document.getElementById(`jform_attribs_${ogKey}`);
+    const srcInput = document.querySelector(selectorFor(token));
+
+    if (!ogInput || !srcInput) return;
+
+    const originalPh = ogInput.placeholder;
+    const inherited = Joomla.Text._("PLG_SYSTEM_OPENGRAPH_INHERITED");
+    const paint = () => {
+      if (ogInput.value.trim()) return; // user override
+      let v = srcInput.value.trim();
+
+      if (ogKey !== "og_image") {
+        v = sanitizeText(v, maxLen[ogKey]);
+      }
+      const sourceLabel = getSourceName(token);
+      ogInput.placeholder = v
+        ? `${v} — ${inherited} from ${sourceLabel}`
+        : originalPh;
+    };
+
+    paint(); // initial
+    srcInput.addEventListener("input", paint);
+
+    ogInput.addEventListener("input", () => {
+      ogInput.placeholder = originalPh; // detach
+      srcInput.removeEventListener("input", paint);
+    });
+  });
+});

libraries/src/Opengraph/OpengraphServiceInterface.php

@@ -0,0 +1,33 @@
+<?php
+
+/**
+ * Joomla! Content Management System
+ *
+ * @copyright  (C) 2025 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license    GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+namespace Joomla\CMS\Opengraph;
+
+// phpcs:disable PSR1.Files.SideEffects
+\defined('_JEXEC') or die;
+// phpcs:enable PSR1.Files.SideEffects
+
+
+/**
+ * The Opengraph service.
+ *
+ * @since  __DEPLOY_VERSION__
+ */
+interface OpengraphServiceInterface
+{
+    /**
+     * Returns valid contexts.
+     *
+     * @return  array
+     *
+     * @since   __DEPLOY_VERSION__
+     *
+     */
+    public function getOpengraphFields(): array;
+}

plugins/system/opengraph/language/en-GB/plg_system_opengraph.ini

@@ -0,0 +1,99 @@
+; Open Graph Plugin Language File
+; Copyright (C) 2025 Open Source Matters, Inc.
+; License GNU General Public License version 2 or later
+
+
+PLG_SYSTEM_OPENGRAPH_ADVANCED_SECTION ="Advanced Settings"
+PLG_SYSTEM_OPENGRAPH_DEFAULT_DESC_DESC="Fallback description for OpenGraph tags."
+PLG_SYSTEM_OPENGRAPH_DEFAULT_DESC_LABEL="Default OG Description"
+PLG_SYSTEM_OPENGRAPH_DEFAULT_IMAGE_ALT_DESC="Alt text for the default OpenGraph image."
+PLG_SYSTEM_OPENGRAPH_DEFAULT_IMAGE_ALT_LABEL="Default OG Image Alt"
+PLG_SYSTEM_OPENGRAPH_DEFAULT_IMAGE_DESC="Fallback image for OpenGraph (recommended 1200×630)."
+PLG_SYSTEM_OPENGRAPH_DEFAULT_IMAGE_LABEL="Default OG Image"
+PLG_SYSTEM_OPENGRAPH_DEFAULT_SITENAME_DESC="Fallback for og:site_name if you choose to include it."
+PLG_SYSTEM_OPENGRAPH_DEFAULT_SITENAME_LABEL="Default Site Name"
+PLG_SYSTEM_OPENGRAPH_DEFAULT_TITLE_DESC="Used when no title is mapped or provided by Menu/Category/Item."
+PLG_SYSTEM_OPENGRAPH_DEFAULT_TITLE_LABEL="Default OG Title"
+PLG_SYSTEM_OPENGRAPH_DESCRIPTION="Open Graph Plugin automatically generates Open Graph tags for improved social media sharing. Features hierarchical override system supporting global, category, and article-level metadata configuration."
+PLG_SYSTEM_OPENGRAPH_DESCRIPTION_FIELD_DESC="Select which article field to use for og:description meta tag. Meta description is preferred over article text."
+PLG_SYSTEM_OPENGRAPH_DESCRIPTION_FIELD_LABEL="Description Source"
+PLG_SYSTEM_OPENGRAPH_ENABLE_DESC="Enable OpenGraph tags for this content."
+PLG_SYSTEM_OPENGRAPH_ENABLE_LABEL="Enable OpenGraph"
+PLG_SYSTEM_OPENGRAPH_ENABLE_OG_GENERATION="Enable OpenGraph"
+PLG_SYSTEM_OPENGRAPH_ENABLE_OG_GENERATION_DESC="Enable OpenGraph tags generation."
+PLG_SYSTEM_OPENGRAPH_FB_APP_ID_DESC="Needed only for Facebook Insights."
+PLG_SYSTEM_OPENGRAPH_FB_APP_ID_LABEL="Facebook App ID"
+PLG_SYSTEM_OPENGRAPH_FEATURES_DESC="• Generates complete Open Graph and Twitter Card metadata on the fly.
• Hierarchical override system: Menu → Article → Category → Global.
• Auto‑picks intro/full images and alt text.
• Smart sanitisation & trimming prevents broken previews."
+PLG_SYSTEM_OPENGRAPH_FEATURES_LABEL="What this plugin does"
+PLG_SYSTEM_OPENGRAPH_FIELDSET_ARTICLE="OpenGraph"
+PLG_SYSTEM_OPENGRAPH_FIELDSET_ARTICLE_DESC="Configure OpenGraph metadata for social media sharing. These settings override global defaults."
+PLG_SYSTEM_OPENGRAPH_FIELDSET_GLOBAL_DEFAULTS="Global Defaults"
+PLG_SYSTEM_OPENGRAPH_FIELDSET_GLOBAL_DEFAULTS_DESC="Set site-wide OpenGraph fallback values. Menu and item-level settings will override these."
+PLG_SYSTEM_OPENGRAPH_FIELD_MAPPING_SECTION="Field Mapping Configuration"
+PLG_SYSTEM_OPENGRAPH_GLOBAL_DESC="Global defaults used when no article / menu overrides are present."
+PLG_SYSTEM_OPENGRAPH_GLOBAL_OG_SETTINGS="Global Open Graph Settings"
+PLG_SYSTEM_OPENGRAPH_IMAGE_ALT_FIELD_DESC="Select which article field to use for og:image:alt meta tag for accessibility"
+PLG_SYSTEM_OPENGRAPH_IMAGE_ALT_FIELD_LABEL="Image Alt Text Source"
+PLG_SYSTEM_OPENGRAPH_IMAGE_FIELD_DESC="Select which article field to use for og:image meta tag"
+PLG_SYSTEM_OPENGRAPH_IMAGE_FIELD_LABEL="Image Source"
+PLG_SYSTEM_OPENGRAPH_INHERITED="inherited"
+PLG_SYSTEM_OPENGRAPH_MANUAL_OVERRIDE_SECTION="Manual Override Options"
+PLG_SYSTEM_OPENGRAPH_MAX_ALT_DESC="Recommended: ≤125 characters (based on WCAG guidelines)."
+PLG_SYSTEM_OPENGRAPH_MAX_ALT_LABEL="Max Alt Text Length"
+PLG_SYSTEM_OPENGRAPH_MAX_DESC_DESC="Recommended: ≤160 characters (Twitter truncates beyond this)."
+PLG_SYSTEM_OPENGRAPH_MAX_DESC_LABEL="Max Description Length"
+PLG_SYSTEM_OPENGRAPH_MAX_TITLE_DESC="Recommended: ≤60 characters for best display in Facebook and Twitter cards."
+PLG_SYSTEM_OPENGRAPH_MAX_TITLE_LABEL="Max Title Length"
+PLG_SYSTEM_OPENGRAPH_NO_FIELD_SELECTED="-- No Field Selected --"
+PLG_SYSTEM_OPENGRAPH_OG_DESCRIPTION_DESC="Brief description for social media sharing. Recommended length: 120-160 characters."
+PLG_SYSTEM_OPENGRAPH_OG_DESCRIPTION_HINT="Enter a brief, engaging description"
+PLG_SYSTEM_OPENGRAPH_OG_DESCRIPTION_LABEL="OpenGraph Description"
+PLG_SYSTEM_OPENGRAPH_OG_IMAGE_ALT_DESC="Alternative text for the OpenGraph image for accessibility."
+PLG_SYSTEM_OPENGRAPH_OG_IMAGE_ALT_HINT="Enter a brief description of the image for accessibility"
+PLG_SYSTEM_OPENGRAPH_OG_IMAGE_ALT_LABEL="OpenGraph Image Alt Text"
+PLG_SYSTEM_OPENGRAPH_OG_IMAGE_DESC="Image for social media sharing. Recommended size: 1200x630 pixels."
+PLG_SYSTEM_OPENGRAPH_OG_IMAGE_LABEL="OpenGraph Image"
+PLG_SYSTEM_OPENGRAPH_OG_TITLE_DESC="Custom title for social media sharing. Recommended length: 40-60 characters."
+PLG_SYSTEM_OPENGRAPH_OG_TITLE_HINT="Enter a compelling title for social sharing"
+PLG_SYSTEM_OPENGRAPH_OG_TITLE_LABEL="OpenGraph Title"
+PLG_SYSTEM_OPENGRAPH_OG_TYPE_DESC="Content type for social media platforms."
+PLG_SYSTEM_OPENGRAPH_OG_TYPE_LABEL="OpenGraph Type"
+PLG_SYSTEM_OPENGRAPH_OG_URL_DESC="Override the canonical URL for sharing."
+PLG_SYSTEM_OPENGRAPH_OG_URL_HINT="Leave empty to use the article's URL"
+PLG_SYSTEM_OPENGRAPH_OG_URL_LABEL="Custom URL"
+PLG_SYSTEM_OPENGRAPH_OVERRIDE_SETTINGS="Override Settings"
+PLG_SYSTEM_OPENGRAPH_OVERVIEW="Overview & Help"
+PLG_SYSTEM_OPENGRAPH_QUICKSTART_DESC="1. Enable the plugin.
2. Optional: enter your Facebook App ID above.
3. Edit any article → ‘Open Graph’ tab to override title, description, or image.
4. Clear cache, share your URL and enjoy rich previews!"
+PLG_SYSTEM_OPENGRAPH_QUICKSTART_LABEL="How to use"
+PLG_SYSTEM_OPENGRAPH_SHOW_ADVANCED_DESC="Show advanced settings for OpenGraph metadata."
+PLG_SYSTEM_OPENGRAPH_SHOW_ADVANCED_LABEL="Show Advanced Settings"
+PLG_SYSTEM_OPENGRAPH_SHOW_MANUAL_OVERRIDE_DESC="Enable this to manually set OG tags like title, description, and image."
+PLG_SYSTEM_OPENGRAPH_SHOW_MANUAL_OVERRIDE_LABEL="Show Manual Override Settings"
+PLG_SYSTEM_OPENGRAPH_TIPS_DESC="• Changed an image but Facebook still shows the old one? Clear Joomla & CDN caches, then run Facebook Sharing Debugger.
• Large images (>5 MB) may be ignored by Twitter.
• Verify that og:image is an absolute URL (use the built‑in sanitiser)."
+PLG_SYSTEM_OPENGRAPH_TIPS_LABEL="Troubleshooting"
+PLG_SYSTEM_OPENGRAPH_TITLE_FIELD_DESC="Select which article field to use for og:title meta tag"
+PLG_SYSTEM_OPENGRAPH_TITLE_FIELD_LABEL="Title Source"
+PLG_SYSTEM_OPENGRAPH_TWITTER_CARD_DESC="Select the type of Twitter card to use for this content."
+PLG_SYSTEM_OPENGRAPH_TWITTER_CARD_LABEL="Twitter Card Type"
+PLG_SYSTEM_OPENGRAPH_TWITTER_CARD_SUMMARY="Summary"
+PLG_SYSTEM_OPENGRAPH_TWITTER_CARD_SUMMARY_LARGE_IMAGE="Summary Large Image"
+PLG_SYSTEM_OPENGRAPH_TWITTER_DESC_DESC="Custom description for Twitter sharing. Recommended length: 120-160 characters."
+PLG_SYSTEM_OPENGRAPH_TWITTER_DESC_HINT="Enter a brief, engaging description"
+PLG_SYSTEM_OPENGRAPH_TWITTER_DESC_LABEL="Twitter Description"
+PLG_SYSTEM_OPENGRAPH_TWITTER_IMAGE_DESC="Image for Twitter sharing. Recommended size: 1200x630 pixels."
+PLG_SYSTEM_OPENGRAPH_TWITTER_IMAGE_LABEL="Twitter Image"
+PLG_SYSTEM_OPENGRAPH_TWITTER_TITLE_DESC="Custom title for Twitter sharing. Recommended length: 70 characters."
+PLG_SYSTEM_OPENGRAPH_TWITTER_TITLE_HINT="Enter a compelling title for Twitter sharing"
+PLG_SYSTEM_OPENGRAPH_TWITTER_TITLE_LABEL="Twitter Title"
+PLG_SYSTEM_OPENGRAPH_TYPE_ARTICLE="Article"
+PLG_SYSTEM_OPENGRAPH_TYPE_BLOG="Blog"
+PLG_SYSTEM_OPENGRAPH_TYPE_BOOK="Book"
+PLG_SYSTEM_OPENGRAPH_TYPE_EVENT="Event"
+PLG_SYSTEM_OPENGRAPH_TYPE_FIELD_DESC="Select a custom field to use as the OpenGraph type source."
+PLG_SYSTEM_OPENGRAPH_TYPE_FIELD_LABEL="Type Field"
+PLG_SYSTEM_OPENGRAPH_TYPE_MUSIC="Music"
+PLG_SYSTEM_OPENGRAPH_TYPE_PRODUCT="Product"
+PLG_SYSTEM_OPENGRAPH_TYPE_PROFILE="Profile"
+PLG_SYSTEM_OPENGRAPH_TYPE_VIDEO="Video"
+PLG_SYSTEM_OPENGRAPH_TYPE_WEBSITE="Website"
+PLG_SYSTEM_OPENGRAPH_USE_DEFAULT="Use Default"

plugins/system/opengraph/language/en-GB/plg_system_opengraph.sys.ini

@@ -0,0 +1,13 @@
+; Open Graph Plugin System Language File
+; Copyright (C) 2025 Open Source Matters, Inc.
+; License GNU General Public License version 2 or later
+; Plugin Name and Description for Extension Manager
+PLG_SYSTEM_OPENGRAPH="System - Open Graph"
+PLG_SYSTEM_OPENGRAPH_DESCRIPTION="Automatic Open Graph tag generation plugin for Joomla 6.x with hierarchical metadata override system. Improves social media sharing with intelligent fallback mechanisms."
+; Installation Messages
+PLG_SYSTEM_OPENGRAPH_INSTALL_SUCCESS="Open Graph Plugin installed successfully!"
+PLG_SYSTEM_OPENGRAPH_UPDATE_SUCCESS="Open Graph Plugin updated successfully!"
+PLG_SYSTEM_OPENGRAPH_UNINSTALL_SUCCESS="Open Graph Plugin uninstalled successfully!"
+; Custom Fields Group
+PLG_SYSTEM_OPENGRAPH_FIELDS_GROUP="Open Graph Metadata"
+PLG_SYSTEM_OPENGRAPH_FIELDS_GROUP_DESC="Custom fields for Open Graph metadata configuration"