---
permalink: /music/artists/index.php
type: dynamic
schema: artist
---
<a class="back-link" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" %} Back to music</a>
<article class="artist-focus">
  <div class="artist-display">
    <img
      class="image-media"
      srcset="
        {{ globals.cdn_url }}<?= htmlspecialchars($artist["image"]) ?>?class=w200&type=webp 200w,
        {{ globals.cdn_url }}<?= htmlspecialchars($artist["image"]) ?>?class=w600&type=webp 400w,
        {{ globals.cdn_url }}<?= htmlspecialchars($artist["image"]) ?>?class=w800&type=webp 800w
      "
      sizes="(max-width: 450px) 200px,
              (max-width: 850px) 400px,
              800px"
      src="{{ globals.cdn_url }}<?= htmlspecialchars($artist["image"]) ?>?class=w200&type=webp"
      alt="<?= htmlspecialchars($artist["name"]) ?> • <?= htmlspecialchars(parseCountryField($artist["country"])) ?>"
      decoding="async"
      width="200"
      height="200"
    />
    <div class="media-meta">
      <h2><?= htmlspecialchars($artist["name"]) ?></h2>
      <span class="sub-meta country">{% tablericon "map-pin" %} <?= htmlspecialchars(
        parseCountryField($artist["country"])
      ) ?></span>
      <?php if ($artist["favorite"]): ?>
        <span class="sub-meta favorite">{% tablericon "heart" %} This is one of my favorite artists!</span>
      <?php endif; ?>
      <?php if ($artist["tattoo"]): ?>
        <span class="sub-meta tattoo">{% tablericon "needle" %} I have a tattoo inspired by this artist!</span>
      <?php endif; ?>
      <?php if ($artist["total_plays"] > 0): ?>
        <span class="sub-meta">
          <mark>
            <?= $artist["total_plays"] . ' ' . pluralize($artist["total_plays"], "play") ?>
          </mark>
        </span>
      <?php endif; ?>
      <span class="sub-meta">
        <?= htmlspecialchars($artist["emoji"] ?? $artist["genre"]["emoji"]) ?>
        <a href="<?= htmlspecialchars($artist["genre"]["url"]) ?>">
          <?= htmlspecialchars($artist["genre"]["name"]) ?>
        </a>
      </span>
    </div>
  </div>
  <?php
    renderAssociatedMedia(
      $artist["related_artists"] ?? [],
      $artist["books"] ?? [],
      $artist["genres"] ?? [],
      $artist["movies"] ?? [],
      $artist["posts"] ?? [],
      $artist["shows"] ?? []
    );
  ?>
  <?php if (!empty($artist["description"])): ?>
    <h2>Overview</h2>
    <div data-toggle-content class="text-toggle-hidden">
      <?= parseMarkdown($artist["description"]) ?>
    </div>
    <button data-toggle-button>Show more</button>
  <?php endif; ?>
  <?php if (!empty($artist["concerts"])): ?>
    <p id="concerts" class="concerts">
      {% tablericon "device-speaker" %}
      I've seen this artist live!
    </p>
    <ul>
    <?php foreach ($artist["concerts"] as $concert): ?>
      <?php
        $venue = "";
        if (!empty($concert["venue_name"])) {
          if (!empty($concert["venue_latitude"]) && !empty($concert["venue_longitude"])) {
            $venue = '<a href="https://www.openstreetmap.org/?mlat=' . htmlspecialchars($concert["venue_latitude"]) . '&mlon=' . htmlspecialchars($concert["venue_longitude"]) . '#map=18/' . htmlspecialchars($concert["venue_latitude"]) . '/' . htmlspecialchars($concert["venue_longitude"]) . '">' . htmlspecialchars($concert["venue_name_short"]) . '</a>';
          } else {
            $venue = htmlspecialchars($concert["venue_name_short"]);
          }
        }
        $modalId = "modal-" . htmlspecialchars($concert["id"]);
      ?>
      <li class="concerts">
        On <mark><?php echo date("F j, Y", strtotime($concert["date"])); ?></mark>
        <?php if (!empty($venue)): ?>
          at <?php echo $venue; ?>
        <?php endif; ?>
        <?php if (!empty($concert["notes"])): ?>
          <?php $notes = "### Notes\n" . htmlspecialchars($concert["notes"]); ?>
          <noscript>
            <input class="modal-input" id="<?php echo $modalId; ?>" type="checkbox" tabindex="0" />
            <label class="modal-open" for="<?php echo $modalId; ?>">
              {% tablericon "info-circle" %}
            </label>
            <div class="modal-wrapper">
              <div class="modal-body">
                <label class="modal-close" for="<?php echo $modalId; ?>">
                  {% tablericon "circle-x" %}
                </label>
                <?php echo parseMarkdown($notes); ?>
              </div>
            </div>
          </noscript>
          <button class="modal-open client-side" data-modal-trigger="<?php echo $modalId; ?>" data-modal-button>
            {% tablericon "info-circle" %}
          </button>
          <dialog id="dialog-<?php echo $modalId; ?>" class="client-side">
            <button class="modal-close" data-modal-button>
              {% tablericon "circle-x" %}
            </button>
            <?php echo parseMarkdown($notes); ?>
          </dialog>
        <?php endif; ?>
      </li>
    <?php endforeach; ?>
  </ul>
  <?php endif; ?>
  <table>
    <tr>
      <th>Album</th>
      <th>Plays</th>
      <th>Year</th>
    </tr>
    <?php foreach ($artist["albums"] as $album): ?>
      <tr>
        <td><?= htmlspecialchars($album["name"]) ?></td>
        <td><?= $album["total_plays"] > 0 ? $album["total_plays"] : "-" ?></td>
        <td><?= $album["release_year"] ?></td>
      </tr>
    <?php endforeach; ?>
  </table>
</article>
<?php
  $html = ob_get_clean();
  $htmlMin = new HtmlMin();
  $htmlMin->doOptimizeAttributes(true);
  $htmlMin->doRemoveComments(true);
  $htmlMin->doSumUpWhitespace(true);
  $htmlMin->doRemoveWhitespaceAroundTags(true);
  $htmlMin->doOptimizeViaHtmlDomParser(true);
  echo $htmlMin->minify($html);
?>