how to create complex {or} Statements in JSON Template

Question

I've created some JSON Template statements that retrieve the thumbnail image in Page Settings in Squarespace. It works just like it should, but I have 3 sections that pull from a blog list, a blog item and a regular page.

Right now the code runs all three when you go to the site and I'd like to insert {or} statements, that way it's organized and functions correctly.

The thing that's tripping me up is that I have a {.section} and a {.main-image?} or {.section mainImage} so I don't know where to place {or} and have these three sections of code grouped as one.

How would I go about doing this?

<!--Displays Thumbnail image from first blog post in the blog list-->
{.section items.0}
{.main-image?}
            <div class="color-overlay"></div>
<figure class="content-fill main-image"><img {@|image-meta}></figure>
{.end} 
{.end}

<!--Displays Thumbnail image blog post-->       
{.section item}
{.main-image?}
            <div class="color-overlay"></div>
<figure class="content-fill main-image"><img {@|image-meta}></figure>
{.end} 
{.end}

<!--Displays Thumbnail image in a Page-->       
{.section collection}
{.section mainImage}
            <div class="color-overlay"></div>
<figure class="content-fill main-image"><img {@|image-meta}></figure>
{.end} 
{.end}

The thing that's tripping me up is that I have a {.section} and a {.main-image?} or {.section mainImage} so I don't know where to place {or} and have these three sections of code grouped as one.

score 0 · Answer 1 · answered Mar 20 '14 at 17:25

Found the answer! I need to wrap the entire section with

{.if items.0 || item} .. {or} .. {end}

See here:

{.if items.0 || item}

        <!--Displays Thumbnail image from first blog post in the blog list-->
        {.section items.0}
        {.main-image?}
                    <div class="color-overlay"></div>
        <figure class="content-fill main-image"><img {@|image-meta}></figure>
        {.end} 
        {.end}

        <!--Displays Thumbnail image blog post--> 
        {.section item}
        {.main-image?}
                    <div class="color-overlay"></div>
        <figure class="content-fill main-image"><img {@|image-meta}></figure>
        {.end} 
        {.end}

        {.or}

        <!--Displays Thumbnail image in a Page--> 
        {.section collection}
        {.section mainImage}
                    <div class="color-overlay"></div>
        <figure class="content-fill main-image"><img {@|image-meta}></figure>
        {.end} 
        {.end}

        {.end}

how to create complex {or} Statements in JSON Template

1 Answers1