This plugin won’t respect any of the image sizing rules I try to apply. It renders the image at full page width which also has the issue of enlarging images of a lower resolution (this always looks terrible). The one variation I was able to size correctly results in a scaling issues with the 2nd comparison image. Would someone please provide several code examples for successfully modifying image size and alignment control while using this plugin.
Thank you
I’ve tried:
-
Using img command modifiers like width=”400″ height=”600″
-
Using image class sizes (small, medium, large) built into wordpress and similar classes provided by plugins.
[compare]
<figure class="wp-block-image size-large is-resized"><img src="PIerreCenterLobbyPhoto_1024.jpg" alt="" class="wp-image-535" width="342" height="512"></figure>
<figure class="wp-block-image size-large is-resized"><img src="PIerreCenterLobbyDrawing_1024.jpg" alt="" class="wp-image-535" width="342" height="512"></figure>
[/compare]-
Copying the code created by WP editor image block for two images that render the desired size. If we place that code between [compare][/compare] photos render fullscreen and look terrible
<figure class="wp-block-image size-large is-resized">
[compare]
<img src="PIerreCenterLobbyPhoto_1024.jpg" alt="" class="wp-image-535" width="342" height="512">
<img src="PIerreCenterLobbyDrawing_1024.jpg" alt="" class="wp-image-535" width="342" height="512">
[/compare]
</figure>-
Copying the code created by WP editor image block for two images that render the desired size. If we place [compare]
<figure class="wp-block-image size-large is-resized">
[compare]
<img src="PIerreCenterLobbyPhoto_1024.jpg" alt="" class="wp-image-535" width="342" height="512">
<img src="PIerreCenterLobbyDrawing_1024.jpg" alt="" class="wp-image-535" width="342" height="512">
[/compare]
</figure>Note that I am not a web coder, but I can recognize and implement coding patterns and typically find success with a little exploration.
]]>