verbb / vizy

A flexible visual editor for Craft CMS
Other
43 stars 8 forks source link

Add example templates for modular rendering #283

Open engram-design opened 4 months ago

engram-design commented 4 months ago

It would be great to provide users with a resource for modular templates, rather than to go your own. It could be used as a starting point to handle every node and mark.

This is for the users who want 100% control over their content, but still shouldn't need to spend an age getting their templating ready to go.

{% for node in entry.vizyField.all() %}
    {% if node.type == 'paragraph' %}
        <p {{ attr(node.attrs) }}>
            {% for nodeContent in node.content %}
                {% for mark in nodeContent.marks %}
                    {% if mark.type == 'link' %}
                        <a {{ attr(mark.attrs) }}>
                    {% elseif mark.type == 'bold' %}
                        <strong>
                    {% elseif mark.type == 'italic' %}
                        <em>
                    {% endif %}
                {% endfor %}

                {{ nodeContent.text }}

                {% for mark in nodeContent.marks %}
                    {% if mark.type == 'link' %}
                        </a>
                    {% elseif mark.type == 'bold' %}
                        </strong>
                    {% elseif mark.type == 'italic' %}
                        </em>
                    {% endif %}
                {% endfor %}
            {% endfor %}
        </p>
    {% endif %}
{% endfor %}

A current starting point is the above, which we'd split out into individual templates for each node and mark. We cannot template Vizy Blocks without knowing in advance what fields are present.

The tricky thing about modular templates is the need to split marks' start and end tags around the text content of a node. We might have to have something like:

{% for mark in nodeContent.marks %}
    {% include 'vizy/marks/' ~ mark.type with { start: true, mark: mark } only %}
{% endfor %}

{{ nodeContent.text }}

{% for mark in nodeContent.marks %}
    {% include 'vizy/marks/' ~ mark.type with { end: true, mark: mark } only %}
{% endfor %}

And in the vizy/marks/bold include, we could have:

{% if start is defined %}
    <strong {{ attr(mark.attrs) }}>
{% elseif end is defined %}
    </strong>
{% endif %}

This could either be a generator within the plugin settings, or an example repository (or folder in this repository). I'm leaning towards the former out of the "cool" factor, and possibly more easier to maintain than a separate repository.