Basic question re creating sectioned lists

Question

Please pardon the basic question, but I'm rather new to ExpressionEngine and hoping to be pointed in the right direction in using the proper tags for creating lists of items separated into sections by headers. The markup for each section would be along the lines of the following:

<section id="coffee-shops">
    <h3>Coffee Shops</h3>
    <div class="item">
        <div class="logo">Coffee Shop 1 logo image</div>
        <p class="description">Coffee shop 1 description text</p>
    </div>
</section>

My questions for creating the proper EE markup are as follows: (1) With which tag pairs can I achieve this sort of list divided by section? (2) How can I specify the order of the sections? (3) For each bit of information for each item, I'm using a separate block level element with a class, e.g. <div class="logo"> or <p class="description> corresponding to each relevant channel field-- is it possible to not have one of these blocks appear if the corresponding image/info is not entered for the field? For example, if a logo image is not available, and thus not entered/published for the channel field, that the div with class logo would be omitted altogether from the entry?

Thanks for any guidance here.

Answer 1

There are a couple of different questions here and they are quite broad but the following may be of help;

If I understand you correctly, you wish to loop through all the Coffee shops and output some information about each one. Assuming that coffeeshops is a channel and each Coffee Shop is an entry within it. To do this you would use the channel:entries tag pair like so;

<section id="coffee-shops">
    <h3>Coffee Shops</h3>
    {exp:channel:entries channel="coffeeshops" dynamic="no"}
        <div class="item">
            <div class="logo">{my-image-field}</div>
            <p class="description">{my-description-field}</p>
        </div>
    {/exp:channel:entries}

</section>

Because we have set the dynamic parameter to "no" everything within the channel:entries tags will be repeated for each open entry in your channel. Note that we have replaced the actual content with fields representing the fields used in coffeeshop entries. (the image field depends on how you are setting that up).

To avoid outputting information for entries that don't have an image you could use a conditional to test if there is anything set.

<section id="coffee-shops">
    <h3>Coffee Shops</h3>

    {exp:channel:entries channel="coffeeshops" dynamic="no"}

            <div class="item">
                {if my-image-field}<div class="logo">{my-image-field}</div>{/if}
                {if my-description-field}<p class="description">{my-description-field}</p>{/if}
            </div>

    {/exp:channel:entries}

</section>

In this case the HTML inside the conditional will only be output IF there is something in the image field.

I'm not sure what you mean by "section" and with regards to the ordering of the sections. By default EE will output things in the entry ID order but you can change this to order by other fields if you wish by use of the orderby and sort parameters.

For example

{exp:channel:entries channel="coffeeshops" orderby="title" sort="asc" dynamic="no"}

Will display the coffeeshops in ascending alphabetical order based on the title field of the entry.

Relevant documentation can be found at https://ellislab.com/expressionengine/user-guide/add-ons/channel/channel_entries.html

To delineate the sections using categories:

{exp:channel:categories category_group="1" style="linear" show_empty="no"}
    {embed="shops" cat="{category_id}"}
{/exp:channel:categories}

Then your shops.html embed file would contain a channel entries loop as shown above but with the addition of a category parameter and the value passed to it from the embed tag;

{exp:channel:entries channel="shops" category="{embed:cat}" dynamic="no"}

Which would loop through the shops entries and output everything that was in the relevant category.

To delineate the sections using related entries:

Assuming there is a "types" channel which contains the different types of shop, and then in the shops channel a relationship field to assign each shop to a particualr type.

You would loop through the types channel's entries then for each one use the {parents} tag pair to get the related entries. Note the parents: prefix on the field names.

{exp:channel:entries channel="types" dynamic="no"}
    {parents field="shop-type"}
        <div class="item">
            {if parents:my-image-field}<div class="logo">{parents:my-image-field}</div>{/if}
            {if parents:my-description-field}<p class="description">{parents:my-description-field}</p>{/if}
        </div>
    {/parents}
{/exp:channel:entries}