[Resolved] Create a custom loop view which displays taxonomies as badges

[Author]

Posts

[Aditya Deshmukh]

Tell us what you are trying to do?
I'm trying to create a view that displays the latest posts. How can I create a view which displays badges (for taxonomy terms) and icons in the loop so that the design looks similar to the one attached,

Is there any documentation that you are following?
https://toolset.com/documentation/user-guides/views/view-layouts-101/

Is there a similar example that we can see?
Attached it the image.

What is the link to your site?
hidden link

[Minesh]

Hello. Thank you for contacting the Toolset support.

Do you mean that based on the taxonomy terms attached to the post in the view's loop you want to display the different badges? If yes:
- You can use the view's conditional shortcode [wpv-conditional] to display the conditional output based on the terms assigned to the post.

For example:

[wpv-conditional if="( CONTAINS(#(foreign-language),'chinese') )"]
<p>This consultant speaks Chinese!</p>
[/wpv-conditional]

Where:
- Replace foreign-language with your original taxonomy slug
- Replace chinese with your term slug

More info:
=> https://toolset.com/documentation/user-guides/views/conditional-html-output-in-views/displaying-taxonomies-conditionally/#specific

[Aditya Deshmukh]

<div class="container-fluid">
    <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="margin-top: 40px;">
        <div style="border: 2px solid #95EFD3;padding: 0px;padding-bottom: 44px;">
        <div class="container-fluid" style="position: relative;top: 20px;z-index: 1;max-width: 400px;">
          <div class="row">
            <div class="col-md-12">
              <button type="button" class="btn btn-warning l-btn" style="position: absolute;left: 0;border-radius: 0px;">Featured</button>
              <button type="button" class="btn btn-primary r-btn" style="position: absolute;right: 0;border-radius: 0px;">Rentals</button>
            </div>
          </div>
        </div>
          <div id="myCarousel" class="carousel slide" data-ride="carousel">

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
              <div class="item active">
                <img src="<em><u>hidden link</u></em>">
              </div>

              <div class="item">
                <img src="<em><u>hidden link</u></em>">
              </div>
            
              <div class="item">
                <img src="<em><u>hidden link</u></em>">
              </div>
            </div>

            <!-- Left and right controls -->
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
          <div class="container-fluid" style="position: relative;bottom: 30px;z-index: 1;max-width: 400px;color: white;">
            <div class="row">
              <div class="col-md-12">
                <p><span class="glyphicon glyphicon-map-marker"></span> Manhattan, New York
                  <span class="pull-right"><span class="glyphicon glyphicon-camera" style="padding-right: 5px;"></span>3</span>
                </p>
              </div>
            </div>
          </div>
          <div style="padding: 10px;margin-top: -20px;">
            <h4 style="font-weight: 600;">New York studio apartment</h4>
            <h4 style="font-weight: 600;color: #53A2C8;">BRL 2000 / Month</h4>
            <p style="padding: 15px 0px;">
              Just steps away from QM2 express bus to Manhattan and local buses; only minutes from the LIRR. Just steps away from QM2 express bus to Manhattan [more]
            </p>
            <p>
              <span class="glyphicon glyphicon-bed" style="padding-right: 5px;"></span><span>2</span>
              <span class="glyphicon glyphicon-object-align-right" style="padding-right: 5px;"></span><span style="padding-right: 6px;">2.5</span>
              <span class="glyphicon glyphicon-new-window"  style="padding-right: 5px;"></span><span style="padding-right: 6px;">250.00 m<sup>2</sup></span>
              <button type="button" class="btn btn-warning pull-right" style="border-radius: 0px;">Full Info</button>
            </p>
          </div>
          <p style="border-top: 1px solid #E7ECED;border-bottom: 1px solid #E7ECED;padding: 2px 0px;margin-top: 10px;"></p>
          <div class="pull-right" style="    padding: 7px 10px;">
            <a href="#" style="border: 1px solid #E7ECED;padding: 7px;"><span style="color: #BDC4CB;" class="glyphicon glyphicon-share-alt"></span></a>
            <a href="#" style="border: 1px solid #E7ECED;padding: 7px;"><span style="color: #BDC4CB;" class="glyphicon glyphicon-heart-empty"></span></a>
            <a href="#" style="border: 1px solid #E7ECED;padding: 7px;"><span style="color: #BDC4CB;" class="glyphicon glyphicon-plus"></span></a>
          </div>
        </div>
      </div>
    </div>
  </div>

I have got this code for the card. But this is static. Could you help me how can I integrate this with Toolset to make it work with post loop to make it dynamic?

Thanks!!

[Minesh]

Aditya, sorry to say but we can not help to implement your layouts. I can obviously guide you on what you can use but you need to implement it yourself.

In addition to that, the ticket you created is to display conditional content and now you raised a query to implement your custom Layout, as per our support policy we entertain only one question per ticket. This will help other users searching on the forum as well as help us to write correct problem resolution summery.

You can use the view's shortcodes to add the fields you require and replace with your static values. Following Doc lists all the shortcodes:
=> https://toolset.com/documentation/user-guides/views/views-shortcodes/