Support » Plugin: Site Layout Customizer » [Plugin: Site Layout Customizer] Suggestion: Image max-width and max-height

  • 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 300×225, but some that are instead tall, for example 300×400. 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 200×150, and all 300×400 images will be shrunk to 112×150 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 200×150 black <div>. With the 200×150 images the user would see nothing different, but with the 112×150 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.

  • The topic ‘[Plugin: Site Layout Customizer] Suggestion: Image max-width and max-height’ is closed to new replies.