Code and core – Smart Image Ratio

Codeandcore Smart Image Ratio is a premium WordPress plugin designed for high-fidelity aspect ratio management. It empowers developers and site owners to create perfectly sized image variations with interactive cropping, modern smart-fill technology, and an efficient background processing engine.

The Ultimate Control Over Your Library

In our latest major release, we’ve transformed the plugin into a highly efficient, server-friendly powerhouse:

• Automatic Data Cleanup: Keep your database and literal <upload> folders 100% bloat-free. When a post or media attachment is deleted, the plugin intelligently hunts down and permanently deletes all generated ratio variations and tracking metadata.

• Conversion Coverage Dashboard: Need to know how many images are actually structured correctly? Our new real-time statistical dashboard displays your conversion progress percentages across all registered post types beautifully.

• Atomic Metadata Infrastructure: Built-in race condition prevention. All metadata updates use optimistic locking to ensure data integrity during concurrent AJAX operations.

• Harden Security & Privacy: All AJAX endpoints strictly enforce capability checks. Custom upload directories are automatically protected with index.php files to prevent directory listing.

• 100% Privacy Compliance (Native Hosting): We’ve completely detached from third-party CDNs. Every single asset (from SweetAlert2 modules to SaaS-inspired Google Fonts) is hosted natively within the plugin folder. 0 tracking, 0 offloaded scripts.

Boost Your SEO & User Experience

Image optimization is a core pillar of technical SEO. By serving perfectly sized aspect ratios, you reduce Layout Shift (CLS), which is a critical Core Web Vital metric. Faster loading, correctly dimensioned images signal search engines that your site provides a high-quality user experience.

Additionally, our “Smart-Fill” technology ensures that your featured images always look intentional and professional, reducing bounce rates and increasing user engagement.

Features

• Custom Aspect Ratios: Define unlimited aspect ratios (e.g., 16:9, 4:3, 1:1) through a sleek, SaaS-inspired admin interface.

• Interactive Cropping: Powered by Cropper.js, providing a pixel-perfect interface within the WordPress Media Library to adjust every variation manually.

• Smart Fill & Blur Flow: Automatic color-sampled blurred backgrounds for non-standard image compositions—never see awkward white bars again.

• Atomic Metadata Management: Robust optimistic locking system that prevents data corruption during simultaneous image generations.

• Security Hardening: Strict capability enforcement ( edit_posts ) for all internal AJAX operations and automatic directory protection for generated assets.

• Automatic Storage Cleanup: Intelligent logic that automatically purges image variations and metadata when a Post or Media item is deleted, keeping your server bloat-free.

• Conversion Coverage Dashboard: Real-time card-based statistics showing conversion progress across all registered post types.

• 100% Localized Assets: Zero remote CDN tracking. All dependencies (SweetAlert2, Google Fonts) are shipped locally for absolute privacy standard compliance.

• Developer-First Architecture: Built with modern PHP practices, 100% strict compliance with WordPress Coding Standards (WPCS) & PluginCheck, yielding a clean and deeply documented Public API.

• Gutenberg & Classic Editor Integration: Seamless UI panels (vCards) injected directly into the Block Editor and Classic Post screens to manage ratios dynamically while writing content.

• Frontend Shortcodes & APIs: Simple [code_and_core_sir_image] shortcode and PHP helper functions for effortless frontend rendering and page-builder (Elementor, Divi) compatibility.

• Advanced Debug Logging: Isolated system-level flat-file logging ( cnc-sir-debug.log ) for robust server execution monitoring and troubleshooting without cluttering standard WordPress debug logs.

• Real-time Quality Playground: Adjust JPEG output quality in settings and see instant canvas-simulated results on your sample images before saving.

• Maintenance & Wipe Tools: Single-click administrative actions to instantly clear background queues, completely wipe ratio configurations, and purge all plugin metadata—assuring a pristine environment when managing staging sites.

Developer & Integration Guide

Retrieving your custom ratios is simple and developer-friendly. Whether you are coding a theme from scratch or using a page builder, we have you covered.

1. Public PHP Helpers (Primary Functions)

Get Ratio URL

code_and_core_sir_get_ratio_image_url( $id, $ratio_id, $fallback = '' )

Retrieve the URL of a specific ratio variation.

* $id: Post ID or Attachment ID.

, ratio_16_9).

* $fallback: (Optional) Fallback URL if no image exists.

Get Complete Image Tag

code_and_core_sir_get_image_tag( $id, $ratio_id, $class = '', $fallback = '' )

Retrieve a fully formed tag. Note: If the ratio image is not found, this function automatically falls back to the original featured image for normal users, and displays a red warning placeholder box for administrators to easily spot missing ratios.

* $class: (Optional) CSS class for the img tag.

* $fallback: (Optional) Fallback image URL or HTML if the ratio doesn’t exist.

Check for Ratio Existence

code_and_core_sir_has_ratio( $id, $ratio_id )

Returns true if a specific ratio variation exists for the image.

Bulk Data Retrieval

$ratios = code_and_core_sir_get_all_ratios(get_the_ID());

Returns a complete array of all generated image variations for a post.

Active Ratio State

$active_ratio_id = code_and_core_sir_get_active_ratio( $post_id );

Returns the ID of the ratio currently set as “Active” for the featured image (if the ‘Set as Featured’ feature was used).

2. Implementation Examples

Simple Hero Image (Recommended)

>

Custom Grid or Card

php $ratio_url = code_and_core_sir_get_ratio_image_url( $post->ID, 'ratio_4_3', get_template_directory_uri(). -- Card Content --> </div>

Advanced Loop (Display All Ratios)

$ratios = code_and_core_sir_get_all_ratios(get_the_ID());

empty($data['url'])) { echo '<div class="ratio-item">'; echo '<h4>'. esc_html($ratio_id). '</h4>'; echo '<img src="'.

esc_url($data['url']). '" alt="">'; echo '</div>'; } }

Conditional Output (Recommended PHP Fallback)

Use this logic to safely fallback to the full featured image if a specific ratio isn’t generated.

empty($meta['ratio_1_1']['url'])? $meta['ratio_1_1']['url']: get_the_post_thumbnail_url(get_the_ID(), 'full');

if ($url) { echo '<img src="'. esc_url($url). '" alt="'.

esc_attr(get_the_title()). '">'; }

3. Shortcodes & Page Builders

Basic Usage

[code_and_core_sir_image ratio="ratio_16_9" id="123" class="hero-img"]

• ratio: (Required) The Ratio ID (e.g. ratio_16_9)

• id: (Optional) Attachment ID (defaults to featured image)

• class: (Optional) Custom CSS class

• alt: (Optional) Custom alt text (defaults to attachment alt)

• default: (Optional) Ultimate fallback image URL

Page Builders

Working with Elementor, Divi, Beaver Builder, or Gutenberg? Simply drop the shortcode into a “Shortcode” or “Text” widget.

[code_and_core_sir_image ratio="ratio_4_5"]

4. Technical Details

Metadata Structure

The plugin stores generated ratio information in a single post meta key _code_and_core_sir_ratios for each attachment.

jpg", "width": 1600, "height": 900, "mode": "crop", "timestamp": 1713170000 } }

Advanced Hooks & Filters

The settings are stored in the code_and_core_sir_settings option. Use standard WordPress filters like option_code_and_core_sir_settings to manipulate ratios or capabilities dynamically via code.

External services

pro/ for the following purposes:

• Deactivation Feedback: When you deactivate the plugin, an optional feedback form allows you to share why you are deactivating. If you fill this out, it sends the reason, site URL, plugin/WordPress/PHP versions, and active theme information. This helps us improve the plugin.

• Usage Tracking (Telemetry): If you explicitly opt-in via our settings or the activation modal, the plugin will occasionally send anonymous site diagnostics (site URL, plugin/WP/PHP versions, and active theme info) to help us prioritize compatibility updates and features.

This service is provided by “WordPress Plugins Pro”: General Conditions, Privacy Policy.

Credits

This plugin utilizes the following open-source third-party libraries:

• SweetAlert2 – Beautiful, responsive, customizable, accessible replacement for JavaScript’s popup boxes (MIT License).

• Cropper.js – Robust JavaScript image cropper used for the interactive Media Editor (MIT License).

• Outfit Font – Google Fonts typeface used throughout the plugin’s administration user interface (SIL Open Font License).