Limit Display Size of Uploaded Images

Occasionally, users may inadvertently upload an image that takes up the entire screen. Therefore, if you have a board where users can upload image files for display on the display view, you may wish to restrict the size of such images.

To restrict the size of uploaded images, go to the display view of the applicable board. At the beginning of the HTML code, there is likely a <style> CSS block. Within this block, add the following:

Copy Code 
.board_image img{
max-width:550px;
}

In the example, the maximum width for images is set to 550 pixels. You can set this width to your preferred maximum.

After adding this code, wrap your image field in a <span> tag and give it a class of board_image:

Copy Code 
<span class="board_image"><eocfield name="YourFieldnameGoesHere" filetype="image"></eocfield></span>

If an uploaded image is larger than the set maximum, the image is scaled down appropriately. If the uploaded image is smaller than the defined maximum, it retains its original size.