I created custom field to show business card design and setup two item image and class but could find something that will display the business card design if I upload image to the blog post, here is what I got myself this far.

{{% if businessscard in get-group-Field('businesscards') %}} <div class="card {{ post.getField('card_orientation') }}"> <div class="asset"> <picture> <img src="{{ post.getField('businesscard') | media }}" /> </picture> </div> <div class="label">Business Card</div> </div> {{ endif }}

Can anyone help me what the right way to use if statement ?

Hi!

Example

1) First field name businesscards
2) Second field name orientation

The block is displayed only when there is an image for the card

{% if post.getField('businesscards') %} 
    <div class="card {{ post.getField('orientation') }}"> 
        <div class="asset"> 
            <picture> 
                <img src="{{ post.getField('businesscards') | media }}" /> 
            </picture>
        </div>
        <div class="label">
            Business Card
        </div> 
    </div> 
{% endif %}

https://www.youtube.com/watch?v=0amVvEYNzuI

Last updated 2 years ago

Thank you for the solution and the Youtube clip was helpful. Many thanks. I am wondering if there is any more detailed documentation that I can study?

Regards

William

Hi again,

I started creating one more but when I select single card orientation card one and and second card double orientation, both card on the frontend show single class. How can I differentiate the two cards that has different orientation class name?

{% if post.getField('businesscard') %} <div class="card {{ post.getField('card_orientation') }}"> <div class="asset"> <picture> <img src="{{ post.getField('businesscard') | media }}" /> </picture> </div> <div class="label"> Business Card </div> </div> {% endif %}

{% if post.getField('websitecaption') %} <div class="card {{ post.getField('card_orientation') }}"> <div class="browser"> <div class="ctl"><i></i><i></i><i></i></div> <div class="grid center-center"> <div class="cell grey"> <h3 class="card-title">Web <strong>Developed</strong></h3> <p class="card-caption">{{ post.getField('websitecaption') }}</p> </div> </div> </div> </div> {% endif %}