Web App Conditonal Content

[BlancTeam]

Hello!

I created a web app to display at lease one image in the detail page.

My client now wants to display two images in specific items.

I have a border set to display around the images but when there isn't a second image, I don't want the border to display.

Here's the link to the pages.

One image: SEPARATE PLACING BOOM IN CLEVELAND

Two images: BUILDING EXCELLENCE AWARD

I was thinking on creating two content holders. One with the one image layout and the other with a two image layout. When the web app has the two images, the two image content holder will display using if/else statements.

Can this be done and if so how?

Thanks so much for any help.

Marian

[Liam Dilley · Accepted solution]

If your using a web app you do not need any content holders.. I am a bit confused at the suggestion for that.

All of that are just custom fields of the web app. Using Liquid if the field is empty do not show it.

[BlancTeam]

Thanks Liam for replying. Were you able to view the pages via the links?

I'm using a web app to display text and images but most of the detail pages only needs to display one images.

I needed to add another field for a second image in the web app for when the client has two images to display on the details page.

Since I have a border displaying around the images, the border still displays when there isn't an image.

I was thinking using a conditional statement to display the two image layout with certain pages would be the best approach.

Is there a better approach and if not, how can I achieve what I'm trying to accomplish?

Thanks so much!

Marian

[BlancTeam]

I figured it out.

Here's what I did.

{% if this.itemID == '12965841' -%}

<div class="service clearfix">

<div class="entry">

<img class="img-responsive" alt="{tag_image alt}" src="{tag_image_value}" />

<div class="magnifier">

<a data-gal="prettyPhoto[product-gallery]" alt="{tag_image alt}" href="{tag_image_value}">

<span class="buttons">

<em class="fa fa-search"></em>

</span>

</a>

</div>

</div>

</div>

<!-- end service-box -->

<div class="service clearfix">

<div class="entry">

<img class="img-responsive" alt="{tag_image 2 alt}" src="{tag_image 2_value}" />

<div class="magnifier">

<a data-gal="prettyPhoto[product-gallery]" alt="{tag_image 2 alt}" href="{tag_image 2_value}">

<span class="buttons">

<em class="fa fa-search"></em>0

</span>

</a>

</div>

</div>

</div>

<!-- end service-box -->

{% else -%}

  <div class="service clearfix">

<div class="entry">

<img class="img-responsive" alt="{tag_image alt}" src="{tag_image_value}" />

<div class="magnifier">

<a data-gal="prettyPhoto[product-gallery]" alt="{tag_image alt}" href="{tag_image_value}">

<span class="buttons">

<em class="fa fa-search"></em>

</span>

</a>

</div>

</div>

</div>

<!-- end service-box -->

{% endif -%}

The only thing now is when the client has another page that will need to display more than one image, I will have to figure out how to make that work since I have this coded for only one itemID:

{% if this.itemID == '12965841' -%}

Can anyone help me to figure this out?

Much appreciated.

Marian

[Liam Dilley]

Hi Marian,

You do not do it like that.

If your web app has two custom media fields and you add images to them then you show two, if it does not then you do not show one. You apply that across the board, not targeting items directly.

Liquid extends more then just the logic but all tags etc.

{% if {this.['My Custom Field'] !='' -%}<img class="img-responsive" alt="{name}" src="{{this.['My Custom Field']}" />{%endif-%}

[BlancTeam]

Thank you so much Liam for getting back to me.

Unfortunately, this is not working for me. I'm sure I'm doing something wrong.

Here is what I have done:

{tag_description}

<div class="about-howard-block">

<h3>ABOUT HOWARD CONCRETE PUMPING</h3>

<div class="col-lg-8 col-md-8 col-xs-12">

<p>Since 1972, Howard Concrete Pumping has provided professional and trouble-free concrete pumping services and has earned the reputation as the premier geotechnical contractor on projects which require the placement of concrete, grout, flowable fills, and slurries.  Our professional staff with years of experience is available to help provide the safest, most productive, and economical solution to any concrete placement or geotechnical project. We pride ourselves on our ability to innovate new and better solutions to difficult construction problems.</p>

</div>

<div class="col-lg-4 col-md-4 col-xs-12">

<div class="service clearfix">

<div class="entry">

<img class="img-responsive" alt="{tag_image alt}" src="{tag_image_value}" />

{% if {this.['tag_image_2_value'] !='' -%}<img class="img-responsive" alt="{tag_image alt}" src="{{this.['tag_image_2_value']}" />{% endif -%}

<div class="magnifier">

<a data-gal="prettyPhoto[product-gallery]" alt="{tag_image alt}" href="{tag_image_value}">

<span class="buttons">

<em class="fa fa-search"></em>

</span>

</a>

</div>

</div>

</div>

<!-- end service-box -->

</div>

<p style="clear: both;"><button class="btn btn-cta special" onclick="goBack()">Go Back</button></p>

</div>

First image is tag_image_value.

Second image is tag_image_2_value.

There will most likely be one image showing but here, the Building Excellence Award has two images I need to display.

What am I doing wrong with the code you sent?

So much appreciate your help Liam.

Thanks,

Marian