if else statement (liquid) not working

[madasafish77]

Hi,

I have the following code in an include file. It is meant to detect the page name and check it against a field in the web app item. It's basically just swapping out the header image depending on the page name. I capture the name into a variable pageName. I then check in the for loop to see if it contains slide.page (this is a dropdown in the webapp item where the user can select a page they want to assign the image to. It seems to work okay but it's also loading the Else part of the condition although the first part of the If statement is correct.

{% assign pageName = {{this.pagename.name}} -%}

{module_webapps id="27445" filter="all" collection="headerSlider" template=""}

<div style="background-color:#000;">

{% for slide in headerSlider.items -%}

  {% if pageName contains slide.page -%}

  <div class="img_responsive">

        <img src="{{slide.['Slide 1']}}"  width="1920" height="300" class="img-responsive" alt="Make Image responsive" />

            </div>

  {% else -%}

    {% if forloop.first == "true" %}

  <div class="img_responsive">

        <img src="/_assets/images/random-images/random1.jpg"  width="1920" height="300" class="img-responsive" alt="Make Image responsive" />

        </div>

  {% endif -%}

    {% endif -%}

{% endfor -%}

</div>

You can see an example here: About Us

[madasafish77]

Resolved this now. It was creating duplicates in the loop so moved the if statement out of the loop and captured the variables I needed to assign the correct image.

Here is the code in case anyone is trying to do this themselves. Just change your Slide 1 field in web app to something more generic like just image. I had it setup as a slider initially until the client decided they wanted a static image. You just create a new web app item for each image and give the item name the same name as your page assign your image and use a dropdown to select the page you want to display the image on. Maybe an easier more efficient way to do this but server my purposes.

{% assign pageName = {{this.pagename.name}} -%}

{module_webapps id="27445" filter="all" collection="headerSlider" template=""}

<div style="background-color:#000;">

{% for slide in headerSlider.items -%}

{% if pageName contains slide.page -%}

{% assign pageAssigned = {{slide.page}} -%}

{% assign headerImage = {{slide.['Slide 1']}} -%}

{% else -%}

  {% assign pageAssigned = "Default" -%}

{% endif -%}

{% endfor -%}

  {% if pageName contains pageAssigned -%}

  <div class="img_responsive">

        <img src="{{headerImage}}"  width="1920" height="300" class="img-responsive" alt="assigned" />

            </div>

    {% elsif pageAssigned == "Default" -%}

    {module_webapps id="27445" filter="item" itemId="5120276" collection="defaultImage" template=""}

    <div class="img_responsive">

        <img src="{{defaultImage.items[0].['Slide 1']}}"  width="1920" height="300" class="img-responsive" alt="default" />

        </div>

  {% else -%}

    {% endif -%}

</div>

[Liam Dilley]

If you look at what you have their and think about the second if block. You should be able to see how you can reduce the code and combine, you do not need those assign checks and then use them later like that

[madasafish77]

Hi Liam,

Thanks for your reply. Are we talking about this first code i posted or second? I had it working, well, sort of it's just that the first if else statement wasn't working so it was loading the image that matched in condition 1 and then 6 images in else condition for each web app item. I couldn't figure it out so moved the if statement out of the for loop to stop it happening. This is why I put that {% if forloop.first == "true" %} into the else part of the statement to try and stop every web app item (image) showing.

I have tried a test here but it's still having problems using that first bit of code. It's not detecting the page I have assigned in the web app item but another page so it's loading the default image in this case. Suppose the good thing is it's only loading one image now instead of all of them. I am just wondering if it's because it's a dropdown I have used in the web app which is causing a problem. test header