{"id":338825,"date":"2026-08-13T09:11:17","date_gmt":"2026-08-13T09:11:17","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/code-and-core-smart-image-ratio\/"},"modified":"2026-08-13T09:14:35","modified_gmt":"2026-08-13T09:14:35","slug":"code-and-core-smart-image-ratio","status":"publish","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/code-and-core-smart-image-ratio\/","author":22039652,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.0","stable_tag":"1.0.0","tested":"7.0.4","requires":"5.0","requires_php":"","requires_plugins":null,"header_name":"Code and core - Smart Image Ratio","header_author":"Code and core","header_description":"Advanced aspect ratio management with interactive cropping, smart blur-fill, and bulk regeneration.","assets_banners_color":"9e94a6","last_updated":"2026-08-13 09:14:35","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"https:\/\/codeandcore.com","rating":0,"author_block_rating":0,"active_installs":0,"downloads":26,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"codeandcore","date":"2026-08-13 09:14:35"}},"upgrade_notice":{"1.0.0":"

This major release introduces Smart Blur-Fill processing, and 100% Native Asset Hosting (Zero CDN). We strongly recommend all users upgrade for improved site performance and complete privacy standard compliance.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3644744,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3644744,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3644744,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3644744,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3644744,"resolution":"1","location":"assets","locale":"","width":1980,"height":1050},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3644744,"resolution":"2","location":"assets","locale":"","width":1980,"height":1050},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3644744,"resolution":"3","location":"assets","locale":"","width":1980,"height":1050},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3644744,"resolution":"4","location":"assets","locale":"","width":1980,"height":1050},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3644744,"resolution":"5","location":"assets","locale":"","width":1980,"height":1050}},"screenshots":{"1":"Dashboard Settings<\/strong>: Define your custom ratios and processing modes.","2":"Post Editor Panel<\/strong>: Interactive Cropper.js interface launched directly from the Featured Image sidebar for pixel-perfect adjustments.","3":"Smart Fill in Action<\/strong>: Visual example of how the background blur-fill technology handles non-standard images.","4":"Data Cleanup Dashboard<\/strong>: One-click utilities for wiping plugin metadata and clearing generated images.","5":"Gutenberg Integration<\/strong>: Managing image ratios directly within the WordPress block editor side panel."}},"plugin_section":[],"plugin_tags":[52920,10652,1795,275485,275484],"plugin_category":[],"plugin_contributors":[240189],"plugin_business_model":[],"class_list":["post-338825","plugin","type-plugin","status-publish","hentry","plugin_tags-aspect-ratio","plugin_tags-cropping","plugin_tags-featured-image","plugin_tags-image-regeneration","plugin_tags-smart-fill","plugin_contributors-codeandcore","plugin_committers-codeandcore"],"banners":{"banner":"https:\/\/ps.w.org\/code-and-core-smart-image-ratio\/assets\/banner-772x250.png?rev=3644744","banner_2x":"https:\/\/ps.w.org\/code-and-core-smart-image-ratio\/assets\/banner-1544x500.png?rev=3644744","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/code-and-core-smart-image-ratio\/assets\/icon-128x128.png?rev=3644744","icon_2x":"https:\/\/ps.w.org\/code-and-core-smart-image-ratio\/assets\/icon-256x256.png?rev=3644744","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/code-and-core-smart-image-ratio\/assets\/screenshot-1.png?rev=3644744","caption":"Dashboard Settings<\/strong>: Define your custom ratios and processing modes."},{"src":"https:\/\/ps.w.org\/code-and-core-smart-image-ratio\/assets\/screenshot-2.png?rev=3644744","caption":"Post Editor Panel<\/strong>: Interactive Cropper.js interface launched directly from the Featured Image sidebar for pixel-perfect adjustments."},{"src":"https:\/\/ps.w.org\/code-and-core-smart-image-ratio\/assets\/screenshot-3.png?rev=3644744","caption":"Smart Fill in Action<\/strong>: Visual example of how the background blur-fill technology handles non-standard images."},{"src":"https:\/\/ps.w.org\/code-and-core-smart-image-ratio\/assets\/screenshot-4.png?rev=3644744","caption":"Data Cleanup Dashboard<\/strong>: One-click utilities for wiping plugin metadata and clearing generated images."},{"src":"https:\/\/ps.w.org\/code-and-core-smart-image-ratio\/assets\/screenshot-5.png?rev=3644744","caption":"Gutenberg Integration<\/strong>: Managing image ratios directly within the WordPress block editor side panel."}],"raw_content":"\n

Codeandcore Smart Image Ratio<\/strong> 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.<\/p>\n\n

The Ultimate Control Over Your Library<\/h3>\n\n

In our latest major release, we've transformed the plugin into a highly efficient, server-friendly powerhouse:<\/p>\n\n

    \n
  • Automatic Data Cleanup:<\/strong> Keep your database and literal <upload><\/code> 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.<\/li>\n
  • Conversion Coverage Dashboard:<\/strong> 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.<\/li>\n
  • Atomic Metadata Infrastructure:<\/strong> Built-in race condition prevention. All metadata updates use optimistic locking to ensure data integrity during concurrent AJAX operations.<\/li>\n
  • Harden Security & Privacy:<\/strong> All AJAX endpoints strictly enforce capability checks. Custom upload directories are automatically protected with index.php files to prevent directory listing.<\/li>\n
  • 100% Privacy Compliance (Native Hosting):<\/strong> 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.<\/li>\n<\/ul>\n\n

    Boost Your SEO & User Experience<\/strong><\/p>\n\n

    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.<\/p>\n\n

    Features<\/h3>\n\n
      \n
    • Custom Aspect Ratios<\/strong>: Define unlimited aspect ratios (e.g., 16:9, 4:3, 1:1) through a sleek, SaaS-inspired admin interface.<\/li>\n
    • Interactive Cropping<\/strong>: Powered by Cropper.js, providing a pixel-perfect interface within the WordPress Media Library to adjust every variation manually.<\/li>\n
    • Smart Fill & Blur Flow<\/strong>: Automatic color-sampled blurred backgrounds for non-standard image compositions\u2014never see awkward white bars again.<\/li>\n
    • Atomic Metadata Management<\/strong>: Robust optimistic locking system that prevents data corruption during simultaneous image generations.<\/li>\n
    • Security Hardening<\/strong>: Strict capability enforcement (edit_posts<\/code>) for all internal AJAX operations and automatic directory protection for generated assets.<\/li>\n
    • Automatic Storage Cleanup<\/strong>: Intelligent logic that automatically purges image variations and metadata when a Post or Media item is deleted, keeping your server bloat-free.<\/li>\n
    • Conversion Coverage Dashboard<\/strong>: Real-time card-based statistics showing conversion progress across all registered post types.<\/li>\n
    • 100% Localized Assets<\/strong>: Zero remote CDN tracking. All dependencies (SweetAlert2, Google Fonts) are shipped locally for absolute privacy standard compliance.<\/li>\n
    • Developer-First Architecture<\/strong>: Built with modern PHP practices, 100% strict compliance with WordPress Coding Standards (WPCS) & PluginCheck, yielding a clean and deeply documented Public API.<\/li>\n
    • Gutenberg & Classic Editor Integration<\/strong>: Seamless UI panels (vCards) injected directly into the Block Editor and Classic Post screens to manage ratios dynamically while writing content.<\/li>\n
    • Frontend Shortcodes & APIs<\/strong>: Simple [code_and_core_sir_image]<\/code> shortcode and PHP helper functions for effortless frontend rendering and page-builder (Elementor, Divi) compatibility.<\/li>\n
    • Advanced Debug Logging<\/strong>: Isolated system-level flat-file logging (cnc-sir-debug.log<\/code>) for robust server execution monitoring and troubleshooting without cluttering standard WordPress debug logs.<\/li>\n
    • Real-time Quality Playground<\/strong>: Adjust JPEG output quality in settings and see instant canvas-simulated results on your sample images before saving.<\/li>\n
    • Maintenance & Wipe Tools<\/strong>: Single-click administrative actions to instantly clear background queues, completely wipe ratio configurations, and purge all plugin metadata\u2014assuring a pristine environment when managing staging sites.<\/li>\n<\/ul>\n\n

      Developer & Integration Guide<\/h3>\n\n

      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.<\/p>\n\n

      1. Public PHP Helpers (Primary Functions)<\/h3>\n\n

      Get Ratio URL<\/strong><\/p>\n\n

      code_and_core_sir_get_ratio_image_url( $id, $ratio_id, $fallback = '' )\n<\/code><\/pre>\n\n
      Retrieve the URL of a specific ratio variation.\n*   $id: Post ID or Attachment ID.\n*   $ratio_id: The slug of the ratio (e.g., ratio_16_9).\n*   $fallback: (Optional) Fallback URL if no image exists.<\/p>\n\n
      Get Complete Image Tag<\/strong><\/p>\n\n
      code_and_core_sir_get_image_tag( $id, $ratio_id, $class = '', $fallback = '' )\n<\/code><\/pre>\n\n
      Retrieve a fully formed  tag. Note:<\/strong> 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.\n*   $class: (Optional) CSS class for the img tag.\n*   $fallback: (Optional) Fallback image URL or HTML if the ratio doesn't exist.<\/p>\n\n
      Check for Ratio Existence<\/strong><\/p>\n\n
      code_and_core_sir_has_ratio( $id, $ratio_id )\n<\/code><\/pre>\n\n
      Returns true if a specific ratio variation exists for the image.<\/p>\n\n
      Bulk Data Retrieval<\/strong><\/p>\n\n
      $ratios = code_and_core_sir_get_all_ratios(get_the_ID());\n<\/code><\/pre>\n\n
      Returns a complete array of all generated image variations for a post.<\/p>\n\n
      Active Ratio State<\/strong><\/p>\n\n
      $active_ratio_id = code_and_core_sir_get_active_ratio( $post_id );\n<\/code><\/pre>\n\n
      Returns the ID of the ratio currently set as \"Active\" for the featured image (if the 'Set as Featured' feature was used).<\/p>\n\n
      2. Implementation Examples<\/h3>\n\n
      Simple Hero Image (Recommended)<\/strong><\/p>\n\n
      <?php if ( code_and_core_sir_has_ratio( get_the_ID(), 'ratio_16_9' ) ) : ?>\n    <div class=\"hero-image\">\n        <?php echo code_and_core_sir_get_image_tag( get_the_ID(), 'ratio_16_9', 'hero-img-class' ); ?>\n    <\/div>\n<?php endif; ?>\n<\/code><\/pre>\n\n
      Custom Grid or Card<\/strong><\/p>\n\n
      <?php\n$ratio_url = code_and_core_sir_get_ratio_image_url( $post->ID, 'ratio_4_3', get_template_directory_uri() . '\/assets\/placeholder.jpg' );\n?>\n<div class=\"card\" style=\"background-image: url('<?php echo esc_url( $ratio_url ); ?>');\">\n    <!-- Card Content -->\n<\/div>\n<\/code><\/pre>\n\n
      Advanced Loop (Display All Ratios)<\/strong><\/p>\n\n
      $ratios = code_and_core_sir_get_all_ratios(get_the_ID());\n\nforeach ($ratios as $ratio_id => $data) {\n    if (!empty($data['url'])) {\n        echo '<div class=\"ratio-item\">';\n        echo '<h4>' . esc_html($ratio_id) . '<\/h4>';\n        echo '<img src=\"' . esc_url($data['url']) . '\" alt=\"\">';\n        echo '<\/div>';\n    }\n}\n<\/code><\/pre>\n\n
      Conditional Output (Recommended PHP Fallback)<\/strong>\nUse this logic to safely fallback to the full featured image if a specific ratio isn't generated.<\/p>\n\n
      $thumb_id = get_post_thumbnail_id();\n$meta = get_post_meta($thumb_id, '_code_and_core_sir_ratios', true);\n$url = !empty($meta['ratio_1_1']['url']) ? $meta['ratio_1_1']['url'] : get_the_post_thumbnail_url(get_the_ID(), 'full');\n\nif ($url) {\n    echo '<img src=\"' . esc_url($url) . '\" alt=\"' . esc_attr(get_the_title()) . '\">';\n}\n<\/code><\/pre>\n\n
      3. Shortcodes & Page Builders<\/h3>\n\n
      Basic Usage<\/strong><\/p>\n\n
      [code_and_core_sir_image ratio=\"ratio_16_9\" id=\"123\" class=\"hero-img\"]\n<\/code><\/pre>\n\n
        \n
      • ratio: (Required) The Ratio ID (e.g. ratio_16_9)<\/li>\n
      • id: (Optional) Attachment ID (defaults to featured image)<\/li>\n
      • class: (Optional) Custom CSS class<\/li>\n
      • alt: (Optional) Custom alt text (defaults to attachment alt)<\/li>\n
      • default: (Optional) Ultimate fallback image URL<\/li>\n<\/ul>\n\n
        Page Builders<\/strong>\nWorking with Elementor, Divi, Beaver Builder, or Gutenberg? Simply drop the shortcode into a \"Shortcode\" or \"Text\" widget.<\/p>\n\n
        [code_and_core_sir_image ratio=\"ratio_4_5\"]\n<\/code><\/pre>\n\n
        4. Technical Details<\/h3>\n\n
        Metadata Structure<\/strong>\nThe plugin stores generated ratio information in a single post meta key _code_and_core_sir_ratios for each attachment.<\/p>\n\n
        {\n  \"ratio_16_9\": {\n    \"url\": \"https:\/\/example.com\/wp-content\/uploads\/cnc-sir\/2026\/04\/image-16x9.jpg\",\n    \"path\": \"\/absolute\/path\/to\/image-16x9.jpg\",\n    \"width\": 1600,\n    \"height\": 900,\n    \"mode\": \"crop\",\n    \"timestamp\": 1713170000\n  }\n}\n<\/code><\/pre>\n\n
        Advanced Hooks & Filters<\/strong>\nThe 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.<\/p>\n\n
        External services<\/h3>\n\n
        This plugin connects to a third-party service at https:\/\/wordpress-plugins.pro\/ for the following purposes:<\/p>\n\n
          \n
        • Deactivation Feedback<\/strong>: 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.<\/li>\n
        • Usage Tracking (Telemetry)<\/strong>: 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.<\/li>\n<\/ul>\n\n
          This service is provided by \u201cWordPress Plugins Pro\u201d: General Conditions, Privacy Policy.<\/p>\n\n
          Credits<\/h3>\n\n
          This plugin utilizes the following open-source third-party libraries:<\/p>\n\n
            \n
          • SweetAlert2<\/strong> - Beautiful, responsive, customizable, accessible replacement for JavaScript's popup boxes (MIT License).<\/li>\n
          • Cropper.js<\/strong> - Robust JavaScript image cropper used for the interactive Media Editor (MIT License).<\/li>\n
          • Outfit Font<\/strong> - Google Fonts typeface used throughout the plugin's administration user interface (SIL Open Font License).<\/li>\n<\/ul>\n\n\n
              \n
            1. Upload the plugin folder to the \/wp-content\/plugins\/<\/code> directory.<\/li>\n
            2. Activate the plugin through the 'Plugins' menu in WordPress.<\/li>\n
            3. Navigate to Smart Image Ratio > Settings<\/strong> to define your desired aspect ratios.<\/li>\n
            4. Edit any Post or Page, locate the Aspect Ratios<\/strong> panel under the Featured Image box in the sidebar, and click \"Manage Aspect Ratios\"<\/strong> to manually fine-tune your crops.<\/li>\n<\/ol>\n\n\n
              \n
              Does this plugin affect site performance?<\/h3><\/dt>\n
              No. The plugin generates images in the background and only when needed. Frontend display is extremely fast as it simply retrieves a metadata URL, just like standard WordPress featured images.<\/p><\/dd>\n
              What happens if I don't manually crop an image?<\/h3><\/dt>\n
              The plugin will automatically apply the \"Fit\" or \"Smart Fill\" mode you've selected in the settings to generate the initial variation.<\/p><\/dd>\n
              Is it compatible with Page Builders like Elementor or Gutenberg?<\/h3><\/dt>\n
              Yes! You can use the provided shortcode or helper functions within any page builder widget that supports shortcodes or custom PHP.<\/p><\/dd>\n
              Can I use CodeAndCore\\SIR for SEO?<\/h3><\/dt>\n
              Yes. By serving exact aspect ratios, you minimize CLS and improve page speed, both of which are critical for SEO rankings.<\/p><\/dd>\n
              Will my original images be overwritten?<\/h3><\/dt>\n
              No. The plugin generates separate image files for each ratio variation and keeps your original images completely untouched.<\/p><\/dd>\n
              What image formats are supported?<\/h3><\/dt>\n
              The plugin supports all standard web image formats including JPG, PNG, WebP, and GIF.<\/p><\/dd>\n
              How do I delete generated images?<\/h3><\/dt>\n
              The plugin automatically deletes all generated image variations when you delete the original image from the media library. You can also manually clear all generated images from the settings.<\/p><\/dd>\n\n<\/dl>\n\n\n
              1.0.0<\/h4>\n\n
                \n
              • Feature<\/strong>: Custom Aspect Ratios with Interactive Cropper.js editing.<\/li>\n
              • Feature<\/strong>: Smart Blur-Fill engine for non-standard image compositions.<\/li>\n
              • Feature<\/strong>: \"Data & Cleanup\" settings for automatic variation\/metadata deletion upon attachment removal.<\/li>\n
              • Feature<\/strong>: Atomic Metadata Infrastructure<\/strong> preventing race conditions during concurrent updates.<\/li>\n
              • Security<\/strong>: Security Hardening<\/strong> with strict capability checks and automatic directory protection (index.php).<\/li>\n
              • Feature<\/strong>: 100% Native Asset Hosting (Zero remote CDN dependencies for complete privacy compliance).<\/li>\n
              • Feature<\/strong>: Direct SQL monitoring for instant \"Stop\" button response.<\/li>\n
              • Feature<\/strong>: Modern, SaaS-inspired card-based UI with SweetAlert2 integration.<\/li>\n
              • Architecture<\/strong>: 100% strict WPCS (WordPress Coding Standards) and PluginCheck compliance.<\/li>\n
              • Architecture<\/strong>: Comprehensive codebase inline documentation (PHPDoc, JSDoc, CSSDoc). <\/li>\n
              • Initial stable release.<\/li>\n<\/ul>","raw_excerpt":"Take full control of your featured images with smart cropping, custom ratios, and blur-fill automation.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/338825","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=338825"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/codeandcore"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=338825"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=338825"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=338825"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=338825"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=338825"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=338825"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}