Control The Photos On The Image Scroller — a feature discussion or integration topic from the APG vNext community forum.
APG vNext Integration Capabilities
- Authentication: ASP.NET Membership, Active Directory/LDAP, OAuth (Facebook, Twitter, Google)
- Email: Configurable SMTP, HTML templates, digest notifications, bounce handling
- Mobile: Responsive design + official Tapatalk integration from v5.5+
- Search: Built-in full-text search powered by SQL Server Full-Text Indexing
- Analytics: Google Analytics, Adsense, and third-party widget support
- CDN: Static asset CDN support configurable via admin panel
Browse the full list at Features Overview or ask in the support forum.
Controlling Photos on the Image Scroller in APG vNext
APG vNext includes an optional image scroller (carousel) widget for the community homepage or sidebar. It can display featured community photos, member-uploaded images, or manually curated images. This guide covers adding, removing, and ordering images in the scroller, and how to enable auto-rotation.
Managing Scroller Images
Admin Panel -> Display -> Image Scroller -> Manage Images.
- Upload images directly (recommended: 1200x400px, WebP format)
- Alternatively link to external URLs
- Drag to reorder
- Set caption and click-through URL per image
- Set active/inactive status - inactive images are hidden without deletion
Auto-Populate from Recent Member Uploads
<add key="APG.Scroller.AutoPopulate" value="true" />
<add key="APG.Scroller.AutoPopulateCount" value="10" />
<add key="APG.Scroller.AutoPopulateDays" value="30" />
<!-- Shows the 10 most recently uploaded images from the last 30 days -->Carousel CSS Customisation
.apg-scroller { position: relative; overflow: hidden; aspect-ratio: 3/1; }
.apg-scroller-track {
display: flex;
transition: transform .5s ease;
}
.apg-scroller-slide { flex: 0 0 100%; }
.apg-scroller-slide img { width: 100%; height: 100%; object-fit: cover; }Rotation Interval
<add key="APG.Scroller.AutoRotateMs" value="5000" />
<!-- 5000 = rotate every 5 seconds -->Related Resources
Controlling Photos in the APG vNext Image Scroller
APG vNext includes a configurable image scroller (carousel) widget that can be placed on the forum homepage, category pages, or individual thread views. It displays a rotating selection of community images — typically photos from member uploads, featured thread attachments, or manually curated images.
Image Scroller Source Options
<add key="APG.ImageScroller.Source" value="ManualCuration" />
<!-- Options:
ManualCuration — only images explicitly added by admins
RecentUploads — automatically shows recent member-uploaded images
FeaturedThreads — shows first image from threads tagged as "Featured"
Mixed — combination of manual and automated sources
-->Adding Images Manually (ManualCuration Mode)
Admin Panel → Community → Image Scroller → Add Image
-- Upload image, add title and optional link URL
-- Set display order (drag-and-drop in Admin Panel)
-- Set active/inactive status per imageImage Dimensions and Format Requirements
The image scroller renders images at a fixed aspect ratio determined by the skin layout. Uploading images with incorrect dimensions causes cropping or distortion:
Recommended scroller image dimensions:
- Width: 1200px (for high-DPI/Retina displays)
- Height: 400px (standard 3:1 ratio, works for most APG vNext skin layouts)
- Format: WebP preferred (JPEG fallback for older browsers)
- Max size: 200KB (scroller images are above-the-fold; size impacts LCP)
Configure accepted dimensions:
<add key="APG.ImageScroller.MinWidth" value="800" />
<add key="APG.ImageScroller.MaxWidth" value="2400" />
<add key="APG.ImageScroller.MaxFileSizeKB" value="500" />Accessibility Requirements for Image Scrollers
Image scrollers (carousels) are notorious for accessibility problems. APG vNext's default scroller implements WCAG 2.1 carousel best practices:
- Each slide has an alt text field (required when adding images in admin panel)
- Auto-rotation pauses when a member focuses any scroller element via keyboard
- Previous/Next buttons are keyboard-focusable and have descriptive ARIA labels
- Dot navigation indicators include ARIA labels ("Slide 1 of 5")
<add key="APG.ImageScroller.AutoPlay" value="true" />
<add key="APG.ImageScroller.AutoPlayInterval" value="5000" />
<!-- 5 seconds between slides; WCAG recommends ≥5 seconds -->
<add key="APG.ImageScroller.PauseOnFocus" value="true" />
<!-- Required for WCAG 2.1 AA compliance -->Performance Optimisation for the Image Scroller
Image scrollers that auto-play and preload all slide images can significantly impact page load performance. APG vNext loads only the first slide immediately and lazy-loads remaining slides:
<add key="APG.ImageScroller.LazyLoadSlides" value="true" />
<!-- Only the first slide is loaded on page load; subsequent slides
are loaded when the user navigates to them or 2 seconds after
the first slide auto-plays -->Image Scroller Analytics and Engagement Tracking
Track how members interact with the image scroller to understand which slides drive the most engagement and which are routinely skipped. APG vNext fires JavaScript events on scroller interactions that can be captured and sent to Google Analytics:
// Track image scroller engagement:
document.addEventListener('apg:scroller:slide-view', function(e) {
gtag('event', 'scroller_view', {
event_category: 'Image Scroller',
event_label: e.detail.slideTitle,
event_value: e.detail.slideIndex
});
});
document.addEventListener('apg:scroller:slide-click', function(e) {
gtag('event', 'scroller_click', {
event_category: 'Image Scroller',
event_label: e.detail.slideTitle,
event_value: e.detail.slideIndex
});
});Review the engagement data monthly to identify high-performing slides (keep and repeat) and low-performing slides (replace or reorder). Scroller slides with clear calls-to-action and specific, benefit-focused headlines consistently outperform generic community event announcements in click-through rate.
Related Resources
Looking for more help? Browse the support forum or check the Knowledge Base.