fixes #2414 change related tags display

Add conf to display or not the related tag options by default
Add templates and css for new display

admin/configuration.php

@@ -76,6 +76,7 @@ $display_checkboxes = array(
     'menubar_filter_icon',
     'index_search_in_set_button',
     'index_search_in_set_action',
+    'index_related_tags_display',
     'index_sort_order_input',
     'index_flat_icon',
     'index_posted_date_icon',

admin/themes/default/template/configuration_display.tpl

@@ -56,6 +56,14 @@
         </label>
       </li>
 
+      <li>
+        <label class="font-checkbox">
+          <span class="icon-check"></span>
+          <input type="checkbox" name="index_related_tags_display" {if ($display.index_related_tags_display)}checked="checked"{/if}>
+          {'Display related tags by default'|translate}
+        </label>
+      </li>
+
       <li>
         <label class="font-checkbox">
           <span class="icon-check"></span>

include/functions_html.inc.php

@@ -411,42 +411,25 @@ function get_tags_content_title()
 
   for ($i=0; $i<count($page['tags']); $i++)
   {
-    $title.= $i>0 ? ' + ' : '';
 
-    $title.=
-      '<a href="'
-      .make_index_url(
-        array(
-          'tags' => array( $page['tags'][$i] )
-          )
-        )
-      .'" title="'
-      .l10n('display photos linked to this tag')
-      .'">'
-      .trigger_change('render_tag_name', $page['tags'][$i]['name'], $page['tags'][$i])
-      .'</a>';
-
-    if (count($page['tags']) > 1)
+    if (1 == count($page['tags']))
     {
-      $other_tags = $page['tags'];
-      unset($other_tags[$i]);
-      $remove_url = make_index_url(
-        array(
-          'tags' => $other_tags
-          )
-        );
-
       $title.=
-        '<a id="TagsGroupRemoveTag" href="'.$remove_url.'" style="border:none;" title="'
-        .l10n('remove this tag from the list')
-        .'"><img src="'
-          .get_root_url().get_themeconf('icon_dir').'/remove_s.png'
-        .'" alt="x" style="vertical-align:bottom;" >'
-        .'<span class="pwg-icon pwg-icon-close" ></span>'
-        .'<i class="fas fa-plus" aria-hidden="true"></i>'
+        '<a href="'
+        .make_index_url(
+          array(
+            'tags' => array( $page['tags'][$i] )
+            )
+          )
+        .'" title="'
+        .l10n('display photos linked to this tag')
+        .'">'
+        .trigger_change('render_tag_name', $page['tags'][$i]['name'], $page['tags'][$i])
         .'</a>';
     }
   }
+
+
   return $title;
 }
 
@@ -557,7 +540,7 @@ function register_default_menubar_blocks($menu_ref_arr)
     return;
   $menu->register_block( new RegisteredBlock( 'mbLinks', 'Links', 'piwigo'));
   $menu->register_block( new RegisteredBlock( 'mbCategories', 'Albums', 'piwigo'));
-  $menu->register_block( new RegisteredBlock( 'mbTags', 'Related tags', 'piwigo'));
+  $menu->register_block( new RegisteredBlock( 'mbTags', 'Tags', 'piwigo'));
   $menu->register_block( new RegisteredBlock( 'mbSpecials', 'Specials', 'piwigo'));
   $menu->register_block( new RegisteredBlock( 'mbMenu', 'Menu', 'piwigo'));
   $menu->register_block( new RegisteredBlock( 'mbRelatedCategories', 'Related albums', 'piwigo') );

include/menubar.inc.php

@@ -143,68 +143,19 @@ function initialize_menu()
   $block = $menu->get_block('mbTags');
   if ( $block!=null and 'picture' != script_basename() )
   {
-    if ('tags'==@$page['section'])
+    $tags = get_available_tags();
+    usort($tags, 'tags_counter_compare');
+    $tags = array_slice($tags, 0, $conf['menubar_tag_cloud_items_number']);
+    foreach ($tags as $tag)
     {
-      $tags = get_common_tags(
-        $page['items'],
-        $conf['menubar_tag_cloud_items_number'],
-        $page['tag_ids']
-        );
-      $tags = add_level_to_tags($tags);
+      $block->data[] = array_merge(
+        $tag,
+        array(
+          'URL' => make_index_url( array( 'tags' => array($tag) ) ),
+        )
+      );
+    }
 
-      foreach ($tags as $tag)
-      {
-        $block->data[] = array_merge(
-          $tag,
-          array(
-            'U_ADD' => make_index_url(
-              array(
-                'tags' => array_merge(
-                  $page['tags'],
-                  array($tag)
-                  )
-                )
-              ),
-            'URL' => make_index_url( array( 'tags' => array($tag) )
-              ),
-            )
-          );
-      }
-      $template->assign( 'IS_RELATED', false);
-    }
-    //displays all tags available for the current user
-    else if ($conf['menubar_tag_cloud_content'] == 'always_all' or ($conf['menubar_tag_cloud_content'] == 'all_or_current' and empty($page['items'])) )
-    {
-      $tags = get_available_tags();
-      usort($tags, 'tags_counter_compare');
-      $tags = array_slice($tags, 0, $conf['menubar_tag_cloud_items_number']);
-      foreach ($tags as $tag)
-      {
-        $block->data[] = array_merge(
-          $tag,
-          array(
-            'URL' => make_index_url( array( 'tags' => array($tag) ) ),
-          )
-        );
-      }
-      $template->assign( 'IS_RELATED', false);
-    }
-    //displays only the tags available from the current thumbnails displayed
-    else if ( !empty($page['items']) and ($conf['menubar_tag_cloud_content'] == 'current_only' or $conf['menubar_tag_cloud_content'] == 'all_or_current') )
-    {        
-      $selection = array_slice( $page['items'], $page['start'], $page['nb_image_page'] );
-      $tags = add_level_to_tags( get_common_tags($selection, $conf['content_tag_cloud_items_number']) );
-      foreach ($tags as $tag)
-      {
-        $block->data[] =
-        array_merge( $tag,
-          array(
-            'URL' => make_index_url( array( 'tags' => array($tag) ) ),
-          )
-        );
-      }
-      $template->assign( 'IS_RELATED', true);
-    }
     if ( !empty($block->data) )
     {
       $block->template = 'menubar_tags.tpl';

include/selected_tags.inc.php

@@ -0,0 +1,45 @@
+<?php
+// +-----------------------------------------------------------------------+
+// | This file is part of Piwigo.                                          |
+// |                                                                       |
+// | For copyright and license information, please view the COPYING.txt    |
+// | file that was distributed with this source code.                      |
+// +-----------------------------------------------------------------------+
+global $page;
+
+$selected_related_tags_info = array();
+
+if (count($page['tags']) > 1)
+{
+  foreach ($page['tags'] as $key=>$tag)
+  {
+    $other_tags = $page['tags'];
+    unset($other_tags[$key]);
+
+    $selected_related_tags_info[$key] =
+    array(
+      'tag_name' => trigger_change('render_tag_name', $page['tags'][$key]['name'], $page['tags'][$key]),
+      'item_count' => '',
+      'index_url' => make_index_url(
+        array(
+          'tags' => array( $page['tags'][$key] )
+        )
+      ),
+      'remove_url' => make_index_url(
+        array(
+          'tags' => $other_tags
+        )
+      )
+    );
+  }
+}
+
+$template->assign(
+  array(
+  'SELECT_RELATED_TAGS' => $selected_related_tags_info,
+  )
+);
+
+$template->set_filename('selected_tags', 'include/selected_tags.inc.tpl');
+$template->assign_var_from_handle('SELECTED_TAGS_TEMPLATE', 'selected_tags');
+    

index.php

@@ -189,11 +189,45 @@ if ( empty($page['is_external']) )
 
   if (isset($page['body_data']['tag_ids']))
   {
+    //get tags for related tags "button", with the possibility to combine them
+    $tags = get_common_tags(
+      $page['items'],
+      $conf['menubar_tag_cloud_items_number'],
+      $page['tag_ids']
+    );
+
+    $tags = add_level_to_tags($tags);
+
+    $related_tags = array();
+
+    foreach ($tags as $tag)
+    {
+      $related_tags[] = array_merge(
+        $tag,
+        array(
+          'U_ADD' => make_index_url(
+            array(
+              'tags' => array_merge(
+                $page['tags'],
+                array($tag)
+                )
+              )
+            ),
+          'URL' => make_index_url( array( 'tags' => array($tag) )
+            ),
+          )
+        );
+    }
+
+    include_once(PHPWG_ROOT_PATH.'include/selected_tags.inc.php');
+
     $template->assign(
       array(
         'SEARCH_IN_SET_BUTTON' => $conf['index_search_in_set_button'],
         'SEARCH_IN_SET_ACTION' => $conf['index_search_in_set_action'],
         'SEARCH_IN_SET_URL' => get_root_url().'search.php?tag_id='.implode(',', $page['body_data']['tag_ids']),
+        'RELATED_TAGS_DISPLAY' => $conf['index_related_tags_display'],
+        'RELATED_TAGS' => $related_tags,
       )
     );
   }
@@ -360,6 +394,31 @@ if ( empty($page['is_external']) )
       $template->assign('U_SLIDESHOW', $page['cat_slideshow_url']);
     }
   }
+
+  //We want all pages that display thumbnails, except on the tags page
+  //Fill related tags action
+  if(!empty($page['items']) and 'tags' != $page['body_data']['section'])
+  {
+    $selection = array_slice( $page['items'], $page['start'], $page['nb_image_page'] );
+    $tags = add_level_to_tags( get_common_tags($selection, $conf['content_tag_cloud_items_number']) );
+    $related_tags = array();
+    foreach ($tags as $tag)
+    {
+      $related_tags[] =
+      array_merge( $tag,
+        array(
+          'URL' => make_index_url( array( 'tags' => array($tag) ) ),
+        )
+      );
+    } 
+
+    $template->assign(
+      array(
+      'RELATED_TAGS_ACTION' => true,
+      'RELATED_TAGS' => $related_tags,
+      )
+    );
+  }
 }
 
 //------------------------------------------------------------ end

install/config.sql

@@ -81,3 +81,4 @@ INSERT INTO piwigo_config (param,value) VALUES ('upload_detect_duplicate','true'
 INSERT INTO piwigo_config (param,value) VALUES ('webmaster_id','1');
 INSERT INTO piwigo_config (param,value) VALUES ('use_standard_pages','true');
 INSERT INTO piwigo_config (param,value,comment) VALUES ('filters_views','a:14:{s:5:"words";a:2:{s:6:"access";s:9:"everybody";s:7:"default";b:1;}s:4:"tags";a:2:{s:6:"access";s:9:"everybody";s:7:"default";b:0;}s:9:"post_date";a:2:{s:6:"access";s:9:"everybody";s:7:"default";b:0;}s:13:"creation_date";a:2:{s:6:"access";s:9:"everybody";s:7:"default";b:1;}s:5:"album";a:2:{s:6:"access";s:9:"everybody";s:7:"default";b:1;}s:6:"author";a:2:{s:6:"access";s:9:"everybody";s:7:"default";b:0;}s:8:"added_by";a:2:{s:6:"access";s:9:"everybody";s:7:"default";b:0;}s:9:"file_type";a:2:{s:6:"access";s:9:"everybody";s:7:"default";b:0;}s:5:"ratio";a:2:{s:6:"access";s:9:"everybody";s:7:"default";b:0;}s:6:"rating";a:2:{s:6:"access";s:9:"everybody";s:7:"default";b:0;}s:9:"file_size";a:2:{s:6:"access";s:9:"everybody";s:7:"default";b:0;}s:6:"height";a:2:{s:6:"access";s:9:"everybody";s:7:"default";b:0;}s:5:"width";a:2:{s:6:"access";s:9:"everybody";s:7:"default";b:0;}s:17:"last_filters_conf";b:1;}','Filters displays configuration');
+INSERT INTO piwigo_config (param,value) VALUES ('index_related_tags_display','true');

install/db/180-database.php

@@ -0,0 +1,20 @@
+<?php
+// +-----------------------------------------------------------------------+
+// | This file is part of Piwigo.                                          |
+// |                                                                       |
+// | For copyright and license information, please view the COPYING.txt    |
+// | file that was distributed with this source code.                      |
+// +-----------------------------------------------------------------------+
+
+if (!defined('PHPWG_ROOT_PATH'))
+{
+  die('Hacking attempt!');
+}
+
+$upgrade_description = 'add config parameters to display by default or not "related tags" ';
+
+conf_update_param('index_related_tags_display', true);
+
+echo "\n".$upgrade_description."\n";
+
+?>

themes/default/template/include/related_tags.inc.tpl

@@ -0,0 +1,27 @@
+<div class="mcs-side-results search-in-set-button" id="related-tags-toggle">
+  <div>
+    <p>{'Related tags'|translate}<i class="gallery-icon-up-open rotated"></i></p>
+  </div>
+</div>
+
+{foreach from=$RELATED_TAGS item=tag}
+<span class="related-tags {if isset($RELATED_TAGS_DISPLAY) and $RELATED_TAGS_DISPLAY == false} hide{/if}">{strip}
+  <a class="tagLevel {if isset($tag.level)}{$tag.level}{/if}" href=
+  {if isset($tag.U_ADD)}
+    "{$tag.U_ADD}" title="{$tag.counter|@translate_dec:'%d photo is also linked to current tags':'%d photos are also linked to current tags'}" rel="nofollow">
+  {else}
+    "{$tag.URL}" title="{'display photos linked to this tag'|@translate}">
+  {/if}
+    + {$tag.name}</a><div class="tag-counter">{$tag.counter}</div></span>{/strip}
+{/foreach}
+
+{footer_script require='jquery'}
+
+$(document).ready(function () { 
+  $('#related-tags-toggle').on("click", function (e) { 
+    $('.related-tags').toggle();
+    $('#related-tags-toggle .gallery-icon-up-open').toggleClass('rotated'); 
+  }); 
+});
+
+{/footer_script}

themes/default/template/include/selected_tags.inc.tpl

@@ -0,0 +1,14 @@
+<span id="selected-tags-container">
+
+{foreach $SELECT_RELATED_TAGS as $TAG}
+  <span class="selected-related-tag">
+    <a href="{$TAG.index_url}" title="{'display photos linked to this tag'|translate}">
+      {$TAG.tag_name}
+    </a>
+    <a class="selected-related-tag-remove" href="{$TAG.remove_url}" style="border:none;" title="{'remove this tag from the list'|translate}">
+      <i class="gallery-icon-cancel"></i>
+    </a>
+  </span>{if !$TAG@last}<span class="related-tag-condition">+</span>{/if}
+{/foreach}
+
+</span>

themes/default/template/index.tpl

@@ -1,4 +1,5 @@
 {combine_script id='core.switchbox' load='async' require='jquery' path='themes/default/js/switchbox.js'}
+{combine_css path="themes/default/vendor/fontello/css/gallery-icon.css" order=-10}
 
 {$MENUBAR}
 
@@ -13,11 +14,29 @@
 <div class="titrePage{if isset($chronology.TITLE)} calendarTitleBar{/if}">
 	<ul class="categoryActions">
 {if isset($SEARCH_IN_SET_ACTION) and $SEARCH_IN_SET_ACTION}
-	  {combine_css path="themes/default/vendor/fontello/css/gallery-icon.css" order=-10}
     <li id="cmdSearchInSet"><a href="{$SEARCH_IN_SET_URL}" title="{'Search in this set'|translate}" class="pwg-state-default pwg-button" rel="nofollow">
       <span class="gallery-icon-search-folder"></span><span class="pwg-button-text">{'Search in this set'|translate}</span>
     </a></li>
 {/if}
+
+{* We want the related tags action icon on all pages except the index and tag pages*}
+{if isset($RELATED_TAGS_ACTION) and $RELATED_TAGS_ACTION}
+    <li>{strip}<a id="cmdRelatedTags" title="{'Related tags'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
+			<span class="pwg-icon gallery-icon-tag"></span><span class="pwg-button-text">{'Related tags'|@translate}</span>
+		</a>
+		<div id="relatedTagsBox" class="switchBox">
+			<div class="switchBoxTitle">{'Related tags'|@translate}</div>
+	{foreach from=$RELATED_TAGS item=tag}
+			<a href=
+				"{$tag.URL}" title="{'display photos linked to this tag'|@translate}">
+				{$tag.name}
+      </a>
+	{/foreach}
+		</div>
+		{footer_script}(window.SwitchBox=window.SwitchBox||[]).push("#cmdRelatedTags", "#relatedTagsBox");{/footer_script}
+		{/strip}</li>
+{/if}
+
 {if !empty($image_orders)}
 		<li>{strip}<a id="sortOrderLink" title="{'Sort order'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
 			<span class="pwg-icon pwg-icon-sort"></span><span class="pwg-button-text">{'Sort order'|@translate}</span>
@@ -97,7 +116,13 @@
 {if !empty($PLUGIN_INDEX_ACTIONS)}{$PLUGIN_INDEX_ACTIONS}{/if}
 	</ul>
 
-<h2>{$TITLE} {if $NB_ITEMS > 0}<span class="badge nb_items">{$NB_ITEMS}</span>{/if}</h2>
+<div id="breadcrumb">
+  <h2>{$TITLE}
+    {if $NB_ITEMS > 0}<span class="badge nb_items">{$NB_ITEMS}</span>{/if}
+  </h2>
+
+{$SELECTED_TAGS_TEMPLATE}
+</div>
 
 {if isset($chronology_views)}
 <div class="calendarViews">{'View'|@translate}:
@@ -157,14 +182,20 @@
 {include file=$FILE_CHRONOLOGY_VIEW}
 {/if}
 
+<div class="action-buttons">
+
 {if isset($SEARCH_IN_SET_BUTTON) and $SEARCH_IN_SET_BUTTON}
-<div class="mcs-side-results search-in-set-button">
-  <div>
-    <p><a href="{$SEARCH_IN_SET_URL}" class="gallery-icon-search-folder" rel="nofollow">{'Search in this set'|translate}</a></p>
+  <div class="mcs-side-results search-in-set-button">
+    <div>
+      <p><a href="{$SEARCH_IN_SET_URL}" class="gallery-icon-search-folder" rel="nofollow">{'Search in this set'|translate}</a></p>
+    </div>
   </div>
-</div>
 {/if}
 
+{include file='include/related_tags.inc.tpl'}
+
+</div>
+
 {if !empty($CONTENT_DESCRIPTION)}
 <div class="additional_info">
 	{$CONTENT_DESCRIPTION}

themes/default/template/menubar_tags.tpl

@@ -1,4 +1,4 @@
-<dt>{if $IS_RELATED}{'Related tags'|@translate}{else}{'Tags'|@translate}{/if}</dt>
+<dt>{'Tags'|@translate}</dt>
 <dd>
 	<div id="menuTagCloud">
 		{foreach from=$block->data item=tag}

themes/default/theme.css

@@ -840,19 +840,12 @@ LEGEND {
     padding: 0px 5px !important;
 }
 
-#TagsGroupRemoveTag span,
-#TagsGroupRemoveTag i{
-  display:none;
-}
-
 /* Search in this set button CSS, 
-Needs to be loaded herre because we don't use it on the search pages but on other pages
+Needs to be loaded here because we don't use it on the search pages but on other pages
 it won't be loaded if it goes in the search specific css
 because of this it needs to specifically be added to each theme */
-.mcs-side-results.search-in-set-button {
-  /* margin-top:-15px; */
-  margin-bottom: 30px;
-}
+
+/*the related tags button also uses this css*/
 .mcs-side-results.search-in-set-button p {
   margin:0;
 }
@@ -873,7 +866,7 @@ because of this it needs to specifically be added to each theme */
   display: flex;
   flex-direction: row;
   gap: 5px;
-  margin: 15px 0 0 15px;
+
 }
 
 .mcs-side-results > div {
@@ -915,3 +908,93 @@ because of this it needs to specifically be added to each theme */
   font-size: 10px;
   background: #777;
 }
+
+.action-buttons{
+  display:flex;
+  align-items:start;
+  flex-wrap:wrap;
+  margin-bottom: 20px;
+  padding:0 15px;
+}
+
+#related-tags-toggle i{
+  margin-left:5px;
+}
+
+#related-tags-toggle i::before {
+  transition: transform 0.3s ease;
+}
+
+#related-tags-toggle i.rotated::before {
+  transform: rotate(90deg);
+} 
+
+.related-tags.hide{
+  display:none;
+}
+
+span.related-tags{
+  padding:3px 5px;
+  border:1px solid #D6D6D6;
+  margin:3px;
+  border-radius:15px;
+}
+
+span.related-tags a{
+  font-weight:700;
+  color:#787878;
+}
+
+span.related-tags .tag-counter{
+  display: inline-block;
+  margin-left: 7px;
+  color:#D6D6D6;
+}
+
+#relatedTagsBox.switchBox A {
+  padding:unset;
+  display:block;
+}
+
+#selected-tags-container{
+  margin:0 15px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+#selected-tags-container .selected-related-tag {
+  background-color: #FCEAD2;
+  border:1px solid #FF7700;
+  color:#ff7700;
+  border-radius:15px;
+  padding:2px 10px;
+  padding-right:5px;
+}
+
+#selected-tags-container .selected-related-tag a{
+  font-weight: 700;
+  font-style: Bold;
+  font-size: 12px;
+  color:#ff7700;
+  }
+
+#selected-tags-container .selected-related-tag a.selected-related-tag-remove:hover{
+  text-decoration:none;
+  color:#000;
+}
+
+.related-tag-condition{
+  background-color:#FAFAFA;
+  border-bottom: 1px solid #D0D2D5;
+  border-radius:5px;
+  margin:0 5px 0 15px;
+  font-weight:900;
+  font-size:20px;
+  padding:0 5px;
+  color:#777777;
+}
+
+#breadcrumb{
+  display:flex;
+  align-items: baseline;
+}