From d738d75fadf0574328c7d0cdbd256b29c828a5c3 Mon Sep 17 00:00:00 2001 From: Jonathan Miller Date: Thu, 28 May 2026 22:55:54 -0500 Subject: [PATCH] feat: add WYSIWYG content editor with card display on hero MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add heroContent param with Joomla editor field for rich HTML input - Add showCard toggle to wrap content in a styled card (white bg, shadow, rounded) - Card CSS: semi-transparent white, 8px radius, centered, max 700px - Remove old $module->content fallback — content now comes from params - Language strings for en-GB and en-US (both .ini and .sys.ini) Authored-by: Moko Consulting Co-Authored-By: Claude Opus 4.6 (1M context) --- src/css/mod_mokojoomhero.css | 25 +++++++++++++++++++++ src/language/en-GB/mod_mokojoomhero.ini | 7 ++++++ src/language/en-GB/mod_mokojoomhero.sys.ini | 7 ++++++ src/language/en-US/mod_mokojoomhero.ini | 7 ++++++ src/language/en-US/mod_mokojoomhero.sys.ini | 7 ++++++ src/mod_mokojoomhero.php | 2 ++ src/mod_mokojoomhero.xml | 24 ++++++++++++++++++++ src/tmpl/default.php | 14 ++++++++---- 8 files changed, 89 insertions(+), 4 deletions(-) diff --git a/src/css/mod_mokojoomhero.css b/src/css/mod_mokojoomhero.css index fde141a..7bd8f67 100644 --- a/src/css/mod_mokojoomhero.css +++ b/src/css/mod_mokojoomhero.css @@ -85,6 +85,31 @@ margin-bottom: 0; } +/* ============================================================ + Card + ============================================================ */ +.mokojoomhero__card { + background: rgba(255, 255, 255, 0.95); + color: #333; + border-radius: 8px; + padding: 2rem 2.5rem; + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15); + max-width: 700px; + margin: 0 auto; +} + +.mokojoomhero__card h1, +.mokojoomhero__card h2, +.mokojoomhero__card h3 { + color: #222; + margin-top: 0; +} + +.mokojoomhero__card a { + color: inherit; + text-decoration: underline; +} + /* ============================================================ Responsive ============================================================ */ diff --git a/src/language/en-GB/mod_mokojoomhero.ini b/src/language/en-GB/mod_mokojoomhero.ini index 4333330..fb6ad4d 100644 --- a/src/language/en-GB/mod_mokojoomhero.ini +++ b/src/language/en-GB/mod_mokojoomhero.ini @@ -11,6 +11,13 @@ MOD_MOKOJOOMHERO_NO_CONTENT="Add content to this module to display it over the hero image." +; Content fieldset +MOD_MOKOJOOMHERO_FIELDSET_CONTENT="Hero Content" +MOD_MOKOJOOMHERO_CONTENT_LABEL="Content" +MOD_MOKOJOOMHERO_CONTENT_DESC="HTML content displayed on the hero. Use the editor to add headings, text, buttons, or any HTML." +MOD_MOKOJOOMHERO_SHOW_CARD_LABEL="Show Card" +MOD_MOKOJOOMHERO_SHOW_CARD_DESC="Wrap the content in a card with a white background and shadow." + ; Hero mode MOD_MOKOJOOMHERO_MODE_LABEL="Hero Mode" MOD_MOKOJOOMHERO_MODE_DESC="Choose between a slideshow of images or a background video." diff --git a/src/language/en-GB/mod_mokojoomhero.sys.ini b/src/language/en-GB/mod_mokojoomhero.sys.ini index 0ead98c..8e0d34a 100644 --- a/src/language/en-GB/mod_mokojoomhero.sys.ini +++ b/src/language/en-GB/mod_mokojoomhero.sys.ini @@ -12,6 +12,13 @@ MOD_MOKOJOOMHERO="Module - MokoJoomHero" MOD_MOKOJOOMHERO_DESCRIPTION="Displays a random hero image slideshow or background video with content overlaid. Designed for MokoOnyx template. By Moko Consulting." +; Content fieldset +MOD_MOKOJOOMHERO_FIELDSET_CONTENT="Hero Content" +MOD_MOKOJOOMHERO_CONTENT_LABEL="Content" +MOD_MOKOJOOMHERO_CONTENT_DESC="HTML content displayed on the hero. Use the editor to add headings, text, buttons, or any HTML." +MOD_MOKOJOOMHERO_SHOW_CARD_LABEL="Show Card" +MOD_MOKOJOOMHERO_SHOW_CARD_DESC="Wrap the content in a card with a white background and shadow." + ; Hero mode MOD_MOKOJOOMHERO_MODE_LABEL="Hero Mode" MOD_MOKOJOOMHERO_MODE_DESC="Choose between a slideshow of images or a background video." diff --git a/src/language/en-US/mod_mokojoomhero.ini b/src/language/en-US/mod_mokojoomhero.ini index 23c511e..3334fa4 100644 --- a/src/language/en-US/mod_mokojoomhero.ini +++ b/src/language/en-US/mod_mokojoomhero.ini @@ -11,6 +11,13 @@ MOD_MOKOJOOMHERO_NO_CONTENT="Add content to this module to display it over the hero image." +; Content fieldset +MOD_MOKOJOOMHERO_FIELDSET_CONTENT="Hero Content" +MOD_MOKOJOOMHERO_CONTENT_LABEL="Content" +MOD_MOKOJOOMHERO_CONTENT_DESC="HTML content displayed on the hero. Use the editor to add headings, text, buttons, or any HTML." +MOD_MOKOJOOMHERO_SHOW_CARD_LABEL="Show Card" +MOD_MOKOJOOMHERO_SHOW_CARD_DESC="Wrap the content in a card with a white background and shadow." + ; Hero mode MOD_MOKOJOOMHERO_MODE_LABEL="Hero Mode" MOD_MOKOJOOMHERO_MODE_DESC="Choose between a slideshow of images or a background video." diff --git a/src/language/en-US/mod_mokojoomhero.sys.ini b/src/language/en-US/mod_mokojoomhero.sys.ini index ed2c4b8..52cc2b9 100644 --- a/src/language/en-US/mod_mokojoomhero.sys.ini +++ b/src/language/en-US/mod_mokojoomhero.sys.ini @@ -12,6 +12,13 @@ MOD_MOKOJOOMHERO="Module - MokoJoomHero" MOD_MOKOJOOMHERO_DESCRIPTION="Displays a random hero image slideshow or background video with content overlaid. Designed for MokoOnyx template. By Moko Consulting." +; Content fieldset +MOD_MOKOJOOMHERO_FIELDSET_CONTENT="Hero Content" +MOD_MOKOJOOMHERO_CONTENT_LABEL="Content" +MOD_MOKOJOOMHERO_CONTENT_DESC="HTML content displayed on the hero. Use the editor to add headings, text, buttons, or any HTML." +MOD_MOKOJOOMHERO_SHOW_CARD_LABEL="Show Card" +MOD_MOKOJOOMHERO_SHOW_CARD_DESC="Wrap the content in a card with a white background and shadow." + ; Hero mode MOD_MOKOJOOMHERO_MODE_LABEL="Hero Mode" MOD_MOKOJOOMHERO_MODE_DESC="Choose between a slideshow of images or a background video." diff --git a/src/mod_mokojoomhero.php b/src/mod_mokojoomhero.php index e5d632e..6078f8a 100644 --- a/src/mod_mokojoomhero.php +++ b/src/mod_mokojoomhero.php @@ -33,6 +33,8 @@ $overlayColor = $params->get('overlayColor', '#000000'); $overlayOpacity = (float) $params->get('overlayOpacity', 0.5); $textAlign = $params->get('textAlign', 'center'); $textColor = $params->get('textColor', '#ffffff'); +$heroContent = $params->get('heroContent', ''); +$showCard = (bool) $params->get('showCard', 1); // Collect hero images $heroImages = []; diff --git a/src/mod_mokojoomhero.xml b/src/mod_mokojoomhero.xml index 6705652..e518b88 100644 --- a/src/mod_mokojoomhero.xml +++ b/src/mod_mokojoomhero.xml @@ -102,6 +102,30 @@ filter="string" /> +
+ + + + + +
diff --git a/src/tmpl/default.php b/src/tmpl/default.php index 855d0f1..eeb53db 100644 --- a/src/tmpl/default.php +++ b/src/tmpl/default.php @@ -23,6 +23,8 @@ use Joomla\CMS\Language\Text; /** @var float $overlayOpacity */ /** @var string $textAlign */ /** @var string $textColor */ +/** @var string $heroContent */ +/** @var bool $showCard */ /** @var string $content */ $moduleId = 'mod-mokojoomhero-' . $module->id; @@ -62,10 +64,14 @@ $heightAttr = htmlspecialchars($heroHeight, ENT_QUOTES, 'UTF-8');
- - - -

+ + +
+ +
+ + +