內容簡介
Random Image Block for Block Editor 是一款輕量級的 Gutenberg 外掛，能夠輕鬆顯示來自 WordPress 媒體庫的隨機圖片。適合用於英雄橫幅、旋轉標題背景、動態作品集展示等，讓網站在每次加載時都保持新鮮感。
【主要功能】
• 媒體庫整合，輕鬆選擇圖片
• 響應式圖片對齊，適應各種螢幕
• 自訂連結選項，靈活連結圖片
• 實時側邊欄預覽，方便管理圖片
• 無需編碼，直觀的控制面板設置
外掛標籤
開發者團隊
② 後台搜尋「Random Image Block for Block Editor」→ 直接安裝（推薦）
原文外掛簡介
Random Image Block for Block Editor is a lightweight, high-performance Gutenberg block that lets you effortlessly display random images from your WordPress media library. Perfect for hero banners, rotating header backgrounds, dynamic portfolio showcases, sponsor logos, daily featured photos, and interactive image galleries.
Keep your website fresh and engaging on every page load or automatically rotate images at custom time intervals with smooth shuffle animations, interactive hover effects, advanced lightbox modals, and responsive layout controls.
Live Demo & Documentation | Upgrade to Pro | Support & Contact
🌟 Why Choose Random Image Block?
Boost Visitor Engagement: Dynamic content keeps your landing pages, blog posts, and sidebar widgets feeling lively and modern.
SEO & Performance Optimized: Built with lightweight Vanilla JavaScript and optimized CSS. Supports native and progressive lazy loading for fast Core Web Vitals.
No Coding Required: Intuitive Gutenberg sidebar controls allow you to configure layouts, filters, animations, and conditions in seconds.
Responsive by Default: Granular controls for Desktop, Tablet, and Mobile devices ensure pixel-perfect presentation on every screen size.
🆓 Free Version Features
Media Library Integration: Pick any collection of images directly from your WordPress media library.
Responsive Image Alignment: Align images to the left, center, right, or full width.
Custom Link Options: Link images to their WordPress attachment page, a custom URL, or open in a new tab.
Live Sidebar Previews: Preview and manage your selected gallery images directly inside the block inspector.
Clean & Semantic Markup: Output clean HTML with standard WordPress block styling and accessibility attributes.
🚀 Pro Version Features & Highlights
Upgrade to Random Image Block Pro to unlock powerful display modes, animations, and enterprise-grade personalization tools:
1. 🔍 Advanced Lightbox Modal
Full-Featured Popup: Open images in a distraction-free, responsive lightbox overlay.
Zoom & Fullscreen: Built-in 2x zoom toggle and native browser fullscreen mode.
Captions & Navigation: Display image captions with next/previous navigation and keyboard arrow/Escape support.
2. 🖼️ Image Background Mode
Section & Hero Backgrounds: Transform any random image into a full-width background container.
Color Overlay & Opacity: Customize overlay colors and alpha transparency for optimal text readability.
Parallax Depth Effect: Optional smooth parallax scrolling background for modern hero banners.
3. 🔄 Shuffle Animations & Auto-Refresh
Seamless Transitions: Choose from smooth Fade, Slide, or Zoom shuffle transitions.
Custom Transition Duration: Fine-tune animation speed from 100ms to 2000ms.
Auto-Rotate Timer: Automatically cycle through random images every X seconds without requiring a page reload.
4. 🎯 Smart Conditional Display
User Role Targeting: Display specific images exclusively to logged-in users, logged-out guests, or specific WordPress roles (e.g. Administrator, Editor, Subscriber).
Time-Based Scheduling: Show different images during day, evening, or custom operating hours (e.g. 09:00 to 18:00).
Seasonal Personalization: Automatically switch image pools for Spring, Summer, Autumn, or Winter.
Date Range Campaigns: Set start and expiration dates for limited-time promotions, holiday campaigns, or flash sales.
5. ⚖️ Weighted Random & Exclusion Controls
Priority Probability (Weighting): Assign custom weights to individual images so key products or banners appear more frequently.
Image Exclusion: Temporarily hide or exclude specific images from the random pool without deleting them.
6. ✨ Interactive Image Hover Effects
Engaging Micro-Animations: Choose from Zoom In, Zoom Out, Pan, Rotate, Grayscale-to-Color Reveal, and Opacity change on mouse hover.
Hardware-Accelerated CSS: Ultra-smooth 60fps performance without sluggish JavaScript recalculations.
7. 🎨 Live CSS Image Filters
Real-Time Styling: Apply Grayscale, Blur, Brightness, Contrast, Saturation, and Hue-Rotate directly from the block editor.
One-Click Reset: Easily reset individual filters to default values.
8. 📝 Advanced Caption Styling & Positioning
Overlay or Below: Place captions underneath the image or overlay them directly on top with custom X/Y focal point coordinates.
Hover-Only Captions: Reveal captions smoothly when users hover over the image.
Typography & Styling: Control caption background color, opacity, text color, font size, border radius, and responsive padding.
9. 📐 Device-Specific Sizing & Shapes
Responsive Width & Height: Set separate width, height, and unit metrics (px, %, vh, rem) for Desktop, Tablet, and Mobile.
Object-Fit Control: Choose between cover, contain, fill, or scale-down to prevent image stretching.
Rounded Corners & Circle Shape: Customize border radius per corner or create 100% circular profile avatars and badges.
10. ⚡ Smart Caching & Sticky Mode
Sticky Mode (Session Persistence): Maintain the same randomly selected image for a user across multiple page visits using local storage.
Mobile bfcache Compatibility: Ensures reliable image randomization on mobile browsers and Back/Forward cache restores.
Lazy Loading: Progressive image loading with smooth fade-in to boost Google PageSpeed and Core Web Vitals scores.
💡 Common Use Cases
E-Commerce & WooCommerce: Display random promotional banners, seasonal sale graphics, or daily featured products.
Portfolios & Photography: Show rotating artwork, photography highlights, or design client showcases.
Testimonials & Quotes: Pair inspirational quotes with alternating author headshots or background graphics.
Sponsors & Partner Logos: Rotate verified sponsor logos and partner badges fairly on every visit.
Blogging & Editorial: Keep header hero images fresh and varied for returning readers.
🤝 Join Our Community
Facebook Community
Facebook Page
YouTube Channel
Twitter / X
LinkedIn
GitHub
