Help Center

Find answers or browse our knowledge base.

How to Install Auto-Alt & Auto-Title (A11y + SEO) for Sngine

📦 STEP 1: Upload the JavaScript File

Upload auto-alt.js to:

/includes/assets/js/core/auto-alt.js

📝 STEP 2: Edit Your Footer Template

Open: content/themes/default/templates/_footer.tpl

Add this line BEFORE the closing tag:

✅ STEP 3: Clear Cache (if you use caching)

If you have caching enabled, clear it.

🧪 STEP 4: Test

Test Images:

  1. Visit any page on your site
  2. Right-click an image
  3. Inspect element
  4. Look for the alt="..." attribute

Test Background Images:

  1. Right-click a blog thumbnail or profile picture div
  2. Inspect element
  3. Look for role="img" and aria-label="..."

Test Links:

  1. Hover over any link
  2. You should see a tooltip with the title
  3. Or inspect and look for title="..."

Test H2/H3 to H1 Conversion (SEO):

  1. Test listing pages (H2 → H1):
    • Visit /blogs or /pages or /groups
    • Right-click the page title (e.g., "Blogs")
    • Inspect elementShould see:
  2. Test blog post view (H3 → H1):
    • Visit any individual blog post (e.g., /blogs/123/my-blog-title)
    • Right-click the blog post title
    • Inspect element

  3. Visual styling stays the same!

🎯 What It Does

Automatically adds alt and title attributes:

Image Type Alt Text Example
User avatar (with name) John's profile picture
User avatar (no name) User profile picture
Cover photo (with name) Jane's cover photo
Cover photo (no name) Cover photo
Blog image (with title) Image from: My Blog Title
Blog image (no title) Blog post image
Post photo Shared photo
Product image Product image
Page/Group logo ScriptsTribe logo
Icons/Decorative (empty - proper accessibility)
Generic fallback Image

✅ Background Images (background-image:url())

Adds role="img" and aria-label for screen readers:

  • Blog thumbnails in listings
  • Profile pictures in divs
  • Cover photos in divs
  • All CSS background images

Adds title attributes to ALL links:

  • Uses link text if available
  • Smart context detection (profile, blog, post, etc.)
  • Examples:
    • Profile link: Visit John's profile
    • Blog link: Read: My Blog Title
    • Post link: View post
    • Page link: Visit ScriptsTribe

✅ SEO: H2/H3 to H1 Conversion

Automatically converts page headers for proper SEO:

  • Page titles (H2) become h1
  • Blog post titles (H3) become h1
  • Keeps same styling (with class="h2" or class="mb10 h3")
  • Only converts the main page/content title
  • Works for:
    • Listing pages: Blogs, Pages, Groups, Events, Forums, Market, Jobs, Courses, Offers, Games, Movies, Contact Us
    • Blog view pages: Individual blog post titles
  • Each page should have ONE H1 (Google requirement)

🎨 Customization

To change the fallback text, edit auto-alt.js lines 12-27:

 fallbacks: {
      avatar: {
        withName: "{name}'s profile picture",
        default: "User profile picture"
      },
      cover: {
        withName: "{name}'s cover photo",
        default: "Cover photo"
      },
      blog: {
        withTitle: "Image from: {title}",
        default: "Blog post image"
      },
      post: "Shared photo",
      product: "Product image",
      pageAvatar: "{name} logo",
      groupAvatar: "{name} logo",
      eventCover: "Event cover image",
      decorative: "", // Empty for accessibility
      generic: "Image"
    },
    linkFallbacks: {
      profile: "Visit {name}'s profile",
      blog: "Read: {title}",
      post: "View post",
      page: "Visit {name}",
      group: "Visit {name}",
      event: "View event: {name}",
      product: "View product",
      generic: "Click to view"

⚡ Performance

Zero server load - runs in browser onlyCached file - loads once, used everywhereFast execution - processes 100+ images/links in ~10-15msSmart detection - uses context clues from HTMLAccessibility compliant - follows WCAG guidelinesSEO optimized - converts H2 page titles to H1 for better Google ranking


🔧 Troubleshooting

Q: Images still have no alt text?

  • Check browser console for errors
  • Verify the file path is correct
  • Clear browser cache
  • Make sure you added the line to _footer.tpl

Q: Background images (in divs) have no accessibility?

  • Right-click → Inspect
  • Look for role="img" and aria-label="..."
  • These are for screen readers, not visible

Q: Links don't have titles?

  • Hover over a link to see the tooltip
  • Or right-click → Inspect → look for title="..."

Q: Can I disable it temporarily?

Just comment out the line in _footer.tpl:

Q: Does it work with AJAX-loaded content?

Yes! It uses MutationObserver to detect new images/links.

Q: How do I check if it's working?

  • Open browser console (F12)
  • Type: document.querySelectorAll('img[alt]').length
  • Should show number of images with alt text
  • Before script: lower number
  • After script: higher number

📧 Support

Built for Sngine by ScriptsTribe
Questions? Join our Facebook group or visit scriptstribe.com


📄 License

Free & Open Source

Created by ScriptsTribe for the Sngine community.
Use, modify, and share freely.

Was this answer helpful?
You must login to vote.
0 found this helpful, 0 did not
Thank you for your feedback!

Related Articles