Skip to content

Instantly share code, notes, and snippets.

@eyemyth

eyemyth/gist:685344a45652ff871ce0047712f87d72

Created April 11, 2018 20:14
Show Gist options
  • Save eyemyth/685344a45652ff871ce0047712f87d72 to your computer and use it in GitHub Desktop.
Save eyemyth/685344a45652ff871ce0047712f87d72 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!doctype html>
<html class="no-js" lang="en-gb">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Wagtail - Editing image Potted plant and stars</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="/wgbh/nova/static/wagtailadmin/js/vendor/modernizr-2.6.2.min.js"></script>
<link rel="stylesheet" href="/wgbh/nova/static/wagtailadmin/css/normalize.css" />
<link rel="stylesheet" href="/wgbh/nova/static/wagtailadmin/css/vendor/jquery-ui/jquery-ui-1.10.3.verdant.css" />
<link rel="stylesheet" href="/wgbh/nova/static/wagtailadmin/css/vendor/jquery.tagit.css">
<link rel="stylesheet" href="/wgbh/nova/static/wagtailadmin/css/core.css" type="text/css" />
<!-- Focal point chooser -->
<link rel="stylesheet" href="/wgbh/nova/static/wagtailimages/css/vendor/jquery.Jcrop.min.css" type="text/css">
<link rel="stylesheet" href="/wgbh/nova/static/wagtailimages/css/focal-point-chooser.css" type="text/css">
<link rel="shortcut icon" href="/wgbh/nova/static/wagtailadmin/images/favicon.ico" />
</head>
<body id="wagtail" class=" ">
<!--[if lt IE 9]>
<p class="capabilitymessage">You are using an <strong>outdated</strong> browser not supported by this software. Please <a href="http://browsehappy.com/">upgrade your browser</a>.</p>
<![endif]-->
<noscript class="capabilitymessage">
Javascript is required to use Wagtail, but it is currently disabled.<br />
Here are the <a href="http://www.enable-javascript.com/" target="_blank" rel="noopener">instructions how to enable JavaScript in your web browser</a>.
</noscript>
<script>
(function(document, window) {
window.wagtailConfig = window.wagtailConfig || {};
wagtailConfig.ADMIN_API = {
PAGES: '/cms/api/v2beta/pages/',
DOCUMENTS: '/cms/api/v2beta/documents/',
IMAGES: '/cms/api/v2beta/images/',
EXTRA_CHILDREN_PARAMETERS: '',
};
wagtailConfig.STRINGS = {
EDIT: "Edit",
DELETE: "Delete",
PAGE: "Page",
PAGES: "Pages",
LOADING: "Loading…",
NO_RESULTS: "No results",
SERVER_ERROR: "Server Error",
SEE_CHILDREN: "See children",
SEE_ALL: "See all",
CLOSE_EXPLORER: "Close explorer",
ALT_TEXT: "Alt text",
WRITE_HERE: "Write here…",
HORIZONTAL_LINE: "Horizontal line",
LINE_BREAK: "Line break",
UNDO: "Undo",
REDO: "Redo",
RELOAD_PAGE: "Reload the page",
RELOAD_EDITOR: "Reload saved content",
SHOW_LATEST_CONTENT: "Show latest content",
SHOW_ERROR: "Show error",
EDITOR_CRASH: "The editor just crashed. Content has been reset to the last saved version.",
};
wagtailConfig.ADMIN_URLS = {
PAGES: '/cms/pages/'
};
})(document, window);
</script>
<script src="/wgbh/nova/static/wagtailadmin/js/vendor/jquery-3.2.1.min.js"></script>
<script src="/wgbh/nova/static/wagtailadmin/js/vendor/jquery-ui-1.12.1.min.js"></script>
<script src="/wgbh/nova/static/wagtailadmin/js/vendor/jquery.datetimepicker.js"></script>
<script src="/wgbh/nova/static/wagtailadmin/js/vendor/jquery.autosize.js"></script>
<script src="/wgbh/nova/static/wagtailadmin/js/vendor/bootstrap-transition.js"></script>
<script src="/wgbh/nova/static/wagtailadmin/js/vendor/bootstrap-modal.js"></script>
<script src="/wgbh/nova/static/wagtailadmin/js/vendor/bootstrap-tab.js"></script>
<script src="/wgbh/nova/static/wagtailadmin/js/vendor/tag-it.js"></script>
<script src="/wgbh/nova/static/wagtailadmin/js/core.js"></script>
<script src="/wgbh/nova/static/wagtailadmin/js/vendor.js"></script>
<script src="/wgbh/nova/static/wagtailadmin/js/wagtailadmin.js"></script>
<script type="text/javascript" src="/wgbh/nova/static/wagtailadmin/js/submenu.js"></script>
<script>
$(function() {
$('#id_tags').tagit({
autocomplete: {source: "/cms/tag-autocomplete/"}
});
});
</script>
<!-- Focal point chooser -->
<script src="/wgbh/nova/static/wagtailadmin/js/vendor/jquery.ba-throttle-debounce.min.js"></script>
<script src="/wgbh/nova/static/wagtailimages/js/vendor/jquery.Jcrop.min.js"></script>
<script src="/wgbh/nova/static/wagtailimages/js/focal-point-chooser.js"></script>
<div class="wrapper">
<div class="nav-wrapper">
<div class="inner">
<a href="/cms/" class="logo" title="Wagtail v.2.0.1">
<div class="wagtail-logo-container__mobile u-hidden@medium">
<img class="wagtail-logo wagtail-logo__full" src="/wgbh/nova/static/wagtailadmin/images/wagtail-logo.svg" alt="Wagtail" width="80" />
</div>
<div class="wagtail-logo-container__desktop u-hidden@small">
<img class="wagtail-logo wagtail-logo__body" src="/wgbh/nova/static/wagtailadmin/images/logo-body.svg" alt=""/>
<img class="wagtail-logo wagtail-logo__tail" src="/wgbh/nova/static/wagtailadmin/images/logo-tail.svg" alt="" />
<img class="wagtail-logo wagtail-logo__eye--open" src="/wgbh/nova/static/wagtailadmin/images/logo-eyeopen.svg" alt="" />
<img class="wagtail-logo wagtail-logo__eye--closed" src="/wgbh/nova/static/wagtailadmin/images/logo-eyeclosed.svg" alt="" />
</div>
<span class="u-hidden@medium">Dashboard</span>
</a>
<form class="nav-search" action="/cms/pages/search/" method="get">
<div>
<label for="menu-search-q">Search</label>
<input type="text" id="menu-search-q" name="q" placeholder="Search" />
<button class="button" type="submit">Search</button>
</div>
</form>
<nav class="nav-main">
<ul>
<li class="menu-item" data-explorer-menu-item>
<a href="/cms/pages/" class="icon icon-folder-open-inverse" data-explorer-start-page="1">Pages</a>
</li>
<li class="menu-item menu-active">
<a href="/cms/images/" class="icon icon-image">Images</a>
</li>
<li class="menu-item">
<a href="/cms/documents/" class="icon icon-doc-full-inverse">Documents</a>
</li>
<li class="menu-item">
<a href="/cms/snippets/" class="icon icon-snippet">Snippets</a>
</li>
<li class="menu-item">
<a href="#" class="submenu-trigger icon icon-cogs">Settings</a>
<div class="nav-submenu">
<h2 class="icon icon-cogs">Settings</h2>
<ul><li class="menu-item">
<a href="/cms/users/" class="icon icon-user">Users</a>
</li>
<li class="menu-item">
<a href="/cms/groups/" class="icon icon-group">Groups</a>
</li>
<li class="menu-item">
<a href="/cms/sites/" class="icon icon-site">Sites</a>
</li>
<li class="menu-item">
<a href="/cms/collections/" class="icon icon-folder-open-1">Collections</a>
</li>
<li class="menu-item">
<a href="/cms/redirects/" class="icon icon-redirect">Redirects</a>
</li>
<li class="footer">
<div class="menu-item"><p class="wagtail-version">Wagtail v.2.0.1</p></div>
</li>
</ul>
</div>
</li>
<li class="footer" id="footer">
<div class="account" id="account-settings" title="Edit your account">
<span class="avatar square avatar-on-dark">
<img src="//www.gravatar.com/avatar/d41d8cd98f00b204e9800998ecf8427e?s=50&d=mm" />
</span>
<em class="icon icon-arrow-up-after">jthompson</em>
</div>
<ul class="footer-submenu">
<li><a href="/cms/account/" class="icon icon-user">Account settings</a></li>
<li><a href="/cms/logout/" class="icon icon-logout">Log out</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="explorer__wrapper" data-explorer-menu></div>
</div>
<div class="content-wrapper">
<div class="content">
<div class="messages">
</div>
<div id="nav-toggle" class="nav-toggle icon text-replace">Menu</div>
<header class=" ">
<div class="row nice-padding">
<div class="left">
<div class="col header-title">
<h1 class="icon icon-image">
Editing <span>Potted plant and stars</span></h1>
</div>
</div>
<div class="right">
</div>
</div>
</header>
<div class="row row-flush nice-padding">
<div class="col5">
<form action="/cms/images/1880/" method="POST" enctype="multipart/form-data" novalidate>
<input type='hidden' name='csrfmiddlewaretoken' value='qYJkRdok3c3mFg8TwD7X5S3BHoaXDZnqZdk8gBCRqPxgVusyvFRUQteyIC1DRxDf' />
<ul class="fields">
<li class=" ">
<div class="field char_field text_input ">
<label for="id_title">Title:</label>
<div class="field-content">
<div class="input ">
<input type="text" name="title" value="Potted plant and stars" maxlength="200" id="id_title" />
<span></span>
</div>
</div>
</div>
</li>
<li class="required ">
<div class="field wagtail_image_field file_input ">
<label for="id_file">File:</label>
<div class="field-content">
<div class="input ">
<a href="/wgbh/nova/media/images/what-is-photosynthesis-11.original.png" class="icon icon-image">what-is-photosynthesis-11</a> (672x505)<br /><br />
Change image file:
<input type="file" name="file" required id="id_file" />
<span></span>
</div>
<p class="help">Supported formats: GIF, JPEG, PNG. Maximum filesize: 10.0 MB.</p>
</div>
</div>
</li>
<li class=" ">
<div class="field tag_field admin_tag_widget ">
<label for="id_tags">Tags:</label>
<div class="field-content">
<div class="input ">
<input type="text" name="tags" id="id_tags" /><script>initTagField("id_tags", "/cms/tag-autocomplete/", true);</script>
<span></span>
</div>
</div>
</div>
</li>
<input type="hidden" name="focal_point_x" class="focal_point_x" id="id_focal_point_x" />
<input type="hidden" name="focal_point_y" class="focal_point_y" id="id_focal_point_y" />
<input type="hidden" name="focal_point_width" class="focal_point_width" id="id_focal_point_width" />
<input type="hidden" name="focal_point_height" class="focal_point_height" id="id_focal_point_height" />
<input type="hidden" name="caption" value="{
&quot;blocks&quot;: [
{
&quot;key&quot;: &quot;0tewb&quot;,
&quot;type&quot;: &quot;unstyled&quot;,
&quot;depth&quot;: 0,
&quot;text&quot;: &quot;A potted plant at night&quot;,
&quot;inlineStyleRanges&quot;: [],
&quot;entityRanges&quot;: []
}
],
&quot;entityMap&quot;: {}
}" id="id_caption" data-draftail-input /><script>window.draftail.initEditor('#id_caption', {"entityTypes": [{"type": "EMBED", "icon": "media", "description": "Embed"}, {"type": "LINK", "icon": "link", "description": "Link", "attributes": ["url", "id", "parentId"], "whitelist": {"href": "^(http:|https:|undefined$)"}}, {"type": "DOCUMENT", "icon": "doc-full", "description": "Document"}, {"type": "IMAGE", "icon": "image", "description": "Image", "attributes": ["id", "src", "alt", "format"], "whitelist": {"id": true}}], "enableHorizontalRule": true, "inlineStyles": [{"type": "BOLD", "icon": "bold", "description": "Bold"}, {"type": "ITALIC", "icon": "italic", "description": "Italic"}], "blockTypes": [{"label": "H2", "type": "header-two", "description": "Heading 2"}, {"label": "H3", "type": "header-three", "description": "Heading 3"}, {"label": "H4", "type": "header-four", "description": "Heading 4"}, {"type": "ordered-list-item", "icon": "list-ol", "description": "Numbered list"}, {"type": "unordered-list-item", "icon": "list-ul", "description": "Bulleted list"}]}, document.currentScript)</script>
<input type="hidden" name="credit" value="{
&quot;blocks&quot;: [
{
&quot;key&quot;: &quot;e66zo&quot;,
&quot;type&quot;: &quot;unstyled&quot;,
&quot;depth&quot;: 0,
&quot;text&quot;: &quot;\u00a9 WGBH Educational Foundation&quot;,
&quot;inlineStyleRanges&quot;: [],
&quot;entityRanges&quot;: []
}
],
&quot;entityMap&quot;: {}
}" id="id_credit" data-draftail-input /><script>window.draftail.initEditor('#id_credit', {"entityTypes": [{"type": "EMBED", "icon": "media", "description": "Embed"}, {"type": "LINK", "icon": "link", "description": "Link", "attributes": ["url", "id", "parentId"], "whitelist": {"href": "^(http:|https:|undefined$)"}}, {"type": "DOCUMENT", "icon": "doc-full", "description": "Document"}, {"type": "IMAGE", "icon": "image", "description": "Image", "attributes": ["id", "src", "alt", "format"], "whitelist": {"id": true}}], "enableHorizontalRule": true, "inlineStyles": [{"type": "BOLD", "icon": "bold", "description": "Bold"}, {"type": "ITALIC", "icon": "italic", "description": "Italic"}], "blockTypes": [{"label": "H2", "type": "header-two", "description": "Heading 2"}, {"label": "H3", "type": "header-three", "description": "Heading 3"}, {"label": "H4", "type": "header-four", "description": "Heading 4"}, {"type": "ordered-list-item", "icon": "list-ol", "description": "Numbered list"}, {"type": "unordered-list-item", "icon": "list-ul", "description": "Bulleted list"}]}, document.currentScript)</script>
<li>
<input type="submit" value="Save" class="button" />
<a href="/cms/images/1880/delete/" class="button button-secondary no">Delete image</a>
</li>
</ul>
</form>
</div>
<div class="col5 divider-after">
<h2 class="label">Focal point (optional)</h2>
<p>To define this image's most important region, drag a box over the image below. </p>
<div class="focal-point-chooser"
style="max-width: 672px; max-height: 505px;"
data-focal-point-x="None"
data-focal-point-y="None"
data-focal-point-width="None"
data-focal-point-height="None">
<img alt="Potted plant and stars" height="505" src="/wgbh/nova/media/images/what-is-photosynthesis-11.max-800x600.png" width="672" data-original-width="672" data-original-height="505" class="show-transparency">
<div class="current-focal-point-indicator hidden"></div>
</div>
<br />
<button class="button button-secondary no remove-focal-point">Remove focal area</button>
</div>
<div class="col2 ">
<dl>
<dt>Max dimensions</dt>
<dd>672x505</dd>
<dt>Filesize</dt>
<dd>27.6 KB</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment