Jeremy Felt

Happy Prime

slocker

philcable

<p>The Theme Image Block plugin allows you to register images from your theme and make them available as blocks in the WordPress editor. This is useful for logos, icons, and other images that are part of your theme’s design system.</p>
<h3>Usage</h3>
<h3>Registering Theme Images</h3>
<p>Theme images should be registered using <code>HappyPrime\ThemeImageBlock\register_theme_image()</code>. This is likely best done on the <code>init</code> or <code>after_setup_theme</code> action.</p>
<pre><code>HappyPrime\ThemeImageBlock\register_theme_image(
    'happy-prime-logo',
    [
        'title' => 'Happy Prime Logo',
        'description' => 'The Happy Prime logo.',
        'alt' => 'Happy Prime',
        'path' => 'images/happy-prime-logo.svg',
        'width' => '300',
        'height' => '',
        'variations' => [
            'small' => [
                'path'   => 'images/happy-prime-logo-small.svg',
                'width'  => '100',
                'height' => '100',
            ],
            'medium' => [
                'path'   => 'images/happy-prime-logo-medium.svg',
                'width'  => '200',
                'height' => '200',
            ],
            'large' => [
                'path'   => 'images/happy-prime-logo-large.svg',
                'width'  => '300',
                'height' => '300',
            ],
        ],
        'sizes' => '(max-width: 600px) 100vw, 300px',
    ]
);
</code></pre>
<h3>Registering Theme Image Styles</h3>
<p>Theme image styles should be registered using <code>HappyPrime\ThemeImageBlock\register_theme_image_style()</code>. This is likely best done on the <code>init</code> or <code>after_setup_theme</code> action.</p>
<pre><code>HappyPrime\ThemeImageBlock\register_theme_image_style(
    'hero',
    [
        'name'   => 'Hero',
        'width'  => 'clamp(10rem, 100vw, 60rem)',
        'height' => 'auto',
    ]
);
</code></pre>


Theme Image Block

Use images from your theme as blocks in content.

kubiq

<p>Statistics say that WebP format can save over a half of the page weight without losing images quality.<br />
Convert PNG, JPG and GIF images to WebP and speed up your web, save visitors download data, make your Google ranking better.</p>
<ul>
<li><strong>automated test after plugin activation to make sure it will work on your server</strong></li>
<li><strong>works with all types of WordPress installations: domain, subdomain, subdirectory, multisite/network</strong></li>
<li><strong>works on Apache and NGiNX</strong></li>
<li><strong>image URL will be not changed</strong> so it works everywhere, in <img> src, srcset, <picture>, even in CSS backgrounds and there is no problem with cache</li>
<li><strong>original files will be not touched</strong></li>
<li>set quality of converted images</li>
<li>auto convert on upload</li>
<li>only convert image if WebP filesize is lower than original image filesize</li>
<li>bulk convert existing images to WebP ( you can choose folders )</li>
<li>bulk convert only missing images</li>
<li>works with `Fly Dynamic Image Resizer` plugin</li>
</ul>
<h3>Hooks for developers</h3>
<h4>itw_sizes</h4>
<p>Maybe you want to disable WebP for thumbnails</p>
<pre><code>add_filter( 'itw_sizes', 'disable_itw_sizes', 10, 2 );
function disable_itw_sizes( $sizes, $attachmentId ){
    unset( $sizes['thumbnail'] );
    return $sizes;
}
</code></pre>
<h4>itw_htaccess</h4>
<p>Maybe you want to modify htaccess rules somehow</p>
<pre><code>add_filter( 'itw_htaccess', 'modify_itw_htaccess', 10, 2 );
function modify_itw_htaccess( $rewrite_rules ){
    // do some magic here
    return $rewrite_rules;
}
</code></pre>
<h4>itw_abspath</h4>
<p>Maybe you use roots.io/bedrock or other custom folder structure</p>
<pre><code>add_filter( 'itw_abspath', 'modify_itw_abspath', 10, 2 );
function modify_itw_abspath( $abspath ){
    return trailingslashit( WP_CONTENT_DIR );
}
</code></pre>
<h4>$images_to_webp->convert_image()</h4>
<p>Maybe you want to automatically generate WebP for other plugins</p>
<pre><code>add_action( 'XXPLUGIN_image_created', 'XX_images_to_webp', 10, 2 );
function XX_images_to_webp( $image_path ){
    global $images_to_webp;
    $images_to_webp->convert_image( $image_path );
}
</code></pre>


Images to WebP

Great

Convert PNG, JPG and GIF images to WebP and speed up your web

Theme Image Block vs Images to WebP