Home > WebEOC > Admin Guide > Board Building Tips > Limit Display Size of Uploaded Images

Limit Display Size of Uploaded Images

Table of contents
No headers

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:

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

Note: 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:

<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.

You must to post a comment.
Last modified

Tags

Classifications

This page has no classifications.