PhotoPage: change how tags are displayed

This commit is contained in:
Aaron van Geffen 2024-01-11 20:00:29 +01:00
parent 0da1558bd3
commit b13701f7c0
1 changed files with 24 additions and 13 deletions

View File

@ -32,8 +32,8 @@ class PhotoPage extends Template
echo ' echo '
<h2 class="entry-title">', $this->photo->getTitle(), '</h2>'; <h2 class="entry-title">', $this->photo->getTitle(), '</h2>';
$this->taggedPeople(); $this->printTags('Album', 'Album', false);
$this->linkNewTags(); $this->printTags('Tagged People', 'Person', true);
echo ' echo '
</div> </div>
@ -118,26 +118,40 @@ class PhotoPage extends Template
</ul>'; </ul>';
} }
private function taggedPeople() private function printTags($header, $tagKind, $allowLinkingNewTags)
{ {
echo ' echo '
<h3>Tags</h3> <h3>', $header, '</h3>
<ul id="tag_list">'; <ul id="tag_list" class="d-flex">';
foreach ($this->photo->getTags() as $tag) foreach ($this->photo->getTags() as $tag)
{ {
if ($tag->kind !== $tagKind)
continue;
echo ' echo '
<li id="tag-', $tag->id_tag, '"> <li id="tag-', $tag->id_tag, '">
<a rel="tag" title="View all posts tagged ', $tag->tag, '" href="', $tag->getUrl(), '" class="entry-tag">', $tag->tag, '</a>'; <a href="', $tag->getUrl(), '" title="View all posts tagged ', $tag->tag, '">
<div class="input-group">
<span class="input-group-text">', $tag->tag, '</span>';
if ($tag->kind === 'Person') if ($tag->kind === 'Person')
{
echo ' echo '
<a class="delete-tag" title="Unlink this tag from this photo" href="#" data-id="', $tag->id_tag, '"></a>'; <a class="btn btn-danger px-1" title="Unlink this tag from this photo" href="#" data-id="', $tag->id_tag, '">
<i class="bi bi-x"></i>
</a>';
}
echo ' echo '
</div>
</a>
</li>'; </li>';
} }
if ($allowLinkingNewTags)
$this->linkNewTags();
echo ' echo '
</ul>'; </ul>';
} }
@ -145,12 +159,9 @@ class PhotoPage extends Template
private function linkNewTags() private function linkNewTags()
{ {
echo ' echo '
<div> <li style="position: relative">
<h3>Link tags</h3> <input class="form-control w-auto" type="text" id="new_tag" placeholder="Type to link a new tag">
<p style="position: relative"> </li>
<input class="form-control w-auto" type="text" id="new_tag" placeholder="Type to link a new tag">
</p>
</div>
<script type="text/javascript" src="', BASEURL, '/js/ajax.js"></script> <script type="text/javascript" src="', BASEURL, '/js/ajax.js"></script>
<script type="text/javascript" src="', BASEURL, '/js/autosuggest.js"></script> <script type="text/javascript" src="', BASEURL, '/js/autosuggest.js"></script>
<script type="text/javascript"> <script type="text/javascript">