how to display my custom post type in the given filterable gallery ?

  1. Here is the code that i want to display my custom post type to
    filter the projects , any help ?
  2. i created custom post type which include image ,
    catagory , file and title i want to make a filter gallery html
    dynamic from wp query . i want to display that custom post type data in the below code so that i can filter the items with li related class .

https://codepen.io/creotip/pen/dfjeF

<div class="toolbar mb2 mt2">
  <button class="btn fil-cat" href="" data-rel="all">All</button>
  <button class="btn fil-cat" data-rel="web">Websites</button>
  <button class="btn fil-cat" data-rel="flyers">Flyers</button>
  <button class="btn fil-cat" data-rel="bcards">Business Cards</button>
</div> 

<div style="clear:both;"></div>   
<div id="portfolio">
  <div class="tile scale-anm web all">
        <img src="2-mon_1092-300x234.jpg" alt="" />
  </div>
  <div class="tile scale-anm bcards all">
    <img src="jti-icons_08-300x172.jpg" alt="" />
  </div>
  <div class="tile scale-anm web all">
    <img src="emi_haze-300x201.jpg" alt="" />
  </div>
  <div class="tile scale-anm web all">
            <img src="codystretch-300x270.jpg" alt="" />
  </div>
  <div class="tile scale-anm flyers all">
        <img src="97190&w=350&h=190.jpg" alt="" />
  </div>
  <div class="tile scale-anm bcards all">
            <img src="img.jpg" alt="" />
  </div>
  <div class="tile scale-anm flyers all">
    <img src="jti-icons_08-300x172.jpg" alt="" />
  </div>
  <div class="tile scale-anm flyers all">
    <img src="transmission_01-300x300.jpg" alt="" />
  </div>
  <div class="tile scale-anm web all">
        <img src="image.jpg" alt="" />
  </div>
  <div class="tile scale-anm flyers all">
           <img src="image.jpg" alt="" /> 
  </div>
  <div class="tile scale-anm web all">
        <img src="the-ninetys-brand_02-300x300.jpg" alt="" />
  </div>
  <div class="tile scale-anm bcards all">
            <img src="1-300x300.jpg" alt="" />
  </div>
  <div class="tile scale-anm web all">
       <img src="3%97190&w=350&h=190.jpg" alt="" /> 
  </div>
  <div class="tile scale-anm bcards all">
          <img src="emi_haze-300x201.jpg" alt="" />  
  </div>
  <div class="tile scale-anm web all">
            <img src="smission_01-300x300.jpg" alt="" />
  </div> 
  <div class="tile scale-anm web all">
      <img src="0&w=350&h=190.jpg" alt="" />  
  </div> 
  <div class="tile scale-anm bcards all">     
            <img src="=200&h=290.jpg" alt="" />
  </div>
</div>

<div style="clear:both;"></div>  

Read more here: how to display my custom post type in the given filterable gallery ?

Leave a Reply

Your email address will not be published. Required fields are marked *