Image Extraction System
The Sarai Chinwag theme includes a comprehensive image extraction system that automatically discovers and catalogs all images from posts for display in specialized gallery archives.
Image Extraction Overview
Automatic Image Discovery
Sources Processed:
- Featured images (highest priority)
- Gutenberg block images (core/image, core/gallery, core/media-text)
- Content images from all published posts
- Images from both posts and recipes (when enabled)
Processing Scope:
- All published posts and recipes
- All categories and tags with associated posts
- Site-wide image collection for global galleries
Extraction Functions
Extract Images from Term
sarai_chinwag_extract_images_from_term($term_id, $term_type, $limit = 30)Purpose: Extract all images from posts within a specific category or tag Parameters:
$term_id: The term ID (category or tag ID)$term_type: Taxonomy type (‘category’ or ‘post_tag’)$limit: Maximum number of images to return
Returns: Array of image data objects with complete metadata
Extract Images from Post
sarai_chinwag_extract_images_from_post($post_id)Purpose: Extract all images from a single post
Parameters: $post_id – The WordPress post ID
Returns: Array of image data from all sources in the post
Site-Wide Image Extraction
sarai_chinwag_get_all_site_images($limit = 30)Purpose: Extract images from across the entire site
Parameters: $limit – Maximum number of images to return
Returns: Array of image data from all published posts
Image Data Structure
Image Metadata Collection
Each extracted image includes comprehensive metadata:
Core Data:
attachment_id: WordPress attachment IDpost_id: Source post ID where image was foundsource: Where image was discovered (featured, content, gallery, etc.)
Image Information:
title: Image title or source post titlealt: Alt text for accessibilitycaption: Image caption if availabledescription: Image description
URL Variations:
url_full: Full-size image URLurl_thumb: Thumbnail URL (grid-thumb size)url_medium: Medium-large size URL
Dimensions:
width: Image width in pixelsheight: Image height in pixels
Source Context:
source_post_title: Title of post containing imagesource_post_url: Permalink to source postsource_post_date: Publication date of source post
Image Size Optimization
Optimized Sizes:
grid-thumb: 450x450px cropped for gallery display- Responsive sizing for different viewport requirements
- Lazy loading for images beyond initial viewport
Performance Benefits:
- Single optimized size reduces storage overhead
- Efficient loading for mobile devices
- Eliminates unnecessary image size generation
Block Editor Integration
Gutenberg Block Support
Supported Block Types:
core/image: Individual image blockscore/gallery: Gallery blocks with multiple imagescore/media-text: Media and text combination blocks
Nested Block Handling:
- Recursive processing of inner blocks
- Complete block structure analysis
- Support for complex page layouts
Block Parsing Process
Image Block Processing:
sarai_chinwag_extract_images_from_blocks($blocks, $post_id)Functionality:
- Parses block structure from post content
- Extracts attachment IDs from block attributes
- Processes nested blocks recursively
- Maintains source context for each image
Caching Strategy
Performance Optimization
Cache Implementation:
- Cache Group:
sarai_chinwag_images - Cache Duration: 1-2 hours depending on content type
- wp_cache_* functions for efficient retrieval
Cache Keys (Image Data):
- Term images:
sarai_chinwag_term_images_{$term_id}_{$term_type} - Site images:
sarai_chinwag_all_site_images - Search images:
sarai_chinwag_search_images_{md5($search_query)}
Cache Keys (Image Counts):
- Term counts:
term_image_count_{$term_id}_{$taxonomy} - Site-wide count:
site_wide_image_count - Search counts:
search_image_count_{md5($search_query)}
Cache Invalidation:
- Post Updates: Automatic cache clearing on post save/delete via
sarai_chinwag_clear_image_cache_on_post_update() - Media Changes: Automatic invalidation on attachment add/edit/delete via
sarai_chinwag_clear_image_cache_on_media_change() - Centralized Clearing:
sarai_chinwag_clear_all_image_count_caches($post_id)handles all count cache invalidation - Category/Tag Updates: Term-specific cache clearing when posts updated
- Search Limitation: Search count caches use MD5 hashes, expire naturally after 2 hours
Cache Management Functions
Clear Image Cache
sarai_chinwag_clear_image_cache_on_post_update($post_id)Triggers:
- Post save (
save_posthook) - Post deletion (
delete_posthook) - Automatic cache maintenance
Filtering and Sorting
Filtered Image Extraction
Term-Based Filtering
sarai_chinwag_get_filtered_term_images($term_id, $term_type, $sort_by, $post_type_filter, $loaded_images, $limit)Filtering Options:
- Sort By: random, recent, oldest, popular
- Post Type: all, posts, recipes
- Exclusions: Previously loaded images
- Limits: Configurable result limits
Site-Wide Filtering
sarai_chinwag_get_filtered_all_site_images($sort_by, $post_type_filter, $loaded_images, $limit)Advanced Filtering:
- Real-time AJAX filtering
- Maintains filter state across load more
- Prevents duplicate image display
Randomization System
True Image Randomization:
- Images shuffled at extraction level (not just random posts)
- Consistent randomization across initial load and AJAX
- Prevents predictable image ordering
Performance Considerations:
- MySQL randomization for large datasets
- Cached random results for efficiency
- Limited query sizes prevent memory issues
Search Integration
Image Search Functionality
Search Image Extraction
sarai_chinwag_extract_images_from_search($search_query, $limit)Search Processing:
- Text matching in post titles and content
- Image context preservation
- Search result image galleries
- Integrated with main search functionality
Search Features:
- Images from posts matching search terms
- Maintains source post context
- Gallery display of search results
- Preserves search query in image URLs
Performance Considerations
Memory Management
Query Limitations:
- Maximum 500 posts processed per extraction
- Configurable limits prevent memory exhaustion
- Early termination when sufficient images found
Efficient Processing:
- Duplicate prevention with seen_attachments array
- Optimized database queries
- Minimal memory footprint
Database Optimization
Query Efficiency:
- Limited result sets for large sites
- Indexed meta queries for performance
- Efficient attachment relationship queries
Caching Benefits:
- Reduces database load
- Faster page load times
- Improved user experience
Troubleshooting
Image Extraction Issues
Images Not Appearing:
- Verify posts have published status
- Check image attachment to posts
- Confirm block structure for Gutenberg content
- Clear image cache and retry
Performance Problems:
- Check query limits and memory usage
- Monitor database query efficiency
- Verify cache hit rates
- Adjust extraction limits if needed
Cache Issues:
- Clear wp_cache with
wp_cache_flush_group('sarai_chinwag_images') - Verify cache key generation
- Check cache expiration times
- Monitor cache storage usage
Block Processing Problems
Gutenberg Images Missing:
- Verify block parsing functionality
- Check block attribute structure
- Confirm attachment ID extraction
- Test with different block types
Nested Block Issues:
- Enable recursive block processing
- Verify inner block handling
- Check complex layout support
- Test with various page builders
Advanced Usage
Custom Image Sources
The extraction system can be extended to support additional image sources beyond the default Gutenberg blocks.
Performance Tuning
Extraction limits, cache durations, and query parameters can be adjusted based on site size and hosting capabilities.
Integration Examples
The image extraction system integrates seamlessly with:
- Gallery archive pages
- AJAX filtering system
- Search functionality
- Random content discovery