20.3-componentizing.md

Don't rely on an element's content model.

It's good practice to make your component's data agnostic.

Let's you easily do things like eagerload an asset in one spot but not in another or use the component with a category and not with an entry. Also helps with static data for prototyping in the early stages of a project.

{# _news/index.twig #}

{% for entry in craft.entries({
    section: "news",
    limit: 10,
}).all() %}
    <div>
        {% include "_components/card" with {
            image: entry.listingImage.one(),
            heading: entry.title,
            description: entry.description,
        } only %}
    </div>
{% endfor %}

{# _news/index-alt.twig #}

{% for entry in craft.entries({
    section: "news",
    limit: 10,
    with: ["listingImage"],
}).all() %}
    <div>
        {% include "_components/card" with {
            image: entry.listingImage|slice(0, 1),
            heading: entry.title,
            description: entry.description,
        } only %}
    </div>
{% endfor %}

{# _components/card.twig #}

<div>
    {% if image %}
        <img src="{{ image }}" alt="">
    {% endif %}
    {% if heading %}
        <h3>{{ heading }}</h3>
    {% endif %}
    {{ description }}
</div>