🔒 Locticians — INTERNAL ONLY (Restricted)

Document type: Architecture & Ops Notes + Changelog + Dev Guide Scope: All UX/ads/widgets/profile-header work completed in this thread Audience: Locticians engineering, design, content ops, and ad-ops Last updated: now Platform: Brilliant Directories (BD)

1) Executive Summary

We modernized and standardized Locticians’ sidebar/cards and profile header on BD:

  • Smart Picks / Related Content (rotating card): robust image pipeline, auto-rotating single-card carousel, copy-to-clipboard, headline pool, and title ellipses to keep sidebars stable.
  • Sponsored Ads (AdLuxe) Rotator: responsive 300×250 card with arrows, intersection-aware pause, touch swipe, and optional Google AdSense interleaving.
  • “Handpicked/Smart Picks” naming: branded to “Locticians” (replacing “CrownThrive”).
  • Author/Posted By Sidebar Widget: modern card design, consistent button sizes, verified chip, larger avatar, brand-tinted ring/shadow, landscape-friendly button layout.
  • Profile Header (main profile page): fully redesigned but compliant with BD logic (reviews, phone, contact modal), brand-driven theme with CTA precedence (ThriveSeat → ThrivePeer → CrownThriveU → CrownRewards → fallback Get Matched).
  • Performance & reliability: minimal layout shift, lazy assets, safe fallbacks, intersection observers, and deduped script loader.

2) Changes & Why (Design Rationale)

A. Related Content / “Smart Picks”

Why: Old widget caused image failures and mobile layout jumps. What we did:

  • Robust image resolver across
    • Prefer explicit image fields; else derive from oEmbed (video thumb) for posts; else fetch first portfolio image; else BD thumbnail helper; final fallback to placeholder.
  • Rotating single-card carousel (replaces 3-up grids in tight sidebars).
  • Auto headline pool with emoji; “Locticians” branding enforced.
  • Title ellipses to prevent sidebar reflow (“…” truncation).
  • Copy/Open actions and IntersectionObserver to pause off-screen.

Impact: Higher reliability (no empty frames), less CLS, more taps from mobile.

B. Sponsored Ads (AdLuxe) Rotator + AdSense Interleave

Why: Fill sidebar inventory, keep brand-safe, and respect viewability. What we did:

  • Card shell (rounded, shadow, disclosure).
  • 300×250 frame with aspect-ratio fallback for non-supporting browsers.
  • Prev/Next arrows, swipe gestures, auto-rotate pause on hover/off-screen.
  • Interleave AdSense slots by turning each “slide” into a generic container we can populate with either AdLuxe (
  • One-time loader for each network; deduping via a mini loader utility.

Important AdSense notes (ops):

  • Only one
  • After slide injection, call
  • AdSense may delay serving on low-content/test pages or if policy flags exist; the rotator gracefully shows network inventory that’s available (AdLuxe first-party fills guarantee continuity).

C. “Handpicked by Locticians” copy

Why: Consistent brand voice. Change: Replace “CrownThrive” with Locticians in headline/labels.

D. Author/Posted By Sidebar Card

Why: Old markup; inconsistent buttons; tiny avatar; no verification affordance. What we did:

  • Bigger avatar with brand-tinted ring and shadow, same as profile header.
  • Verified chip near the name.
  • Buttons (Open/Copy/View Listing/Contact) unify styling and landscape two-up behavior (avoid 100% width on rotate).
  • Posted by copy hierarchy cleaned; spacing fixes.

E. Profile Header (BD Page)

Why: The primary “hero” block needed: clarity, brand feel, and CTA logic. What we did:

  • Brand color system determined by CTA precedence:
  • Primary CTA adopts brand color; avatar ring/shadow & verified chip auto-tint to the same brand.
  • Contact Modal (BD widget) preserved; Reviews logic preserved; Phone logic preserved with add-on fallbacks (click_to_phone/user statistics).
  • Buttons layout: stacked on phones, tidy 2-up grid on desktop/landscape.
  • Accessibility: icon labels, large tap targets, semantic headings.

3) Release Notes / Changelog (Developer-Facing)

v3 – Profile Header (current)

  • New component:
  • CTA precedence + brand auto-tinting functions added:
  • Verified chip background/border derived from brand.
  • Contact modal still loaded with
  • Location line derives city/state/zip or country.

v3 – Author Sidebar (current)

  • Avatar enlarged; ring/shadow brand-tinted.
  • Buttons made responsive in landscape via flex; no 100% width on rotate.
  • “Posted by” spacing fixed; verified pill added.

v3 – Sponsored Ad Card (current)

  • adlux-card
  • Swipe support + IO pause.
  • AdSense interleave support (see Ops Guide below).

v3 – Smart Picks / Related Content (current)

  • Unified resolver for images; safe fallbacks.
  • Single-card carousel (
  • Invisible “hint” preloaders (hidden

4) Code Entry Points (BD Widgets)

All code delivered earlier is production-ready and self-contained.

  • Related Content Rotator: “Bootstrap Theme – Display – Related Posts by Category (Rotator + Reliable Images)” Contains SQL variants, oEmbed thumb, portfolio fetch, carousel HTML/CSS/JS, headline pool, ellipsis logic.
  • Sponsored Ad Rotator: “AdLuxe Rotating Sidebar (300×250) + AdSense Interleave” Card shell, rotator, IO pause, arrows, swipe; note the single include for each network script.
  • Author Sidebar (modern card): replace existing “author-snapshot” widget with the new card. Matches profile header styles; uses BD Contact Member Modal if allowed.
  • Profile Header: “Bootstrap Theme – Member Profile – Header” (replacement). All BD permission logic retained; brand-theme system + CTA precedence implemented.

5) Ops / Implementation Guide

A. Smart Picks / Related Content

  1. Paste the provided PHP widget in BD, keep
  2. If titles overflow sidebars, adjust
  3. You can expand

Config toggles:

  • limitLeft
  • referrerpolicy="no-referrer"

B. Sponsored Ad Rotator + AdSense

One-time includes per page (critical): 

<!-- AdLuxe -->
<script data-cfasync="false" async src="https://media.aso1.net/js/code.min.js"></script>

<!-- AdSense: include exactly once sitewide -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4382367682544706" crossorigin="anonymous"></script>

Interleaving strategy (simple):

  • Keep AdLuxe as slides 1,3,5… and AdSense as slides 2,4,6… (or vice versa).
  • When a slide becomes active the first time, if it contains
  • Do not push on hidden slides repeatedly (AdSense rejects duplicate calls).

Troubleshooting AdSense blank:

  • New page/slot may take time; policy/traffic thresholds apply.
  • Ensure no duplicate
  • Ensure slot IDs:
    • 3266262249
    • 8155078100
    • 1450068951
    • 8818241326

C. Profile Header + Author Sidebar

CTA precedence logic (data fields expected on $user):

  • thrive_booking_id
  • thrivepeer_key
  • crownthriveu_instructor_key
  • crownrewards_card_id
  • Fallback → Get Matched (internal form with UTM parameters)

Verified:

  • If

Buttons Layout:

  • Phone portrait: full-width stack (good tap targets).
  • Desktop or phone landscape: 2-up flex (

Avatar:

  • Uses BD photo; if unavailable, respects your existing image pipeline fallback rules.
  • Ring/shadow tinted to current brand; if fallback, uses slate.

6) Accessibility & UX Standards

  • Minimum 44×44px tap targets for all major buttons.
  • Visible focus via brand-darkened background on hover/focus.
  • Alt text for member avatar = member full name (and role via copy).
  • Aria labels for rotators (“Sponsored Ads”, “Next ad”, “Previous ad”).
  • “Sponsored Ad” disclosure always visible above the ad unit.

7) Performance & Stability

  • Lazy images (
  • No layout thrash: aspect-ratio boxes used; fallback padding hack when unsupported.
  • IntersectionObserver to pause rotations off-screen (saves CPU/battery).
  • Mini script loader prevents duplicate scripts in

8) Security & Privacy

  • rel="nofollow noopener"
  • referrerpolicy="no-referrer"
  • Ads scripts loaded from official endpoints; keep exactly one AdSense include.

9) QA Checklist

Visual

  • [ ] Avatar ring/shadow matches brand (ThriveSeat green, etc.).
  • [ ] Verified chip appears only when
  • [ ] Buttons become two-up in landscape/desktop; stacked on portrait.
  • [ ] Title lines on Smart Picks truncate with ellipsis; no sidebar shift.

Functionality

  • [ ] Primary CTA resolves per precedence.
  • [ ] Copy link shows “Copied!” feedback and resets.
  • [ ] Rotators stop when off-screen and on hover.

Ads

  • [ ] Only one
  • [ ] AdLuxe zones render (108418, 154758, …).
  • [ ] AdSense slides push only once when first visible.

BD Logic

  • [ ] Contact modal opens only when allowed (
  • [ ] Phone number visible only when
  • [ ] Reviews link/Stars rendered only when review category enabled.

10) Rollout & Fallback

  1. Stage on a hidden BD test page.
  2. Smoke-test on mobile portrait/landscape, desktop Chromium & Safari.
  3. AdSense: verify serving; if no fill → verify policy & inventory before live.
  4. Deploy: Replace widgets in BD.
  5. Monitoring: Watch Core Web Vitals (CLS/LCP), AdSense/AdLuxe RPM, CTA clickthrough.

Rollback:

  • Keep previous widget revisions; BD lets you revert quickly.
  • If ads fail, switch all slides to AdLuxe temporarily (comment AdSense slides).

11) Copy/Brand Guidance

  • Headings: emoji + short imperative (“✨ Smart Picks by Locticians”).
  • Buttons: verbs first (“Book on ThriveSeat”, “Send Chat Message”).
  • Tone: concise, welcoming; no jargon in end-user surfaces.

12) Future Backlog (Optional)

  • Add “Likes”/badges as small pills next to verified chip (consistent with brand chip style).
  • Add UTMs to all external CTAs for funnel attribution.
  • Add tiny skeleton loader for rotator images to reduce perceived wait.
  • QoL: remember last visible ad index per sessionStorage for variety.

13) Code Style Contracts (for teammates)

  • New CSS under unique prefixes:
    • Profile header:
    • Ad rotator:
    • Related:
  • Keep theme derivation pure-PHP (no client-side computation of brand) to avoid FOUC.
  • Never include AdSense script more than once per page.
  • When adjusting colors, modify only the

14) Known Limitations

  • If a user has multiple brand keys, precedence chooses one visual theme globally for the header.
  • Some older mobile browsers without
  • AdSense may delay serving if page lacks enough textual content above fold; this is an AdSense policy behavior, not a code issue.

15) Snippets You’ll Reuse

Brand theme map (single source of truth): 

$themes = [
  'thriveseat'   => ['hex'=>'#115E3B','icon'=>'fa-calendar-check-o','tagline'=>'Fastest way to lock a time.'],
  'thrivepeer'   => ['hex'=>'#0EA5E9','icon'=>'fa-handshake-o','tagline'=>'Mentoring & sessions.'],
  'crownthriveu' => ['hex'=>'#2563EB','icon'=>'fa-graduation-cap','tagline'=>'Courses & training.'],
  'crownrewards' => ['hex'=>'#F59E0B','icon'=>'fa-gift','tagline'=>'Earn rewards on visits.'],
  'fallback'     => ['hex'=>'#111827','icon'=>'fa-magic','tagline'=>'We’ll match you in minutes.']
];

AdSense fill on first view (inside rotator): 

const adSeen = new WeakSet();
function tryFillAdSense(el){
  if (!el || adSeen.has(el)) return;
  if (el.querySelector('ins.adsbygoogle')) {
    (window.adsbygoogle = window.adsbygoogle || []).push({});
    adSeen.add(el);
  }
}

16) Final Notes

  • All widgets are self-contained and require no global CSS changes.
  • We intentionally mirror the avatar style between sidebar and header to reinforce brand identity and member trust.
  • All BD permission gates were preserved; we added only visual and behavioral improvements.

Was this article helpful?

Master Changelog — Locticians Enhancements (Aug–Sep 2025)