Site Layout Customizer
Suggestion: Image max-width and max-height (1 post)

  1. Daedalon
    Posted 4 years ago #

    It would be useful to be able to choose in the layout settings page whether the image sizes are width or max-width and height or max-height.

    For example a case website has mostly images that are in the 4:3 aspect ratio, for example 300x225, but some that are instead tall, for example 300x400. Having both of these in the same layout makes it currently look weird. With the Site Layout Customizer setting width: 200px all the images are equally wide, but some are far taller than others.

    What would be a lot better is to have a possibility to specify in settings that a dimension is a max-value:

    Image width [200] pixels [X] max
    Leave the first field blank to not specify the width. The second setting has the effect the image will not be stretched bigger in any case and its aspect ratio will be preserved.
    Image height [150] pixels [X] max
    Image background color [#000000]
    Background color to show if image doesn't cover all of the max area. Not used if both dimensions are non-max. Leave empty for transparent (not in use).

    This way all 4:3 images will be shrunk to 200x150, and all 300x400 images will be shrunk to 112x150 by the user's web browser. As long as the images are horizontally and vertically centered, this is the best way we can imagine for the layout to look.

    The last value above is a background color to be painted "behind" the image in the maximum image size. In the above example all images would be drawn over a 200x150 black <div>. With the 200x150 images the user would see nothing different, but with the 112x150 image user would see it in the middle of a black background - in other words between two 39 px bars. <b>Note: </b> Not to be confused with the current general "background color" setting, which does something very different.

    In code these require two ifs for width or max-width and height or max-height in lines 1348-1349, adding an if for the <div> container around the image that is printed on line 1362, and the appropriate settings.


Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Site Layout Customizer
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic