Mosne / Paolo Tesei

<p>This plugin extends the core/cover block with separate mobile and desktop background images and sizes.<br />
This increases the performance of the website by loading the smaller image on mobile devices and scores better in the Core Web Vitals.</p>
<h3>Configuration</h3>
<ul>
<li>In the Settings > Mosne Hero page you can configure the mobile image size and the breakpoint at which the mobile image is displayed</li>
<li>Note that this is a new size, so you will need to regenerate the thumbnails using a plugin like Regenerate Thumbnails for existing images to use the new sizes.</li>
</ul>
<h3>In the Editor</h3>
<ul>
<li>Add a cover block and select the “Hero Cover (Mobile & Desktop)” variation.</li>
<li>Now you can see a new panel with the following options:</li>
<li>Mobile image : You can also select a custom image for the desktop and the mobile view.</li>
<li>Mobile image size : choose the size that perfectly fits your design.</li>
<li>Focal point : You can also select a focal point for the mobile image.</li>
<li>Alt text : Add alternative text for the mobile image. (Leave empty if it is a decorative image)</li>
<li>High fetch priority : force the high fetch priority attribute if the image is above the fold.</li>
<li>If you use a featured image, leave the mobile image empty and the plugin will use the mobile size for the featured image for the mobile view.</li>
</ul>
<h3>Key Features</h3>
<ul>
<li>Separate mobile and desktop background images and sizes</li>
<li>Configure the mobile image size and the breakpoint at which the mobile image is displayed</li>
<li>It also works with the featured image</li>
<li>Focal point switching for the mobile image</li>
<li>Alt text switching for the mobile image</li>
<li>High fetch priority for the mobile image</li>
<li>Performance-optimized and lightweight</li>
<li>No block library required</li>
<li>Primarily built with native WordPress components</li>
</ul>
<h3>Limitations</h3>
<ul>
<li>The mobile image is not displayed in the block editor</li>
<li>Video background is not supported</li>
<li>Repeated background is not supported</li>
<li>Parallax background is not supported</li>
</ul>
<h3>Stay Connected</h3>
<ul>
<li><a href="https://github.com/mosne/mosne-hero" rel="nofollow ugc">View on GitHub</a></li>
<li><a href="https://mosne.it/" rel="nofollow ugc">Visit my website</a></li>
<li><a href="https://x.com/mosne" rel="nofollow ugc">Follow on Twitter</a></li>
</ul>


Mosne Hero

This plugin extends the core/cover block with separate mobile and desktop background images and sizes.

Aaron Kittredge

<p>Using this widget you can easily place the Cool-er Green containing an image of the cover of the book you are reading in the sidebar. You can also specify a URL to link to when clicking on the book cover image. Supports multiple instances, so you can use it multiple times in multiple sidebars. (adapted from the Simple Image Widget)</p>
<p>Once the plugin is enabled, the widget will be available in your widgets list as “Cool-er Green Widget”. You can add this widget to sidebars as many times as you need. The control interface allows you to specify the following options for each instance of the widget:</p>
<ul>
<li>Image URL: The full URL to the image file</li>
<li>Alternate Text: Shown by the browser if image cannot be displayed</li>
<li>Link URL: URL to open when the book cover image is clicked on (optional)</li>
<li>Open link in new window: If this is checked, the above link URL will open in a new browser window</li>
</ul>


Cool-er-Green-Widget

The simple way to show what your reading on your Cool-er Green or e-reader.

Mosne Hero vs Cool-er-Green-Widget