I am trying to create a gallery of custom-post-type posts. Each one has several ACF fields. I used the tutorial to add the post types with some success. I understand adding the image, thumbs, title, content, and other basic ones, but I am trying to use a multi-select ACF field to populate class names for a filter bar to select them based on class names.
I am also trying to add an arrow-styled pagination with page numbers feature to it.
I copied the code from the W3 site into the correct boxes for HTML, CSS, JS and added jquery to includes tab. I then went to enable item attributes. On the attributes tab, I added the post list variable to access the ACF fields. Back on the HTML tab I cut out the structure of the buttons so that only one button is in the HTML for showing all posts. I put this in HTML Items. This is the HTML Items code:
<!-- Each button should represent one of the tags assigned to the post -->
<button class="btn" onclick="filterSelection('{% for item in item.post_list.cf_pattern_style %}
{{item.value}}
{% endfor %}
')"> {% for item in item.post_list.cf_pattern_style %}
{{item.label}}
{% endfor %}
</button>
How do I get only one item per button instead of the entire array that is being looped? How do I offset for the next button if I call only only one position? Does this syntax have a while loop? or iterative for loop... for (i=0; i<lengthofArray; i++;)
I was able to incorporate the desired hover effect from the unlimited elements library. I cannot however substitute the overlay color with an attribute. Could you walk me through this? See attached for exported widget files.
www.
I am trying to create a gallery of custom-post-type posts. Each one has several ACF fields. I used the tutorial to add the post types with some success. I understand adding the image, thumbs, title, content, and other basic ones, but I am trying to use a multi-select ACF field to populate class names for a filter bar to select them based on class names.
I am also trying to add an arrow-styled pagination with page numbers feature to it.
I copied the code from the W3 site into the correct boxes for HTML, CSS, JS and added jquery to includes tab. I then went to enable item attributes. On the attributes tab, I added the post list variable to access the ACF fields. Back on the HTML tab I cut out the structure of the buttons so that only one button is in the HTML for showing all posts. I put this in HTML Items. This is the HTML Items code:
<!-- Each button should represent one of the tags assigned to the post --> <button class="btn" onclick="filterSelection('{% for item in item.post_list.cf_pattern_style %} {{item.value}} {% endfor %} ')"> {% for item in item.post_list.cf_pattern_style %} {{item.label}} {% endfor %} </button>
How do I get only one item per button instead of the entire array that is being looped? How do I offset for the next button if I call only only one position? Does this syntax have a while loop? or iterative for loop... for (i=0; i<lengthofArray; i++;)
I was able to incorporate the desired hover effect from the unlimited elements library. I cannot however substitute the overlay color with an attribute. Could you walk me through this? See attached for exported widget files.
Thanks.
This link contains the code for the portfolio I started with: https://www.w3schools.com/howto/howto_js_portfolio_filter.asp