Toro_Unit (Hiroshi Urabe)

Aki Hamano

<p>Enable Responsive Image adds settings to the Image block to display different images depending on the width of the screen. You can add multiple images and set media queries and resolution for each image. If the screen width matches the conditions of that media query, it will switch to the corresponding image.</p>
<h3>Resources</h3>
<h4>Image for screenshot</h4>
<ul>
<li>License: Public Domain</li>
<li>Source: https://openverse.org/image/cd8e5cc5-d38a-462e-b4c1-1ea5c6f94e20</li>
</ul>


Enable Responsive Image


This is exactly the plugin I wanted. Thank you.


Must install for website creation at work.

WordPress plugin that adds settings to the Image block to display different images depending on the width of the screen.

Leonardo Giacone

<p>Easy Panorama plugin for WordPress websites allows you to display wide/panoramic images in a more accessible way: enjoy your panoramic photos scrolling them on the x-axis or moving your mobile device.</p>
<p>You can start embedding your panoramic images using the handy <strong>shortcode</strong> (TinyMCE editor) or the new <strong>Block</strong>.</p>
<p>Easy Panorama uses the packed <a href="http://terrymun.github.io/paver/?source=easy-panorama-wp-plugin" rel="nofollow ugc">Paver</a>.</p>
<h4>Main features</h4>
<ol>
<li>Enqueuing of Paver Javascript and CSS files.</li>
<li>Customization of Paver appearance and behaviour from the Panorama Settings page.</li>
<li>Other geek settings in the Advanced Settings page.</li>
<li>[easy_panorama] shortcode to embed panoramic images with no hassle.</li>
<li>Custom Panorama Block for a better editing experience.</li>
</ol>
<h4>Shortcode (Classic WordPress editor)</h4>
<p>Include your favourite panoramic images in posts and pages using the <strong>built-in shortcode functionality</strong>.</p>
<p>If you are using the classic WordPress editor (TinyMCE), you will find the <em>Add Panorama</em> button above the editor: click on the button and select the image you want to include.<br />
The shortcode will be inserted in the editor and replaced by the panoramic viewer when you visit the website.</p>
<p>You can customize the appearance and behaviour of the panoramic viewer through the Easy Panorama settings page or adding specific attributes to each shortcode: these will override the general settings.</p>
<h4>Shortcode attributes cheat sheet:</h4>
<ul>
<li><code>id</code>: attachment/image WordPress id <em>(number)</em> – <strong>Required</strong></li>
<li><code>url</code>: image url <em>(string)</em></li>
<li><code>meta</code>: determines whether a metadata overlay should be displayed <em>(boolean)</em></li>
<li><code>title</code>: image title, showed on overlay in case “Show image meta” (“meta” attribute) is set to true  <em>(string)</em></li>
<li><code>alt</code>: image alternative text, showed on overlay in case “Show image meta” (“meta” attribute) is set to true  <em>(string)</em></li>
<li><code>graceful_failure</code>: allows the display of failure message <em>(boolean)</em></li>
<li><code>failure_message</code>: this message will appear in mobile devices with no gyroscopic data or no physical orientation support <em>(string)</em></li>
<li><code>failure_message_insert</code>: the location where the failure message will be inserted <em>(before | after)</em></li>
<li><code>minimum_overflow</code>: the excess width the picture must have before panoramic viewer kicks in <em>(number)</em></li>
<li><code>start_position</code>: the start position of the panorama <em>(number from 0 to 1)</em></li>
</ul>
<h4>Block (Gutenberg editor)</h4>
<p>Include your favourite panoramic images in posts and pages using the <strong>built-in block functionality</strong>.</p>
<p>If you are using the Gutenberg editor (WordPress >= 5.0), you find the <strong>Panorama</strong> block ready to be embedded in your post.<br />
Search for “Panorama” within the blocks list, select it and choose the image you want to include.<br />
You can customize the appearance and behaviour of each panoramic viewer thanks to the Inspector Control.</p>
<h4>Block features</h4>
<ul>
<li>Embed your panoramic/wide images in the new editor with no hassle.</li>
<li>Preview your panorama within the editor.</li>
<li>Customize the appearance and behaviour of each panoramic viewer thanks to the Inspector Control.</li>
<li>Transform “Image” blocks into “Panorama” blocks with one click.</li>
<li>Transform “Panorama” blocks into “Image” blocks with one click.</li>
<li>Transform previous inserted <code>[easy_panorama]</code> shortcodes into “Panorama” blocks with one click.</li>
</ul>
<h4>Requirements</h4>
<p>Easy Panorama requires:</p>
<p><a href="https://wordpress.org/" rel="ugc">WordPress</a> >= 4.5 (Required for TinyMCE shortcode)<br />
<a href="https://wordpress.org/" rel="ugc">WordPress</a> >= 5.0 (Required for the new custom Panorama Block feature)<br />
<a href="https://secure.php.net/manual/en/install.php" rel="nofollow ugc">PHP</a> >= 5.6<br />
<a href="https://nodejs.org/en/" rel="nofollow ugc">Node</a> >= 8.9.X (Required for Block development)<br />
<a href="https://yarnpkg.com/en/docs/install" rel="nofollow ugc">Yarn</a> (Required for Block development)</p>
<h4>Contribution</h4>
<p>There are many ways to contribute to this plugin:</p>
<ol>
<li>Report a bug, submit pull request or new feature proposal: visit the <a href="https://github.com/leopuleo/easy-panorama" rel="nofollow ugc">Github repo</a>.</li>
<li>Translate it in your language: visit the <a href="https://translate.wordpress.org/projects/wp-plugins/easy-panorama" rel="nofollow ugc">WordPress translation page</a>.</li>
<li>Rate it 5 stars on <a href="https://wordpress.org/support/view/plugin-reviews/easy-panorama?filter=5#postform" rel="ugc">WordPress.org</a>.</li>
<li><a href="//paypal.me/LeonardoGiacone" rel="nofollow ugc">Buy me a beer!</a></li>
</ol>
<h4>Support</h4>
<p>Need help? Read the <a href="https://wordpress.org/plugins/easy-panorama/faq/" rel="ugc">FAQ</a> or visit the <a href="https://wordpress.org/support/plugin/easy-panorama" rel="ugc">WordPress.org</a> support page / <a href="https://github.com/leopuleo/easy-panorama/issues" rel="nofollow ugc">Github Issue Tracker</a>.</p>


Easy Panorama

Embed interactive wide/panoramic images on your site. Optimised for responsive layouts, it works great with devices equipped with motion sensors.

Enable Responsive Image vs Easy Panorama