Meeting #8

# Meeting Resume: YOOtheme Pro User Group Session

**Date:** Post-Summer Break / Pre-Winter Session
**Topic:** Q&A, Tips & Tricks, News, and Upcoming Events

## 1. Announcements & News
*   **Joomla World Conference:** Taking place in Berlin in mid-October.
    *   Attendees encouraged to secure tickets while availability remains.
    *   **YOOtheme** will be present, likely with major announcements, new feature releases, or roadmap updates.
    *   The group plans to host a session in **November or December** to discuss these announcements for those unable to attend in person.
*   **Upcoming Conferences in the Netherlands:**
    *   **Breda:** A one-day unconference in two weeks (program created on the day).
    *   **Utrecht:** Regular Joomla Days in January.
*   **Next Meeting:** Scheduled for one month from now, featuring **Thomas** presenting on the **MCP Server** for YOOtheme. This tool allows AI models to interact with YOOtheme as a tool/handbook. Marc successfully tested it in 5 minutes and coupled it with Claude.

## 2. Technical Discussions & Solutions

### A. Accessibility & Image Alt Text
*   **Issue:** Users noted that ticking the "Descriptive Image" box in YOOtheme Pro does not automatically populate the `alt` text field when pulling intro/full text images.
*   **Current Workaround:** Manually setting the article title as the image description/alt text.
*   **Action Item:** The group has requested that YOOtheme address this in the next month to ensure better accessibility compliance.

### B. "Back to Top" Element Positioning
*   **Issue:** The default "Back to Top" element in YOOtheme Pro is placed within the content flow (e.g., footer), affecting margins/padding, rather than being fixed to the viewport.
*   **Solutions Discussed:**
    *   **CSS Override:** Adding custom CSS (`position: fixed`) to force the element to the bottom right.
    *   **Element Export/Import:** Creating a custom version with the correct positioning and saving it as a reusable element to import into projects.
    *   **Besides:** Placing the element in a dedicated section with `padding-top` and `padding-bottom` set to `none` to prevent layout shifts.

### C. Blog Page Configuration & Custom Fields
*   **Challenge:** Sorting blog views by custom fields (e.g., event dates) is not natively supported in standard Joomla Blog menu items.
*   **Advanced Solution (Demonstrated):**
    *   Instead of a standard "Blog" menu item, start with a **Single Article** menu item.
    *   Configure the section to the specific **Category** and the multiple item source to **Articles**.
    *   **Result:** This unlocks YOOtheme's full dynamic content capabilities, allowing sorting by custom fields and full control over layout.
*   **Pagination Note:** Pagination settings must be configured in the **Menu Item** settings, not within the dynamic content section, to function correctly.
*   **Layout Variants:** It is possible to create separate layouts for the first page (e.g., highlighting a featured article) and subsequent pages.

### D. Dynamic Social Links & Email Cloaking
*   **Dynamic Socials:** A tip was shared on connecting social media icons (Instagram, Facebook, etc.) dynamically to custom fields. This allows clients to update links in one backend location, which propagates everywhere the element is used.
*   **Email Cloaking Issues:**
    *   Joomla's native email cloaking plugin can break the styling of buttons containing email addresses.
    *   **Workarounds:** Disable cloaking for the site, use the "Add" text instead of the raw email in buttons, or use third-party extensions like **Regular Labs Email Protector** (which works in modules and content).
    *   **Observation:** Cloaking sometimes leaves visible source code tags if not configured correctly.

### E. Adding Custom Icons
*   **Problem:** YOOtheme's native icon set is limited, and purchasing ZOOlanders Essentials for example for just a few icons is often unnecessary.
*   **Solution:** Register custom SVG icons directly via the **YOOtheme Pro Settings > Scripts** tab.
    *   Use `UIkit.icon.add()` to register the SVG code with a custom keyword (e.g., `blabla`).
    *   This allows the icon to be used anywhere in the builder by typing the keyword, without needing external files.
    *   **Alternative:** Enable **FontAwesome** in YOOtheme settings for quick access to a vast library of icons and then put the HTML anywhere

### F. Parallax Effects
*   **Complexity:** Setting up complex parallax effects (blur, scaling, rotation on scroll) is difficult and often requires manual calculation or custom CSS/JS.
*   **Future Potential:** The group discussed that **AI/MCP Servers** could be ideal for generating the complex code required for these effects based on natural language prompts.
*   **Examples:** Custom timeline elements with scaling images and rotating background circles (e.g., the "Circle" template) were cited as advanced use cases.

## 3. Future Outlook: AI Integration
*   **Speculation:** There is anticipation regarding YOOtheme's upcoming AI announcements at Joomla World Conference.
*   **Consensus:** The community hopes for an **MCP Server** integration rather than a major structural overhaul (like a "YOOtheme Pro 6" that breaks backward compatibility).
*   **Perspective:** While AI can assist with complex code (like parallax), many users feel that manually configuring YOOtheme's dynamic sources remains faster and more consistent for standard layouts than prompting an AI.

## 4. Closing
*   **Next Session:** Focus on the **MCP Server** for YOOtheme at the October session
*   **Events:** Reminder to attend the conferences in Breda (Sept), Utrecht (Jan), and Berlin (Oct)
*   **Feedback:** Participants are encouraged to bring questions and tips to the next session