Files
OTSSignsTheme/manual/en/media_resizing_images.html
Matt Batchelder bbe8c1860c pre-img swap
2026-03-23 21:09:27 -04:00

144 lines
7.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>OTS Signs Command Center Documentation</title>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- favicon -->
<link href="../img/favicon.ico" rel="shortcut icon"/>
<!-- Bootstrap -->
<link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Stylesheets -->
<link href="../manual.css" rel="stylesheet" media="screen">
<!-- META -->
<meta name="keywords" content="digital signage, signage, narrow-casting, ots-signs, open source, agpl, documentation" />
<meta name="description" content="OTS Signs Command Center is an open source digital signage solution. It supports all main media types and can be interfaced to other sources of data using CSV, Databases or RSS." />
</head>
<body data-toc="media">
<!-- Copyright 2020 Xibo Signage Ltd. Part of the Xibo Open Source Digital Signage Solution. Released under the AGPLv3 or later. -->
<nav id="top-nav" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ss-navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">OTS Signs Command Center Documentation</a>
</div>
<div class="collapse navbar-collapse" id="ss-navbar">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</nav>
<div class="ss_body container">
<div class="row">
<div class="col-md-3">
<ul id="side-nav" class="nav nav-pills nav-stacked">
<li><a href="index.html" data-toc-name="getting_started">Getting Started</a></li><li><a href="layouts_editor.html" data-toc-name="layouts">Layouts</a></li><li><a href="media_library.html" data-toc-name="media">Media</a></li><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><ul>
<li>
<p><a href="media_library.html">Library Media</a></p>
</li>
<li>
<p><a href="media_playlists.html">Playlists</a></p>
</li>
<li>
<p><a href="media_datasets.html">DataSets</a></p>
</li>
<li>
<p><a href="media_menuboards.html">Menu Boards</a></p>
</li>
<li>
<p><a href="media_dashboard_service.html">Dashboard Service</a></p>
</li>
</ul>
</body></html>
<li><a href="media_modules.html" data-toc-name="widgets">Modules</a></li><li><a href="scheduling_events.html" data-toc-name="scheduling">Scheduling</a></li><li><a href="displays.html" data-toc-name="displays">Displays</a></li><li><a href="users_administration.html" data-toc-name="users">Users</a></li><li><a href="configure_cms_settings.html" data-toc-name="configure">Configuration and Organisation</a></li><li><a href="troubleshooting.html" data-toc-name="troubleshooting">Troubleshooting</a></li>
</ul>
</div>
<div class="col-md-9" role="main">
<!--toc=media-->
<h1 id="resizing_images">Resizing Images <a href="#resizing_images" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h1>
<p>Default thresholds and limits can be specified which are then considered in the event an image should be resized. This could be when uploading an image or an image being downloaded by a Widget - NASA RSS in a Ticker Widget for example.</p>
<p>Settings can be configured from the <strong>Settings</strong> page under the <strong>Administration</strong> section of the main CMS menu.</p>
<ul>
<li>Click on the <strong>Defaults</strong> tab:</li>
</ul>
<p><img src="img/v3_media_resizing_images.png" alt="Resizing Images" /></p>
<h2 id="resize_threshold">Resize Threshold <a href="#resize_threshold" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
<ul>
<li>Set a maximum threshold (based on the longest side) that should be considered for resizing an image.</li>
</ul>
<blockquote class="tip"><p>If you set a Resize Threshold of 1920 and you upload/download an image which is 800, this image would not need resizing. If you uploaded/downloaded an image which was 2400, this would then be resized to 1920.</p>
</blockquote>
<h2 id="resize_limit">Resize Limit <a href="#resize_limit" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
<ul>
<li>Set a limit (based on the longest side) for uploaded/downloaded images. Images that exceed this limit will not be processed and should be replaced with another image that is within the limit.</li>
</ul>
<p>This setting will determine whether the image file is too large to be processed.</p>
</div>
</div>
</div> <!-- container-->
<footer class="ss_footer" role="contentinfo">
<div class="container">
<div class="pull-right">
<img class="img-responsive logo" src="../img/logo.png" alt="OTS Signs Command Center" />
</div>
<p class="ss_back_to_top">Back to Top</p>
<p class="ss_footer_links">Currently v4</p>
<p class="ss_languages"><a href="../en/index.html">en</a></p>
</div>
</footer>
<!-- JavaScript -->
<script src="../vendor/jquery/jquery.min.js"></script>
<script src="../vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".ss-sidebar .list-group li").addClass("list-group-item");
$(".ss_body img").addClass("img-thumbnail");
$(".ss_body table").addClass("table");
// Set the selected page based on the TOC name
// Mark the appropriate top nav element as the selected page
$("#top-nav a").each(function() {
if ($(this).data().tocName == $("body").data().toc)
$(this).parent().addClass("active");
});
$(".ss_back_to_top").click(function() {
$('html, body').animate({scrollTop : 0},800);
});
if (inIframe()) {
console.log("In Frame");
$("#top-nav").css("display", "none");
$(".ss-sidebar").parent().css("display", "none");
}
});
function inIframe () {
try {
return window.self !== window.top;
} catch (e) {
return true;
}
}
</script>
</body>
</html>