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

238 lines
8.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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="widgets">
<!-- 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><li><a href="media_modules.html" data-toc-name="widgets">Modules</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>
<a href="media_modules.html">Modules</a>
</li>
<li>
<a href="media_modules_connectors.html">Connectors</a>
</li>
<li>
<a href="media_module_audio.html">Audio</a>
</li>
<li>
<a href="media_module_calendar.html">Calendar</a>
</li>
<li>
<a href="media_module_clock.html">Clock</a>
</li>
<li>
<a href="media_module_countdown.html">Countdown</a>
</li>
<li>
<a href="media_module_currencies.html">Currencies</a>
</li>
<li>
<a href="media_module_dashboard.html">Dashboard</a>
</li>
<li>
<a href="media_module_dataset.html">DataSet</a>
</li>
<li>
<a href="media_module_embedded.html">Embedded</a>
</li>
<li>
<a href="media_module_emergency_alerts.html">Emergency Alert</a>
</li>
<li>
<a href="media_module_flash.html">Flash</a>
</li>
<li>
<a href="media_module_googletraffic.html">Google Traffic</a>
</li>
<li>
<a href="media_module_hls.html">HLS</a>
</li>
<li>
<a href="media_module_htmlpackage.html">HTML Package</a>
</li>
<li class="active">
<a href="media_module_image.html">Image</a>
</li>
<li>
<a href="media_module_localvideo.html">Local Video</a>
</li>
<li>
<a href="media_module_mastodon.html">Mastodon</a>
</li>
<li>
<a href="media_module_menuboards_category.html">Menu Board Category</a>
</li>
<li>
<a href="media_module_menuboards_products.html">Menu Board Products</a>
</li>
<li>
<a href="media_module_national_weather_service.html">National Weather Service</a>
</li>
<li>
<a href="media_module_notifications.html">Notifications</a>
</li>
<li>
<a href="media_module_pdf.html">PDF</a>
</li>
<li>
<a href="media_module_powerpoint.html">PowerPoint</a>
</li>
<li>
<a href="media_module_shellcommand.html">Shell Command</a>
</li>
<li>
<a href="media_module_stocks.html">Stocks</a>
</li>
<li>
<a href="media_module_ticker.html">Ticker</a>
</li>
<li>
<a href="media_module_video.html">Video</a>
</li>
<li>
<a href="media_module_video_in.html">Video In</a>
</li>
<li>
<a href="media_module_weather.html">Weather</a>
</li>
<li>
<a href="media_module_webpage.html">Webpage</a>
</li>
<li>
<a href="media_module_world_clock.html">World Clock</a>
</li>
</ul>
</body></html>
<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">
<h1 id="image">Image <a href="#image" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h1>
<p>Add Image files to include on your Layouts and Playlists from the <a href="layouts_editor_using_library_search.html">Library Search</a>.</p>
<h2 id="overview">Overview <a href="#overview" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
<ul>
<li>Valid extensions: jpg,jpeg,png,bmp,gif,webp.</li>
</ul>
<blockquote class="tip"><p>Animated gifs are not supported on any Player!</p>
</blockquote>
<ul>
<li>
<a href="media_library.html#content-add-media-upload">Upload</a> new image files directly to Playlists/Layouts from the Library Search.</li>
<li>Files uploaded directly to Playlists and Layouts are automatically saved to the <a href="media_library.html">Library</a> for re-use.</li>
<li>Image files can be also be uploaded in advance to the Library.</li>
</ul>
<blockquote class="tip"><p>When selecting image files to upload, users should check the resolution of the image and keep it within the intended screen size. Caution should be taken as uploading very large images can cause issues for the Player.</p>
</blockquote>
<ul>
<li>
<p>Set <a href="media_playlists.html#content-widget-expiry-dates">start and end times</a> for image files uploaded directly to a Playlist.</p>
</li>
<li>
<p>Save image files to Folders on upload, to easily control access to Users.</p>
</li>
<li>
<p>Centre, Stretch and Fit scaling.</p>
</li>
<li>
<p>Select images to use from Pixabay without leaving the CMS.</p>
</li>
</ul>
<p><img src="img/v4_media_module_image.png" alt="Image" /></p>
<p><strong>As OTS Signs Command Center takes no measures to control what content is put on your displays, it is your responsibility to ensure that any images used are appropriately attributed if you do not own the rights.</strong></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>