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.8 KiB

  1. {% extends "layout.html" %}
  2. {% block title %}Arrange Photos{% endblock %}
  3. {% block content %}
  4. <h1>Arrange Photos</h1>
  5. Drag and drop your photos in the positions you want them in.<p>
  6. <form name="arrange" id="arrange-form" action="{{ url_for('photo.arrange_photos', album=album) }}" method="POST">
  7. <input type="hidden" name="token" value="{{ csrf_token() }}">
  8. <input type="hidden" name="order" id="order" value="">
  9. <button type="submit" class="btn btn-primary">Save Changes</button>
  10. </form>
  11. <p>
  12. <ul id="arrange-photos" class="photo-grid">
  13. {% for photo in photos %}
  14. <li data-name="{{ photo['key'] }}" class="portrait">
  15. <div class="dummy"></div>
  16. <div class="photo-grid-item">
  17. <img src="{{ app['photo_url'] }}/{{ photo['data']['thumb'] }}" width="100%" height="100%">
  18. <span class="name">{{ photo['data']['caption'] }}</span>
  19. </div>
  20. </li>
  21. {% endfor %}
  22. </ul>
  23. <div class="clear"></div>
  24. {% endblock %}
  25. {% block scripts %}
  26. <link rel="stylesheet" type="text/css" media="all" href="/css/ui-lightness/jquery-ui-1.10.4.custom.css">
  27. <script src="/js/jquery-ui-1.10.4.custom.js"></script>
  28. <script>
  29. $(document).ready(function() {
  30. var $photos = $("#arrange-photos"),
  31. $form = $("#arrange-form"),
  32. $order = $("#order");
  33. var doArrangePhotos = function() {
  34. var order = [];
  35. // Get the list of elements.
  36. var list = $photos.children().each(function() {
  37. var name = $(this).data("name");
  38. order.push(name);
  39. });
  40. $order.val(order.join(";"));
  41. return true;
  42. };
  43. $form.submit(doArrangePhotos);
  44. $photos.sortable();
  45. $photos.disableSelection();
  46. });
  47. </script>
  48. {% endblock %}