Respecting image size

  • 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][/compare] inside that code, it renders the correct size but the second comparison image squishes with the slider instead the normal comparison behavior.
    <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.

    • This topic was modified 4 years, 11 months ago by luxoperon.
    • This topic was modified 4 years, 11 months ago by luxoperon.
Viewing 1 replies (of 1 total)
  • Plugin Author kylewetton

    (@kylewetton)

    Hey @luxoperon, really sorry for the late reply on this one.

    Basically, the comparison slider will take the width of it’s parent. So if its in a container with the width of 800px, the comparison slider will scale to be that width. You could simply wrap the entire slider in a div and set a size that way.

    For instance

    <div style="width: 420px">
... comparison slider stuff here
</div>

    Let me know how that goes

    • This reply was modified 4 years, 9 months ago by kylewetton.
Viewing 1 replies (of 1 total)
  • The topic ‘Respecting image size’ is closed to new replies.