Natuurlijk! Hier is een uitgebreide gids om een content-tagging systeem in Craft CMS te implementeren dat gebruikers toelaat meerdere tags aan één inhoud toe te voegen, inclusief codevoorbeelden en best practices: ### 1. Gebruik de Volledige Tagging Functionaliteit van Craft CMS Craft CMS beschikt over ingebouwde ondersteuning voor tags via de "Tags" sectie en de "Tags" velden. Dit is de meest efficiënte en best practice manier. --- ### 2. Creëer een Taggroep - Ga naar **Content > Tagging**. - Maak een nieuwe **Taggroep** aan, bijvoorbeeld "Onderwerpen" of "Labels". - Voeg relevante tags toe of laat gebruikers nieuwe tags toevoegen (zie volgende stap voor dat laatste). --- ### 3. Voeg een Tag-veld toe aan je Content-Entry - Ga naar je **Entry Types** (bijvoorbeeld onder je Section zoals 'Artikelen'). - Voeg een nieuw veld toe: - Ga naar **Settings > Fields**. - Klik op **New Field**. - Kies voor het veldtype **Tags**. - Geef het een naam, bijvoorbeeld "Tags" of "Labels". - Selecteer de juiste taggroep. - Stel in dat meerdere tags geselecteerd kunnen worden (standaard is dat het meer dan één tag mogelijk is). **Voorbeeld:** ```php // Bij het maken van een nieuw veld Naam: Tags Type: Tags Tag Group: Onderwerpen Allow multiple: Ja (standaard ingesteld) ``` - Voeg dit veld toe aan je Entry Type voor je content. --- ### 4. Gebruikersinteractie en UI - Op de front-end of via het control panel kunnen gebruikers nu meerdere tags selecteren of toevoegen. - Voor front-end formulieren kan je bijvoorbeeld gebruik maken van de [Craft Element API](https://craftcms.com/docs/element-api/overview) of [Sprig](https://plugins.craftcms.com/sprig) voor dynamische formulieren. --- ### 5. Tags Dynamisch Toevoegen via een Front-End Formulier Gebruik bijvoorbeeld de [craft\elements\Entry](https://craftcms.com/docs/element-api/overview) en de standaard `<input>` met `name="fields[tags]"` of een meer gebruiksvriendelijke UI met JavaScript. **Voorbeeld HTML-formulier:** ```html <form method="post" action="/path/to/submit"> <!-- andere velden --> <label for="tags">Tags:</label> <select name="fields[tags][]" multiple> {% for tag in craft.tags.group('onderwerpen') %} <option value="{{ tag.id }}">{{ tag.title }}</option> {% endfor %} </select> <button type="submit">Opslaan</button> </form> ``` --- ### 6. Tags Toevoegen via API of PHP (optioneel) Voor meer geavanceerde implementaties kun je tags automatisch toevoegen of bewerken via PHP: ```php use craft\elements\Tag; // Een nieuwe tag maken $tag = new Tag(); $tag->groupId = craft::$app->tags->getTagGroupByHandle('onderwerpen')->id; $tag->title = "Nieuwe Tag"; craft::$app->elements->saveElement($tag); ``` En tags aan inhoud koppelen: ```php $entry = craft\elements\Entry::findOne(['id' => $entryId]); $entry->setFieldValues([ 'tagsFieldHandle' => [ $tagId1, $tagId2, ], ]); craft::$app->elements->saveElement($entry); ``` --- ### 7. Beste Praktijken - **Gebruik duidelijke taggroepen** voor verschillende contenttypes. - **Sta gebruikers toe nieuwe tags toe te voegen** (via "Allow new tags" optie in het veld). - **Gebruik autocomplete** in je front-end formulieren voor een betere gebruikerservaring, bijvoorbeeld met JavaScript libraries zoals Select2. - **Controleer en filter tags** voor consistentie en relevantie. - **Maak gebruik van cache en indexering** voor snelle zoekopdrachten via tags. - **Overweeg het gebruik van tag clouds** of andere visualisaties voor overzicht. --- ### 8. Extra: Automatisering en Tagbeheer - Maak een backend interface voor het beheren van tags. - Automatiseer tagging op basis van inhoud of metadata. - Gebruik Craft's Event System om tags automatisch toe te wijzen bij nieuwe inhoud. --- Door deze stappen te volgen, kun je een krachtig, gebruiksvriendelijk en flexibel tagging systeem in Craft CMS opzetten dat gebruikers in staat stelt meerdere tags toe te voegen aan één inhoud.

Zeker! Hier is een gedetailleerde handleiding voor het implementeren van een content-tagging systeem in Craft CMS: ## 1. Database Structuur Setup ### Tags Field Group aanmaken ```php // In Craft admin → Settings → Fields // Maak een nieuwe field group "Tags" ``` ### Tags Field maken ```php // Field Type: Tags // Handle: contentTags // Field Settings: // - Source: "Create a new tag group" // - Tag group name: "Content Tags" // - Allow multiple selections: AAN ``` ## 2. Tag Group Configuratie ### In config/tags.php ```php <?php return [ 'contentTags' => [ 'name' => 'Content Tags', 'sortOrder' => 1, 'maxTags' => 10, // Maximum aantal tags per content ] ]; ``` ## 3. Template Implementatie ### Tag Input Form ```twig {# In je template #} <form method="post" accept-charset="UTF-8"> {{ csrfInput() }} <input type="hidden" name="action" value="entries/save-entry"> <input type="hidden" name="sectionId" value="1"> <input type="hidden" name="enabled" value="1"> <div class="field"> <label for="title">Titel</label> <input type="text" id="title" name="title" required> </div> <div class="field"> <label for="contentTags">Tags</label> <select id="contentTags" name="fields[contentTags][]" multiple class="tags-select" data-placeholder="Kies tags..."> {% for tag in craft.tags.group('contentTags').all() %} <option value="{{ tag.id }}">{{ tag.title }}</option> {% endfor %} </select> </div> <button type="submit">Opslaan</button> </form> ``` ### AJAX Tag Toevoeging ```javascript // assets/js/tagging.js class TaggingSystem { constructor() { this.initTagSelect(); this.setupTagCreation(); } initTagSelect() { $('.tags-select').select2({ tags: true, tokenSeparators: [',', ';'], createTag: function (params) { return { id: params.term, text: params.term, newTag: true }; } }); } setupTagCreation() { $('.tags-select').on('select2:select', (e) => { const data = e.params.data; if (data.newTag) { this.createNewTag(data.text); } }); } async createNewTag(tagName) { try { const response = await fetch('/actions/tags/save-tag', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': document.querySelector('[name="CRAFT_CSRF_TOKEN"]').value }, body: JSON.stringify({ groupId: 1, // Je tag group ID title: tagName }) }); if (response.ok) { console.log('Tag succesvol aangemaakt'); } } catch (error) { console.error('Fout bij aanmaken tag:', error); } } } new TaggingSystem(); ``` ## 4. Backend Validatie ### In je module/plugin ```php <?php namespace modules\tagging; use Craft; use craft\elements\Entry; use yii\base\Event; class TaggingModule extends \yii\base\Module { public function init() { parent::init(); Event::on( Entry::class, Entry::EVENT_BEFORE_VALIDATE, function($event) { $this->validateTags($event->sender); } ); } private function validateTags(Entry $entry) { $tags = $entry->contentTags ?? []; // Maximum tags controle if (count($tags) > 10) { $entry->addError('contentTags', 'Maximum 10 tags toegestaan'); } // Dubbele tags voorkomen $tagTitles = []; foreach ($tags as $tag) { if (in_array($tag->title, $tagTitles)) { $entry->addError('contentTags', "Dubbele tag: {$tag->title}"); } $tagTitles[] = $tag->title; } } } ``` ## 5. Template Helpers ### Tag Cloud Weergave ```twig {# tag-cloud.twig #} <div class="tag-cloud"> {% set allTags = craft.tags.group('contentTags').all() %} {% set tagCounts = {} %} {% for tag in allTags %} {% set count = craft.entries.relatedTo(tag).count() %} {% set tagCounts = tagCounts|merge({(tag.title): count}) %} {% endfor %} {% for tag, count in tagCounts|sort((a, b) => a <=> b) %} {% set size = 12 + (count * 2) %} <a href="{{ url('blog/tags/' ~ tag|kebab) }}" class="tag" style="font-size: {{ size }}px;" data-count="{{ count }}"> {{ tag }} </a> {% endfor %} </div> ``` ### Gefilterde Content Weergave ```twig {# entries-by-tag.twig #} {% set selectedTags = craft.app.request.getParam('tags') %} {% set tagArray = selectedTags is iterable ? selectedTags : [selectedTags] %} {% set entries = craft.entries() .section('blog') .relatedTo(tagArray) .all() %} <h2>Content met tags: {{ tagArray|join(', ') }}</h2> {% for entry in entries %} <article class="entry"> <h3>{{ entry.title }}</h3> <div class="tags"> {% for tag in entry.contentTags %} <span class="tag-badge">{{ tag.title }}</span> {% endfor %} </div> </article> {% endfor %} ``` ## 6. Best Practices voor Gebruikersinteractie ### UI/UX Richtlijnen: 1. **Tag Suggesties**: Toon populaire tags tijdens het typen 2. **Tag Limiet**: Toon teller (bijv. "3/10 tags") 3. **Tag Hierarchie**: Optioneel nested tags ondersteunen 4. **Tag Synonyms**: Gelijkwaardige tags groeperen ### Gebruikersinstructies: ```twig {# tag-instructions.twig #} <div class="tagging-instructions"> <h4>Tagging Richtlijnen:</h4> <ul> <li>🎯 Gebruik beschrijvende, consistente tags</li> <li>🔤 Gebruik kleine letters (geen hoofdletters)</li> <li>🔗 Scheid woorden met koppeltekens (bijv. "web-ontwikkeling")</li> <li>📏 Maximum 10 tags per content item</li> <li>🏷️ Gebruik bestaande tags waar mogelijk</li> </ul> </div> ``` ## 7. Geavanceerde Features ### Auto-completion ```javascript // Auto-complete voor bestaande tags $('.tag-input').autocomplete({ source: function(request, response) { $.getJSON('/api/tags/search', { term: request.term }, response); }, minLength: 2 }); ``` ### Bulk Tag Management ```php // In console command voor bulk operations class TagCleanupCommand extends Controller { public function actionMergeDuplicates() { $duplicates = (new Query()) ->select(['title', 'COUNT(*) as count']) ->from('{{%tags}}') ->groupBy('title') ->having('count > 1') ->all(); foreach ($duplicates as $duplicate) { $this->mergeTags($duplicate['title']); } } } ``` ## 8. Performance Optimalisatie ### Database Indexing ```sql -- Voeg indexes toe voor betere performance CREATE INDEX idx_tags_title ON craft_tags(title); CREATE INDEX idx_relations_targetId ON craft_relations(targetId); ``` ### Caching Strategy ```twig {# Gebruik caching voor tag clouds #} {% cache for 1 hour %} {% include 'tag-cloud' %} {% endcache %} ``` Dit systeem biedt een robuuste foundation voor content tagging in Craft CMS met goede gebruikerservaring, validatie en onderhoudsmogelijkheden. Pas de code aan naar je specifieke projectbehoeften!