Interface Update (Ongoing)

Update front end according to web design (Ongoing)

admin/batch_manager_unit.php

@@ -193,6 +193,20 @@ SELECT *
   LIMIT '.$page['nb_images'].' OFFSET '.$page['start'].'
 ;';
   $result = pwg_query($query);
+  
+  $storage_category_id = null;
+  if (!empty($row['storage_category_id']))
+  {
+    $storage_category_id = $row['storage_category_id'];
+  }
+
+  $level_convert = [
+    "0" => "4",
+    "1" => "3",
+    "2" => "2",
+    "4" => "1",
+    "8" => "0",
+];
 
   while ($row = pwg_db_fetch_assoc($result))
   {
@@ -200,6 +214,10 @@ SELECT *
 
     $src_image = new SrcImage($row);
 
+    $image_file = $row['file'];
+
+
+
     $query = '
 SELECT
     id,
@@ -208,6 +226,7 @@ SELECT
     JOIN '.TAGS_TABLE.' AS t ON t.id = it.tag_id
   WHERE image_id = '.$row['id'].'
 ;';
+
     $tag_selection = get_taglist($query);
 
     $legend = render_element_name($row);
@@ -216,12 +235,94 @@ SELECT
       $legend.= ' ('.$row['file'].')';
     }
     $extTab = explode('.',$row['path']);
+
+  
+
+// represent
+
+    // categories
+
+    $query = '
+    SELECT category_id, uppercats, dir
+      FROM '.IMAGE_CATEGORY_TABLE.' AS ic
+        INNER JOIN '.CATEGORIES_TABLE.' AS c
+          ON c.id = ic.category_id
+      WHERE image_id = '.$row['id'].'
+    ;';
+
+    $sub_result = pwg_query($query);
+    $related_categories = array();
+    $related_category_ids = array();
+    $media['image'] = get_image_infos($row['id'], true);
     
+    while ($item = pwg_db_fetch_assoc($sub_result))
+    {
+      $name =
+        get_cat_display_name_cache(
+          $item['uppercats'],
+          get_root_url().'admin.php?page=album-'
+          );
+    
+      if ($item['category_id'] == $storage_category_id)
+      {
+        $template->assign('STORAGE_CATEGORY', $name);
+      }
+    
+      $related_categories[$item['category_id']] = array('name' => $name, 'unlinkable' => $item['category_id'] != $storage_category_id);
+      $related_category_ids[] = $item['category_id'];
+    }
+
+    // jump to link
+    $image_file = $row['file'];
+
+    $query = '
+    SELECT category_id
+    FROM '.IMAGE_CATEGORY_TABLE.'
+    WHERE image_id = '.$row['id'].'
+    ;';
+    $authorizeds = array_diff(
+      array_from_query($query, 'category_id'),
+      explode(
+        ',',
+        calculate_permissions($user['id'], $user['status'])
+      )
+    );
+
+    if (isset($row['cat_id'])
+    and in_array($row['cat_id'], $authorizeds))
+    {
+      $url_img = make_picture_url(
+        array(
+          'image_id' => $row['id'],
+          'image_file' => $image_file,
+          'category' => $cache['cat_names'][ $row['cat_id'] ],
+          )
+        );
+    }
+    else
+    {
+      foreach ($authorizeds as $category)
+      {
+        $url_img = make_picture_url(
+          array(
+            'image_id' => $row['id'], //utile ?
+            'image_file' => $image_file,
+            'category' => $cache['cat_names'][ $category ],
+            )
+          );
+        break;
+      }
+    }
+    $admin_photo_base_url = get_root_url().'admin.php?page=photo-'.$row['id'];
+    $admin_url_start = $admin_photo_base_url.'-properties';
+    $admin_url_start.= isset($row['cat_id']) ? '&cat_id='.$row['cat_id'] : '';
+    $selected_level = isset($row['level']) ? $row['level'] : $row['level'];
+
     $template->append(
       'elements', array_merge($row,
       array(
         'ID' => $row['id'],
-        'TN_SRC' => DerivativeImage::url(IMG_THUMB, $src_image),
+        'TN_SRC' => DerivativeImage::url(IMG_MEDIUM, $src_image),
         'FILE_SRC' => DerivativeImage::url(IMG_LARGE, $src_image),
         'LEGEND' => $legend,
         'U_EDIT' => get_root_url().'admin.php?page=photo-'.$row['id'],
@@ -232,14 +333,41 @@ SELECT
         'DATE_CREATION' => $row['date_creation'],
         'TAGS' => $tag_selection,
         'is_svg' => (strtoupper(end($extTab)) == 'SVG'),
+        'TITLE' => render_element_name($row),
+        'DIMENSIONS' => @$row['width'].'x'.@$row['height'].' px',
+        'FORMAT' => ($row['width'] >= $row['height'])? 1:0,//0:horizontal, 1:vertical
+        'FILESIZE' => l10n('%.2f MB',$row['filesize']/1024),
+        'REGISTRATION_DATE' => format_date($row['date_available']),
+        'EXT' => l10n('%s file type',end($extTab)),
+        'POST_DATE' => l10n('Posted the %s', format_date($row['date_available'], array('day', 'month', 'year'))),
+        'AGE' => l10n(ucfirst(time_since($row['date_available'], 'year'))),
+        'ADDED_BY' => l10n('Added by %s', $row['added_by']),
+        'STATS' => l10n('Visited %d times', $row['hit']),
+        'FILE' => l10n('%s', $row['file']),
+        'related_categories' => $related_categories,
+        'related_category_ids' => $related_category_ids,
+        'U_JUMPTO' => (isset($url_img) and $user['level'] >= $media['image']['level']) ? $url_img : null,
+        'tag_selection' => $tag_selection,
+        'U_DOWNLOAD' => 'action.php?id='.$row['id'].'&part=e&pwg_token='.get_pwg_token().'&download',
+        'U_HISTORY' => get_root_url().'admin.php?page=history&filter_image_id='.$row['id'],
+        'U_DELETE' => $admin_url_start.'&delete=1&pwg_token='.get_pwg_token(),
+        'U_SYNC' => $admin_url_start.'&sync_metadata=1',
+        'PATH'=>$row['path'],
+        'LEVEL_CONVERT' => $level_convert[!empty($row['level'])?$row['level']:'0'],
+        'level_options_selected' => array($selected_level)
+
+
         )
       ));
   }
 
+
   $template->assign(array(
     'ELEMENT_IDS' => implode(',', $element_ids),
     'CACHE_KEYS' => get_admin_client_cache_keys(array('tags')),
+    
     ));
+    
 }
 
 trigger_notify('loc_end_element_set_unit');

admin/themes/default/js/album_selector.js

@@ -8,15 +8,20 @@ function linked_albums_close() {
   $("#addLinkedAlbum").fadeOut();
 }
 
-function linked_albums_open() {
+function linked_albums_open(pictureId) {
   $("#addLinkedAlbum").fadeIn();
+  if(null != pictureId)
+    {
+      console.log(pictureId);
+      $("#addLinkedAlbum .linkedAlbumPopInContainer").attr("id",pictureId);
+    }
   $(".search-input").val("");
   $(".search-input").focus();
   $("#searchResult").empty();
   $(".limitReached").html(str_no_search_in_progress);
 }
 
-function linked_albums_search(searchText) {
+function linked_albums_search(searchText, pictureId) {
 
   if (api_method == 'pwg.categories.getList') {
     api_params = {
@@ -32,8 +37,6 @@ function linked_albums_search(searchText) {
     }
   }
 
-  // console.log(api_method);
-
   $(".linkedAlbumPopInContainer .searching").show();
   $.ajax({
     url: "ws.php?format=json&method=" + api_method,
@@ -47,7 +50,11 @@ function linked_albums_search(searchText) {
       $(".linkedAlbumPopInContainer .searching").hide();
 
       categories = raw_data.result.categories;
-      fill_results(categories);
+      if (typeof pictureId !== 'undefined') {
+        fill_results(categories, pictureId);
+      } else {
+        fill_results(categories);
+      }
 
       if (raw_data.result.limit_reached) {
         $(".limitReached").html(str_result_limit.replace("%d", categories.length));

admin/themes/default/js/batchManagerUnit.js

@@ -0,0 +1,145 @@
+$(document).ready(function () {
+
+  $(".linked-albums.add-item").on("click", function () {
+      var pictureId = $(this).parents("fieldset").data("image_id")
+      linked_albums_open(pictureId);
+      set_up_popin();
+  });
+
+  $(".limitReached").html(str_no_search_in_progress);
+  $(".search-cancel-linked-album").hide();
+  $(".linkedAlbumPopInContainer .searching").hide();
+  $("#linkedAlbumSearch .search-input").on('input', function () {
+    var pictureId = $("#linkedAlbumSearch .search-input").parents(".linkedAlbumPopInContainer").attr("id");
+
+      if ($(this).val() != 0) {
+      $("#linkedAlbumSearch .search-cancel-linked-album").show()
+      } else {
+      $("#linkedAlbumSearch .search-cancel-linked-album").hide();
+      }
+
+      // Search input value length required to start searching
+      if ($(this).val().length > 0) {
+
+        linked_albums_search($(this).val(), pictureId );
+      } else {
+      $(".limitReached").html(str_no_search_in_progress);
+      $("#searchResult").empty();
+      }
+  })
+
+  $(".search-cancel-linked-album").on("click", function () {
+      $("#linkedAlbumSearch .search-input").val("");
+      $("#linkedAlbumSearch .search-input").trigger("input");
+  })
+
+  $(".related-categories-container .breadcrumb-item .remove-item").on("click", function () {
+      var pictureId = $(this).parents("fieldset").attr("id");
+      remove_related_category($(this).attr("id"),pictureId);
+  })
+
+})
+
+function fill_results(cats, pictureId) {
+  
+      $("#searchResult").empty();
+      cats.forEach(cat => {
+          $("#searchResult").append(
+          "<div class='search-result-item' id="+ cat.id + ">" +
+          "<span class='search-result-path'>" + cat.fullname +"</span><span id="+ cat.id + " class='icon-plus-circled item-add'></span>" +
+          "</div>"
+          );
+          var this_related_category_ids = window["related_category_ids_" + pictureId];
+          console.log("relatedCAT "+this_related_category_ids);
+          console.log("catID "+cat.id);
+
+          if (this_related_category_ids.includes(cat.id)) {
+              $("#"+pictureId+" .search-result-item #"+ cat.id +".item-add").addClass("notClickable").attr("title", str_already_in_related_cats).on("click", function (event) {
+              event.preventDefault();
+              });
+              $("#"+pictureId+" .search-result-item").addClass("notClickable").attr("title", str_already_in_related_cats).on("click", function (event) {
+
+              event.preventDefault();
+              });
+          } else {
+              $("#"+pictureId+" .search-result-item#"+ cat.id).on("click", function () {
+
+              add_related_category(cat.id, cat.full_name_with_admin_links, pictureId);
+              });
+          }
+    });
+  }
+
+  function remove_related_category(cat_id,pictureId) {
+    var this_related_category_ids = window["related_category_ids_" + pictureId];
+
+    $("#"+pictureId+" .invisible-related-categories-select option[value="+ cat_id +"]").remove();
+    $("#"+pictureId+" .invisible-related-categories-select").trigger('change');
+    $("#"+pictureId+" #" + cat_id).parent().remove();
+  
+    cat_to_remove_index = this_related_category_ids.indexOf(cat_id);
+    if (cat_to_remove_index > -1) {
+      this_related_category_ids.splice(cat_to_remove_index, 1);
+    }
+  
+    check_related_categories(pictureId);
+  }
+  
+  function add_related_category(cat_id, cat_link_path, pictureId) {
+    var this_related_category_ids = window["related_category_ids_" + pictureId];
+    if (!this_related_category_ids.includes(cat_id)) {
+      $(".related-categories-container").append(
+        "<div class='breadcrumb-item'>" +
+          "<span class='link-path'>" + cat_link_path + "</span><span id="+ cat_id + " class='icon-cancel-circled remove-item'></span>" +
+        "</div>"
+      );
+  
+      $(".search-result-item #" + cat_id).addClass("notClickable");
+      this_related_category_ids.push(cat_id);
+      $(".invisible-related-categories-select").append("<option selected value="+ cat_id +"></option>").trigger('change');
+  
+      $("#"+ cat_id).on("click", function () {
+        remove_related_category($(this).attr("id"))
+      })
+  
+      linked_albums_close();
+    }
+  
+    check_related_categories(pictureId);
+  }
+  
+  function check_related_categories(pictureId) {
+    var this_related_category_ids = window["related_category_ids_" + pictureId];
+  
+    $("#picture-"+pictureId+" .linked-albums-badge").html(this_related_category_ids.length);
+  
+    if (this_related_category_ids.length == 0) {
+      $("#"+pictureId+" .linked-albums-badge").addClass("badge-red");
+      $("#"+pictureId+" .add-item").addClass("highlight");
+      $("#"+pictureId+" .orphan-photo").html(str_orphan).show();
+    } else {
+      $("#"+pictureId+" .linked-albums-badge.badge-red").removeClass("badge-red");
+      $("#"+pictureId+" .add-item.highlight").removeClass("highlight");
+      $("#"+pictureId+" .orphan-photo").hide();
+    }
+  }
+//   $(function () {
+//     $('.privacy-filter-slider').each(function() {
+//         var id = $(this).attr('id');
+
+//         $(this).slider({
+//             range: 'min',
+//             value: $(this).attr('value'),
+//             min: 0,
+//             max: 4,
+//             slide: function (event, ui) {
+//                 updateCertificationFilterLabel(ui.value, id);
+//             }
+//         });
+//     });
+// });
+
+// function updateCertificationFilterLabel(value, id) {
+//     let label = strs_privacy[value];
+//     $('#' + id + ' .privacy').html(label);
+// }

admin/themes/default/template/batch_manager_unit.tpl

@@ -2,11 +2,21 @@
 {include file='include/datepicker.inc.tpl'}
 {include file='include/colorbox.inc.tpl'}
 
+{combine_script id='jquery.sort' load='footer' path='themes/default/js/plugins/jquery.sort.js'}
+
 {combine_script id='LocalStorageCache' load='footer' path='admin/themes/default/js/LocalStorageCache.js'}
 
-{combine_script id='jquery.selectize' load='footer' path='themes/default/js/plugins/selectize.min.js'}
+{combine_script id='jquery.selectize' load='header' path='themes/default/js/plugins/selectize.min.js'}
 {combine_css id='jquery.selectize' path="themes/default/js/plugins/selectize.{$themeconf.colorscheme}.css"}
 
+{combine_script id='jquery.ui.slider' require='jquery.ui' load='header' path='themes/default/js/ui/minified/jquery.ui.slider.min.js'}
+{combine_css path="themes/default/js/ui/theme/jquery.ui.slider.css"}
+
+{combine_script id='jquery.selectize' load='footer' path='themes/default/js/plugins/selectize.min.js'}
+
+{combine_script id='jquery.confirm' load='footer' require='jquery' path='themes/default/js/plugins/jquery-confirm.min.js'}
+{combine_css path="themes/default/js/plugins/jquery-confirm.min.css"}
+
 {footer_script}
 (function(){
 {* <!-- TAGS --> *}
@@ -32,9 +42,62 @@ jQuery(function(){ {* <!-- onLoad needed to wait localization loads --> *}
 jQuery("a.preview-box").colorbox( {
 	photo: true
 });
+
+str_are_you_sure = '{'Are you sure?'|translate|escape:javascript}';
+str_yes = '{'Yes, delete'|translate|escape:javascript}';
+str_no = '{'No, I have changed my mind'|translate|@escape:'javascript'}';
+str_albums_found = '{"<b>%d</b> albums found"|translate|escape:javascript}';
+str_album_found = '{"<b>1</b> album found"|translate|escape:javascript}';
+str_result_limit = '{"<b>%d+</b> albums found, try to refine the search"|translate|escape:javascript}';
+str_orphan = '{'This photo is an orphan'|@translate|escape:javascript}';
+str_no_search_in_progress = '{'No search in progress'|@translate|escape:javascript}';
+str_already_in_related_cats = '{'This albums is already in related categories list'|translate|escape:javascript}';
+
+{literal}
+$('#action-delete-picture').on('click', function() {
+  $.confirm({
+    title: str_are_you_sure,
+    draggable: false,
+    titleClass: "groupDeleteConfirm",
+    theme: "modern",
+    content: "",
+    animation: "zoom",
+    boxWidth: '30%',
+    useBootstrap: false,
+    type: 'red',
+    animateFromElement: false,
+    backgroundDismiss: true,
+    typeAnimated: false,
+    buttons: {
+        confirm: {
+          text: str_yes,
+          btnClass: 'btn-red',
+          action: function () {
+            window.location.href = url_delete.replaceAll('amp;', '');
+          }
+        },
+        cancel: {
+          text: str_no
+        }
+    }
+  });
+})
+{/literal}
+
 }());
+const strs_privacy = {
+  "0" : "{$level_options[8]}",
+  "1" : "{$level_options[4]}",
+  "2" : "{$level_options[2]}", 
+  "3" : "{$level_options[1]}",
+  "4" : "{$level_options[0]}",
+};
+
 {/footer_script}
 
+{combine_script id='batchManagerUnit' load='footer' require='jquery.ui.effect-blind,jquery.sort' path='admin/themes/default/js/batchManagerUnit.js'}
+
+
 <form action="{$F_ACTION}" method="POST">
   <div style="margin: 30px 0; display: flex; justify-content: space-between;">
     <div style="margin-left: 22px;">
@@ -52,79 +115,156 @@ jQuery("a.preview-box").colorbox( {
 {if !empty($elements) }
 <div><input type="hidden" name="element_ids" value="{$ELEMENT_IDS}"></div>
 {foreach from=$elements item=element}
-<fieldset class="elementEdit">
-  <legend>{$element.LEGEND}</legend>
+  {footer_script}
+  window.related_category_ids_{$element.ID} = {$element.related_category_ids|@json_encode};  
+  console.log(related_category_ids_{$element.ID});
+  url_delete = '{$element.U_DELETE}';
+  id = '{$element.ID}';
 
-  <span class="thumb">
-    <a href="{$element.FILE_SRC}" class="preview-box icon-zoom-in" title="{$element.LEGEND|@htmlspecialchars}"><img src="{$element.TN_SRC}" alt="" {if $element.is_svg}style="{if $current.width < 100}min-width: 100px;{/if}{if $current.height < 100} min-height: 100px; {/if}" {/if}></a>
-    <a href="{$element.U_EDIT}" class="icon-pencil">{'Edit'|@translate}</a>
-  </span>
+  {/footer_script}
 
-  <table>
+{debug}
+<fieldset class="elementEdit" id="picture-{$element.ID}" data-image_id="{$element.ID}">
+  <div class="media-box">
+    <img src="{$element.TN_SRC}" alt="imagename" class="media-box-embed" style="{if $element.FORMAT}width:100%; max-height:100%;{else}max-width:100%; height:100%;{/if}">
+    <div class="media-hover">
+    <div class='picture-preview-actions'>
+    <a class="preview-box icon-zoom-square tiptip" href="{$element.FILE_SRC}" title="Zoom"></a>
+    <a class="icon-download tiptip" href="{$element.U_DOWNLOAD}" title="Download"></a>
+    <a class="icon-signal tiptip" href="{$element.U_HISTORY}" title="Visit history"></a>
+    <a target="_blank" class="icon-pencil tiptip" href="{$element.U_EDIT}" title="{'Edit photo'|@translate}"></a>
+    {if !url_is_remote($element.PATH)}
+      <a class="icon-arrows-cw tiptip" href="{$element.U_SYNC}" title="{'Synchronize metadata'|@translate}"></a>
+      <a class="icon-trash tiptip" title="{'delete photo'|@translate}" id='action-delete-picture'></a>
+    {/if}
 
-    <tr>
-      <td><strong>{'Title'|@translate}</strong></td>
-      <td><input type="text" class="large" name="name-{$element.id}" value="{$element.NAME}"></td>
-    </tr>
+  </div>
+  {if isset($element.U_JUMPTO)}
+    <a class="see-out" href="{$element.U_JUMPTO}" >
+    <p><i class="icon-left-open"></i>{'Open in gallery'|@translate}</p>
+  {else}
+    <a class="see-out disabled" href="#" >
+    <p class="" title="{'You don\'t have access to this photo'|translate}" ><i class="icon-left-open"></i>{'Open in gallery'|translate}</p>
+  {/if}
+    </a>
+  </div>  
+  </div>
+   <div class="main-info-container">
+    <div class="main-info-block">
+    <div class='info-framed-icon' style="margin-right:0px;">
+    <i class='icon-picture'></i>
+    </div>
+      <span class="main-info-title">{$element.FILE}</span>
+      <span class="main-info-desc">{$element.DIMENSIONS}</span>
+      <span class="main-info-desc">{$element.FILESIZE}</span>
+      <span class="main-info-desc">{$element.EXT}</span>
 
-    <tr>
-      <td><strong>{'Author'|@translate}</strong></td>
-      <td><input type="text" class="large" name="author-{$element.id}" value="{$element.AUTHOR}"></td>
-    </tr>
-
-    <tr>
-      <td><strong>{'Creation date'|@translate}</strong></td>
-      <td>
-        <input type="hidden" name="date_creation-{$element.id}" value="{$element.DATE_CREATION}">
-        <label>
-          <i class="icon-calendar"></i>
-          <input type="text" data-datepicker="date_creation-{$element.id}" data-datepicker-unset="date_creation_unset-{$element.id}" readonly>
-        </label>
-        <a href="#" class="icon-cancel-circled" id="date_creation_unset-{$element.id}">{'unset'|translate}</a>
-      </td>
-    </tr>
-    <tr>
-      <td><strong>{'Who can see this photo?'|@translate}</strong><br>({'Privacy level'|translate})</td>
-      <td>
-        <select name="level-{$element.id}">
-          {html_options options=$level_options selected=$element.LEVEL}
-        </select>
-      </td>
-    </tr>
-
-    <tr>
-      <td><strong>{'Tags'|@translate}</strong></td>
-      <td>
-        <select data-selectize="tags" data-value="{$element.TAGS|@json_encode|escape:html}"
-          placeholder="{'Type in a search term'|translate}"
-          data-create="true" name="tags-{$element.id}[]" multiple style="width:500px;"></select>
-      </td>
-    </tr>
-
-    <tr>
-      <td><strong>{'Description'|@translate}</strong></td>
-      <td><textarea cols="50" rows="5" name="description-{$element.id}" id="description-{$element.id}" class="description">{$element.DESCRIPTION}</textarea></td>
-    </tr>
-
-  </table>
+    </div>
+    <div class="main-info-block">
+      <div class='info-framed-icon' style="margin-right:0px;">
+        <span class='icon-calendar'></span>
+      </div>
+      <span class="main-info-title">{$element.POST_DATE}</span>
+      <span class="main-info-desc">{$element.AGE}</span>
+      <span class="main-info-desc">{$element.ADDED_BY}</span>
+      <span class="main-info-desc">{$element.STATS}</span>
+    </div>
+  </div>
+  <div class="info-container">
+    
+    <div class="half-line-info-box">
+       <strong>{'Title'|@translate}</strong>
+       <input type="text" name="name-{$element.id}" value="{$element.NAME}">
+    </div>
+    
+    <div class="calendar-box">
+      <strong>{'Creation date'|@translate}</strong>
+      <input type="hidden" name="date_creation-{$element.id}" value="{$element.DATE_CREATION}">
+      <label class="calendar-input">
+        <i class="icon-calendar"></i>
+        <input type="text" data-datepicker="date_creation-{$element.id}" data-datepicker-unset="date_creation_unset-{$element.id}" readonly>
+        <a href="#" class="icon-cancel-circled unset" id="date_creation_unset-{$element.id}"></a>
+      </label>
+      
+      
+    </div>
+    
+    <div class="half-line-info-box">
+      <strong>{'Author'|@translate}</strong>
+      <input type="text" name="author-{$element.id}" value="{$element.AUTHOR}">
+    </div>
+    
+    <div class="half-line-info-box">
+    <div class="privacy-label-container">
+    <strong>Qui peut voir ?</strong> <i>Niveau de confidentialité</i>
+    </div>
+    <select name="level" size="1">
+      {html_options options=$level_options selected=$element.level_options_selected}
+    </select>
+    {* <div class="advanced-filter-item advanced-filter-privacy" >
+    <div class="privacy-label-container">
+    <strong>{'Who can see this photo?'|@translate}</strong>
+    <label class="advanced-filter-item-label" for="privacy-filter" >
+    <span class="privacy">{$level_options[$element.LEVEL]}</span>
+    </label>
+    </div>
+    <div class="advanced-filter-item-container">
+      <div id="privacy-filter" class="select-bar"></div>
+        <div class="slider-bar-wrapper">
+            <div class="slider-bar-container privacy-filter-slider" value="{$element.LEVEL_CONVERT}" id="{$element.ID}"></div>
+          </div>
+      </div>
+  </div> *}
+    </div>
+    
+    <div class="full-line-tag-box">
+    <strong>{'Tags'|@translate}</strong>
+    <select data-selectize="tags" data-value="{$element.TAGS|@json_encode|escape:html}"
+    placeholder="{'Type in a search term'|translate}"
+    data-create="true" name="tags-{$element.id}[]" multiple></select>
 
+    </div>
+    
+    <div class="full-line-info-box" id="{$element.ID}">
+  <strong>{'Linked albums'|@translate} <span class="linked-albums-badge {if $element.related_categories|@count < 1 } badge-red {/if}"> {$element.related_categories|@count} </span></strong>
+    {if $element.related_categories|@count < 1}
+      <span class="orphan-photo">{'This photo is an orphan'|@translate}</span>
+    {else}
+      <span class="orphan-photo"></span>
+    {/if}
+    <div class="related-categories-container">
+    {foreach from=$element.related_categories item=$cat_path key=$key}
+    <div class="breadcrumb-item album-listed"><span class="link-path">{$cat_path['name']}</span>{if $cat_path['unlinkable']}<span id={$key} class="icon-cancel-circled remove-item"></span>{else}<span id={$key} class="icon-help-circled help-item tiptip" title="{'This picture is physically linked to this album, you can\'t dissociate them'|translate}"></span>{/if}</div>
+    {/foreach}
+    </div>
+    <div class="breadcrumb-item linked-albums add-item {if $element.related_categories|@count < 1 } highlight {/if}"><span class="icon-plus-circled"></span>{'Add'|translate}</div>
+    </div>
+    
+    <div class="full-line-description-box">
+      <strong>{'Description'|@translate}</strong>
+      <textarea cols="50" rows="4" name="description" class="description-box" name="description-{$element.id}" id="description-{$element.id}">{$element.DESCRIPTION}</textarea>
+    </div>
+    <div class="buttonLike save-button"><i class="icon-floppy"></i>{'Submit'|@translate}</div>
+  </div>
 </fieldset>
 {/foreach}
 
 {if !empty($navbar)}{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if}
 
-<p>
+<div class="bottom-save-bar">
   <input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
-  <button class="buttonLike" type="submit" value="{'Submit'|@translate}" name="submit"><i class="icon-floppy"></i>{'Submit'|@translate}</button>
-  <button class="resetButton" type="reset" value="{'Reset'|@translate}" name="reset">{'Reset'|@translate}</button>
+  <button class="buttonLike" type="submit" value="{'Submit'|@translate}" name="submit" style="height:40px"><i class="icon-floppy"></i>Save all photos</button>
 
   {* <span class="buttonLike" type="submit" name="submit"> {'Submit'|@translate}</span> *}
   {* <input type="reset" value="{'Reset'|@translate}"> *}
-</p>
+</div>
 {/if}
 
 </form>
-
+{include file='include/album_selector.inc.tpl' 
+  title={'Associate to album'|@translate}
+  searchPlaceholder={'Search'|@translate}
+}
 <style>
 .selectize-input  .item,
 .selectize-input .item.active {
@@ -132,6 +272,7 @@ jQuery("a.preview-box").colorbox( {
   background-color: #ffa646 !important;
   border-color: transparent !important;
   color: black !important;
+  
 
   border-radius: 20px !important;
 }
@@ -151,7 +292,239 @@ jQuery("a.preview-box").colorbox( {
   background-color: #ff7700 !important;
 }
 
-.thumb {
-  float: right;
+.selectize-input.items.not-full.has-options,
+.selectize-input.items.not-full.has-options.focus.input-active.dropdown-active,
+.selectize-input.items.not-full, 
+.selectize-input.items.full{
+  border: 1px solid #D3D3D3 !important;
 }
-</style>
+
+.breadcrumb-item.add-item.highlight{
+  color: #3C3C3C !important;
+}
+
+.breadcrumb-item{
+  margin: 5px 0 5px 0 !important;
+}
+
+.album-listed{
+  background-color: #FFFFFF !important;
+}
+
+.elementEdit{
+  display:flex;
+  flex-direction:row;
+  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
+  background-color:#FAFAFA;
+  padding:0px;
+  margin: 1.5em !important;
+  border-radius: 4px;
+}
+
+
+.media-box{
+  display: flex;
+  background-color: #3C3C3C;
+  width:33%;
+  justify-content: center;
+  position: relative;
+  border-radius: 4px 0 0 4px;
+}
+
+.media-box-embed{
+  height: 100%;
+  object-fit: contain;
+  position: absolute; 
+}
+
+.media-hover{
+  opacity:0%;
+  background-color: #0000009c;
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.media-hover:hover{
+  opacity: 100%;
+}
+
+.main-info-container{
+  display:flex;
+  flex-direction:column;
+  text-align:center;
+  padding:20px;
+  row-gap:15px;
+  width:200px;
+}
+
+.main-info-block{
+  display:flex;
+  flex-direction:column;
+  border: 1px solid #D3D3D3;
+  background: #FFF;
+  border-radius: 2px;
+  flex:1;
+  align-items: center;
+  justify-content: center;
+}
+
+.main-info-icon{
+  width:40px;
+  height:40px;
+  margin-bottom:5px;
+  fill: #3C3C3C;
+}
+
+.main-info-title{
+  color: #000;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: normal;
+  width:100px;
+}
+
+.main-info-desc{
+  color: #777;
+  text-align: center;
+  font-family: "Open Sans";
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  width:100px;
+}
+
+.info-container{
+  flex:1;
+  display:flex;
+  flex-direction:row;
+  flex-wrap:wrap;
+  align-content: flex-start;
+  padding: 20px 0px;
+  gap: 10px 0px;
+  color:#7A7A7A;
+
+}
+
+.half-line-info-box{
+  flex: 0 0 calc(50% - 20px);
+  margin: 0px 10px;
+  display:flex;
+  flex-direction:column;
+  text-align:left;
+  height: 50px;
+}
+
+.full-line-info-box{
+  flex: 0 0 calc(100% - 20px);
+  margin: 0px 10px;
+  display:flex;
+  flex-direction:column;
+}
+
+.full-line-tag-box{
+  flex: 0 0 calc(100% - 20px);
+  margin: 0px 10px;
+  display:flex;
+  flex-direction:column;
+}
+
+.calendar-box{
+  flex: 0 0 calc(50% - 20px);
+  height: 50px;
+  margin: 0px 10px;
+  display:flex;
+  flex-direction:column;
+}
+
+.full-line-info-box input,
+.half-line-info-box input,
+.half-line-info-box select{
+  display: flex;
+  border-radius: 2px;
+  padding: 0 7px;
+  border: 1px solid #D3D3D3;
+  background: #FFF;
+  flex: 1;
+}
+
+.full-line-tag-box select{
+  display: flex;
+  border-radius: 2px;
+  padding: 0 7px;
+  border: 1px solid #D3D3D3;
+  background: #FFF;
+}
+
+.calendar-input{
+  display: flex;
+  border-radius: 2px;
+  padding: 0 7px;
+  border: 1px solid #D3D3D3;
+  background: #FFF;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+}
+
+.calendar-box input{
+  border:none;
+  outline: none;
+  height: 90%;
+  width: 90%;
+}
+
+.full-line-description-box{
+  flex: 0 0 calc(100% - 20px);
+  min-height: 50px;
+  margin: 0px 10px;
+  display:flex;
+  flex-direction:column;
+}
+
+.description-box{
+  resize: none;
+  border-radius: 2px;
+  border: 1px solid #D3D3D3;
+  background: #FFF;
+}
+.full-line-info-box input,
+.half-line-info-box input,
+.description-box{
+  outline: none !important;
+}
+
+.save-button{
+  margin: 0% 10px;
+  margin-top: 20px;
+}
+
+.privacy-label-container{
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+}
+
+.privacy-label-container span{
+  color: #ffa646;
+  font-weight: bold;
+}
+.bottom-save-bar{
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: #ffffff;
+  text-align: right;
+  z-index: 4;
+  border-top: 1px solid #CCCCCC
+}
+
+.bottom-save-bar button{
+  margin: 10px 0;
+  margin-right: 2%;
+}
+
+</style>