0

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.

1 Answer 1

0

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}
4
  • @foamcow-- thanks, this is very helpful. What I mean by sections-- which I should have specified in my original post-- is that there will be other categories/sections beyond "Coffee Shops" on this page, e.g. "Wine Bars," "Restaurants," etc. that will correspond to section IDs with their own lists of items corresponding to specific locations for each general type-- in this case, would I then use categories? Or how would that impact setting up the channels/fields?
    – nickpish
    Nov 20, 2014 at 11:39
  • There are at least 3 ways to approach what you describe. Categories is certainly one way and may be the most appropriate. You could also create another channel for "types", relate each of your "shop" entries to a "type" entry then use relationship tags to display them. The final way would be a separate channel for each type but I probably wouldn't go that route as it's not easily scaleable.
    – foamcow
    Nov 20, 2014 at 11:53
  • The advantage of using a separate channel for "types" over using categories is that it means you can use custom fields in your types allowing for a greater range of information. Personally I also find categories can be a little tricky to work with sometimes. There's no right or wrong way, it's just down to your specific needs.
    – foamcow
    Nov 20, 2014 at 11:55
  • @foamcow-- thanks very much, this is extremely helpful.
    – nickpish
    Nov 21, 2014 at 2:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.