A Python content management system designed for kirsle.net featuring a blog, comments and photo albums. https://rophako.kirsle.net/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

58 lines
1.6 KiB

{% extends "layout.html" %}
{% block title %}Arrange Photos{% endblock %}
{% block content %}
<h1>Arrange Photos</h1>
Drag and drop your photos in the positions you want them in.<p>
<form name="arrange" id="arrange-form" action="{{ url_for('photo.arrange_photos', album=album) }}" method="POST">
<input type="hidden" name="token" value="{{ csrf_token() }}">
<input type="hidden" name="order" id="order" value="">
<button type="submit" class="btn btn-primary">Save Changes</button>
<ul id="arrange-photos" class="photo-grid">
{% for photo in photos %}
<li data-name="{{ photo['key'] }}" class="portrait">
<div class="dummy"></div>
<div class="photo-grid-item">
<img src="{{ app['photo_url'] }}/{{ photo['data']['thumb'] }}" width="100%" height="100%">
<span class="name">{{ photo['data']['caption'] }}</span>
{% endfor %}
<div class="clear"></div>
{% endblock %}
{% block scripts %}
<link rel="stylesheet" type="text/css" media="all" href="/css/ui-lightness/jquery-ui-1.10.4.custom.css">
<script src="/js/jquery-ui-1.10.4.custom.js"></script>
$(document).ready(function() {
var $photos = $("#arrange-photos"),
$form = $("#arrange-form"),
$order = $("#order");
var doArrangePhotos = function() {
var order = [];
// Get the list of elements.
var list = $photos.children().each(function() {
var name = $(this).data("name");
return true;
{% endblock %}