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

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;
+}