Tags outputs key values

1

Hi…!
in my site… there are 8 category… they are tags.
i want to show kidol to K idol, musicVideo to music video but in .category-category-list, working well. but in .works-list-content’s every category shows kidol to kidol, musicVideo to musicVideo…
can you help me…? i tried many things with chat gpt… gpt can not help me anymore…

<?php snippet('header');

$directors = page('works')->children()->listed()->pluck('director', ',', true);
$uniqueDirectors = array_unique($directors);

$categories = page('works')->children()->listed()->pluck('category', ',', true);
$uniqueCategories = array_unique($categories);

$customCategoryOrder = [
    'beauty', 'lifestyle', 'food', 'drink', 'electronic', 'musicVideo', 'IT', 'kidol'
];

$categoryNameMappings = [
    'beauty' => 'beauty',
    'lifestyle' => 'lifestyle',
    'food' => 'food',
    'drink' => 'drink',
    'electronic' => 'electronic',
    'musicVideo' => 'music video',
    'IT' => 'IT',
    'kidol' => 'K idol'
];

$works = page('works')->children()->listed()->flip();
$selectedDirector = param('director');
$selectedCategory = param('category');
if (!empty($selectedDirector) && !empty($selectedCategory)) {
    $works = $works->filter(function ($work) use ($selectedDirector, $selectedCategory) {
        return $work->director()->html() === $selectedDirector &&
            $work->category()->html() === $selectedCategory;
    });
} elseif (!empty($selectedDirector)) {
    $works = $works->filterBy('director', $selectedDirector, ',');
} elseif (!empty($selectedCategory)) {
    $works = $works->filterBy('category', $selectedCategory, ',');
}

$dir = get('dir');
?>
<script>
    var tempDirName = '<?=$dir?>';
</script>

<section class="works-list" data-barba="container">
   <div class="works-list-top">
        <div class="list-top-category">
            <div class="top-category-director">
                <div class="category-director-title"><h3>director</h3><img src="../assets/source/down-mobile.svg" class="down-mobile"></div>
                <div class="category-director-list">
                    <?php foreach ($uniqueDirectors as $director) : ?>
                        <span class="filter-director" data-showtype="work" data-director="<?= $director ?>"><?= $director ?></span>
                    <?php endforeach; ?>
                </div>
            </div>
            <div class="top-category-category">
                <div class="category-category-title"><h3>category of work</h3><img src="../assets/source/down-mobile.svg" class="down-mobile"></div>
                <div class="category-category-list">
                <?php
                foreach ($customCategoryOrder as $categoryKey) {
                    if (array_key_exists($categoryKey, $categoryNameMappings)) {
                        $categoryName = $categoryNameMappings[$categoryKey];
                    } else {
                        $categoryName = $categoryKey;
                    }

                    echo '<span class="filter-category" data-category="' . $categoryKey . '">' . $categoryName . '</span>';
                }
                ?>
                </div>
            </div>
        </div>
        <div class="list-top-toggle">
            <img src="../assets/icons/work.svg" id="toggle-work">
            <img src="../assets/icons/archive.svg" id="toggle-archive">
            
            
            <div class="list-top-search">
                <input id="search" type="text" placeholder="looking for something?" />
            </div>
        </div>
    </div>

    <div class="works-list-content">
        <?php foreach ($works as $work) :
            $brand = $work->brand()->html();
            $director = $work->director()->html();
            $category = $work->category()->html();
            $coverImage = $work->cover()->toFile();
            $client = $work->client()->html();
            $campaign = $work->campaign()->html();
            $date = $work->date()->toDate('Y'); 
            $creativeby = $work->creativeby()->html();
            if($creativeby == 'yes'){
                $creativeby = 'yes';
            }else{
                $creativeby = 'no';
            }            
        ?>
            <div class="list-thum-link filterable" data-director="<?= $director ?>" data-category="<?= $category ?>" 
                data-keywords="<?= $brand ?> <?=$director?> <?=$category?> <?=$date?> <?=$client?> <?=$campaign?>" data-creativeby="<?=$creativeby?>">
                <div class="list-thum">
                    <a href="<?= $work->url() ?>">
                    <?php if ($coverImage) : ?>
                        <?php $resizedImage = $coverImage->resize(800, null); ?>
                        <img src="<?= $resizedImage->url() ?>" loading="lazy" class="list-thum-image lozad">
                    <?php endif; ?>
                    </a>
                    <div class="list-thum-content">
                        <div class="list-thum-title">
                            <h3><?= $brand ?></h3>
                            <h5><?= $category ?></h5>
                        </div>
                        <div class="list-thum-table-first-cell">
                            <div class="list-thum-table-row">
                                <h4 class="list-thum-table-title"><?= $brand ?></h4>
                                <h4 class="list-thum-table-category"><?= $category ?></h4>
                                <h4 class="list-thum-name"><?= $campaign ?></h4>
                                <h4 class="list-thum-director"><?= $director ?></h4>
                                <?php if ($work->creativeby()->exists() && $work->creativeby()->toBool()) : ?>
                                    <img class="list-thum-surplus" src="../assets/source/white_logo.svg" alt="">    
                                <?php else : ?>
                                    <h4 class="list-thum-surplus"></h4>    
                                <?php endif; ?>
                                 <a href="<?= $work->url() ?>">
                                    <div class="list-thum-year">
                                        <h4><?= $date ?></h4>                     
                                        <img src="../assets/icons/archive-go.svg" class="archive-go">
                                    </div>
                                </a>
                            </div>
                            <div class="table-additional-images">
                            <?php foreach ($work->additionalImages()->toFiles() as $image): ?>
                                <?php $thumb = $image->thumb(['width' => 150]); ?>
                                <img src="<?= $thumb->url() ?>" loading="lazy" alt="<?= $image->filename() ?>" class="lozad">
                            <?php endforeach; ?>
                            </div>
                        </div>
                        <div class="list-thum-archive-director">
                            <h4><?= $director ?></h4>
                        </div>
                        <div class="list-thum-archive-category">
                            <h4><?= $category ?></h4>
                        </div>                    
                    </div>
                   
                </div>
                <div class="list-thum-archive">
                    <div class="list-thum-content-archive">
                        <div class="list-thum-row">
                            <h3><?= $brand ?></h3>
                            <h5><?= $category ?></h5>
                        </div>
                        <div class="list-thum-row">
                            <h4><?= $campaign ?></h4>
                            <a href="<?= $work->url() ?>">
                                <h4><?= $date ?></h4>
                            </a>
                        </div>
                    <?php if ($work->creativeby()->exists() && $work->creativeby()->toBool()) : ?>
                        <img class="list-thum-surplus" src="../assets/source/white_logo.svg" alt="">    
                    <?php else : ?>
                        <h4 class="list-thum-surplus"></h4>    
                    <?php endif; ?>
                    </div>
                    <div class="table-additional-images-archive">
                        <?php foreach ($work->additionalImages()->toFiles() as $image): ?>
                            <img src="<?= $image->url() ?>" loading="lazy" alt="<?= $image->filename() ?>" class="lozad">
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
</section>

<?php snippet('footer'); ?>
2

Using tags for what you are doing (custom order, custom label for each tag) seems rather complex.
Have you thought about replacing this with a select field, that would be defined once maybe at site level (managing the order, slug and name could be done in a structure field for instance).
You can use a select field with a list from another field, as shown in the docs here:

That will also enable you to not hardcode tag names in your template…

3

Here, you fetch a value from your category map by key, so you get the correct result.

Here you don’t, so you get a different result.

4

On a side note: If you pass true as third ($unique) parameter to the pluck() method, you already get an array of unique items.

Therefore, using array_unique() here is redundant.