<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Oregon ArcGIS TB</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo">ArcGIS Thumbnail Builder</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="index.html" target="_self">Home</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<h2>About</h2>
<p>
Building great thumbnails is a critical step to making your ArcGIS Online
content more transparent and approachable. You want your users to be able
to understand important information about an item before clicking on it.
</p>
<p>
This is a tool to make the thumbnail creation process a little easier on you.
</p>
<p>
You're users are happy. You're happy. It's a win/win.
</p>
<h2>Query Parameters</h2>
<p>
To make the tool re-usable, you can add the query parameters below to your URL.
</p>
<p>
<a href="/index.html?background=https://navigator.state.or.us/agol/assets/banner_images/Fort%20Rock.JPG&logo=https://www.oregon.gov/ODF/SiteCollectionImages/branding/ODFlogo_color.png&title=Fort%20Rock%20Story%20Map&category=Story%20Map&titleColor=47,120,0,0.7&sidebarColor=0,50,50,0.7" target="_self">
See This Example
</a>
</p>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Description</th>
<th>Values</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>titleColor</td>
<td>Title BG Color</td>
<td>RGBA Color</td>
<td>0,255,0,0.8</td>
</tr>
<tr>
<td>sidebarColor</td>
<td>Sidebar BG Color</td>
<td>RGBA Color</td>
<td>0,0,255,0.8</td>
</tr>
<tr>
<td>category</td>
<td>Valid Item Category</td>
<td>String</td>
<td>Story Map</td>
</tr>
<tr>
<td>background</td>
<td>URL to background image</td>
<td>String</td>
<td>https://path.to.my.background.jpg</td>
</tr>
<tr>
<td>logo</td>
<td>URL to logo image</td>
<td>String</td>
<td>https://path.to.my.logo.jpg</td>
</tr>
</tbody>
</table>
</div>
</div> <!-- /container -->
</body>
</html>