Chris Burns

<p>Wondering if this image is even used on your site? Can it safely be deleted?</p>
<p>Or you need to update an image, but not sure which pages will be affected?</p>
<p>You’re curious if you’ve used this image too many times…</p>
<p>With this plugin, when <strong>choosing an image in the Media Library</strong>, you’ll see a section <strong>“Where is it used”</strong> in the image details on the right.</p>
<h4>Limitations</h4>
<p>This plugin scans the database for the image — that means it will find the image when you’ve inserted it using the WordPress admin, such as:</p>
<ul>
<li>Content inside a Page/Post/Custom Post type</li>
<li>Featured images</li>
<li>ACF fields</li>
<li>Site Icon (favicon)</li>
</ul>
<p>That also means it WON’T find places where the image is used outside of the admin, such as:<br />
* Code (PHP, HTML, CSS that you wrote that links directly to the image)<br />
* Other websites that link to it<br />
* The image used in your email signature</p>
<h4>Tested plugins that are compatible</h4>
<ul>
<li>ACF</li>
<li>WooCommerce</li>
</ul>
<p>Do you use a plugin that manages images on your site but this plugin doesn’t see them? Let me know and I can figure out how to include those images in the search.</p>
<h4>Features</h4>
<ul>
<li>View where any image is used across your WordPress site</li>
<li>Notes on where to look for the image so it’s easier to find on the edit screen (Feature image? Page content? ACF field?)</li>
<li>Quick links to edit and view the page contianing the image</li>
<li>No configuration needed – just install and activate</li>
</ul>
<h4>Use Cases</h4>
<ul>
<li>Find unused images that can be safely deleted</li>
<li>Audit duplicate images so you can decide which one to keep</li>
<li>Locate where specific images are being used</li>
<li>Notice images that are over-used (pick a different image for some more variety)</li>
<li>Identify orphaned images</li>
<li>Track featured image usage</li>
</ul>
<h4>How It Works</h4>
<ol>
<li>Open the WordPress Media Library</li>
<li>Click on any image to view its details</li>
<li>Look for the “Where is it used” section in the image details sidebar (on bottom right)</li>
<li>See a list of all places where the image is used, with links to edit those pages</li>
</ol>
<h3>Privacy Policy</h3>
<p>Where Image Used does not collect any personal data. It only scans your WordPress content to find where images are used within your site.</p>


MediaMan – Where is this Image Used?

Improve the default Media Library to see where your images are being used across your WordPress site.

Junaid Bhura

<p><a href="https://github.com/junaidbhura/fly-dynamic-image-resizer" rel="nofollow ugc">Check out the Github Repository ♥</a></p>
<p>One of the biggest problems theme developers face is the problem of multiple image sizes. When you upload an image in the media library, WordPress automatically creates thumbnails based on <strong>all the image sizes</strong> you have defined using <strong><code>add_image_size()</code></strong> whether you want to use them or not. So the vast majority of the images in wp-content/uploads directory <strong>are a waste, and are never used.</strong> This is not the optimum way of creating image sizes.</p>
<p>With this plugin, you can create <strong>as many image sizes as you want</strong> without the guilt of unnecessary image sizes taking up your disk space!</p>
<p>This is because the images created using this plugin are dynamically created when the image is called for the <strong>first time</strong>, rather than when it is uploaded. You can also delete the cached images for each image individually, or all the cached images.</p>
<h4>How this plugin works</h4>
<ol>
<li>You either define an image size in your code using the <strong><code>fly_add_image_size()</code></strong> function, or directly call the image size in the code</li>
<li>The admin uploads the image in the media library, but the fly dynamic images are not created</li>
<li>The user visits the page for the first time, and the image is dynamically created and is stored</li>
<li>The user visits the page again for the second time, and the stored version of the image is served</li>
</ol>
<h4>Documentation</h4>
<p>Here are some functions and example code to get you started!</p>
<p><strong>fly_get_attachment_image_src( $attachment_id, $size, $crop )</strong></p>
<ul>
<li><strong>attachment_id</strong> (integer)(required) : The ID of the image attachment</li>
<li><strong>size</strong> (string/array)(required) : Either the name of the pre-defined size defined using <code>fly_add_image_size</code>, or an array with the width and height. Ex: array( 500, 500 )</li>
<li><strong>crop</strong> (boolean/array)(optional) : Whether the image should be cropped, or the crop position</li>
</ul>
<p>Returns an array:</p>
<pre><code>array(
    'src' => string,
    'width' => integer,
    'height' => integer
)
</code></pre>
<p> </p>
<p><strong>fly_get_attachment_image( $attachment_id, $size, $crop, $attr )</strong></p>
<ul>
<li><strong>attachment_id</strong> (integer)(required) : The ID of the image attachment</li>
<li><strong>size</strong> (string/array)(required) : Either the name of the pre-defined size defined using <code>fly_add_image_size</code>, or an array with the width and height. Ex: array( 500, 500 )</li>
<li><strong>crop</strong> (boolean/array)(optional) : Whether the image should be cropped, or the crop position</li>
<li><strong>attr</strong> (array)(optional) : An array of attributes. Ex: <code>array( 'alt' => 'Alt text', 'title' => 'Title text', 'class' => 'my-class', 'id' => 'my-id' )</code></li>
</ul>
<p>Returns a HTML IMG element string:</p>
<pre><code><img src="http://yoursite.com/wp-content/uploads/fly-images/10/your-image-500x500-c.jpg" width="500" height="500" alt="Alt text" />
</code></pre>
<p> </p>
<h4>Example 1: Pre-defined Image Sizes</h4>
<p>In this method, you define as many image sizes as you want in your <strong>functions.php</strong> file.</p>
<pre><code>if ( function_exists( 'fly_add_image_size' ) ) {
    fly_add_image_size( 'home_page_square', 500, 500, true );
    fly_add_image_size( 'home_page_square_2x', 1000, 1000, true );
    fly_add_image_size( 'cropped_top_left', 1000, 1000, array( 'left', 'top' ) );
}
</code></pre>
<p>Now, lets get the post thumbnail using the image sizes we just defined:</p>
<pre><code><?php echo fly_get_attachment_image( get_post_thumbnail_id(), 'home_page_square' ); ?>
</code></pre>
<p>Here’s another way you can do this:</p>
<pre><code><?php $image = fly_get_attachment_image_src( get_post_thumbnail_id(), 'home_page_square' ); echo '<img src="' . $image['src'] . '" width="' . $image['width'] . '" height="' . $image['height'] . '" />'; ?>
</code></pre>
<p>Let’s get the image from our example above which has a crop position defined:</p>
<pre><code><?php echo fly_get_attachment_image( get_post_thumbnail_id(), 'cropped_top_left' ); ?>
</code></pre>
<p> </p>
<h4>Example 2: Dynamic Image Sizes</h4>
<p>Lets get the post thumbnail using some dynamic image sizes:</p>
<pre><code><?php echo fly_get_attachment_image( get_post_thumbnail_id(), array( 500, 500 ), true ); ?>
</code></pre>
<p>Here’s another way you can do this:</p>
<pre><code><?php $image = fly_get_attachment_image_src( get_post_thumbnail_id(), 'home_page_square', array( 500, 500 ), true ); echo '<img src="' . $image['src'] . '" width="' . $image['width'] . '" height="' . $image['height'] . '" />'; ?>
</code></pre>
<p>Lets get the post thumbnail cropped from the bottom right:</p>
<pre><code><?php echo fly_get_attachment_image( get_post_thumbnail_id(), array( 500, 500 ), array( 'right', 'bottom' ) ); ?>
</code></pre>
<p> </p>
<h4>A note on Crop Positions</h4>
<p>Crop positions are set using an array. The first parameter of the array needs to be the x-axis crop and the second parameter needs to be the y-axis crop. This feature <strong>will not</strong> work the other way around.</p>
<p>For example:</p>
<p>✓ <code>fly_get_attachment_image( get_post_thumbnail_id(), array( 500, 500 ), array( 'right', 'bottom' ) )</code> Will work! 🙂</p>
<p>✘ <code>fly_get_attachment_image( get_post_thumbnail_id(), array( 500, 500 ), array( 'bottom', 'right' ) )</code> Will not work! 🙁</p>
<h4>Detailed Documentation</h4>
<p>Check out the GitHub repository’s Wiki page for the full documentation: <a href="https://github.com/junaidbhura/fly-dynamic-image-resizer/wiki" rel="nofollow ugc">https://github.com/junaidbhura/fly-dynamic-image-resizer/wiki</a></p>


Fly Dynamic Image Resizer

Since it generates images upon request, another hidden benefit for me has been being able to .gitignore the folder with the generated images. The source images still get added at three different sizes in the media library (which is still useful for things like internal images for blog posts), but a large portion of the images just get ignored by the repo but then re-created by the server when requested.

Very, Very Useful!

Hello,

thank you for this great plugin I use it on every web!

I have one question - is there a way to process image from URL from another web?
For example to download and crop youtube thumbnails... I can write script to do it store image locally and then use one of fly_ functions, but my question is if there is something in your plugin that can process URL directly

Great plugin! But 1 question:

I have clients with sites that are 1GB large because of image sizes I need to create for Pagespeed or just layout purposes. One client has a 20GB /wp-content folder.

That is ridiculous, but before this plugin, seemed necessary. This is an amazing, elegant solution and really should be included in core, i.e., "Don't create an image size until it's actually used."

Thank you!

Excellent plugin and should be a standard

One of my "go to" plugins for just about any site - straightforward and does the job well.  One modification that I have made is so that you can specify just the height OR width and are not required to specify both.  

Great Plugin

Dynamically create image sizes on the fly!

MediaMan – Where is this Image Used? vs Fly Dynamic Image Resizer