[Resolved] Blank Column for Conditional Statement

[Author]

Posts

[felixG-2]

https://toolset.com/forums/topic/archive-template-group-by-parent-post/#post-1356717

Referring to the reply above previously. I had place the wpv-conditional in the loop item. It appear a blank column. How can I testify the condition of each post before it generate the column?

I have the following in the loop editor:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<wpv-loop wrap="3" pad="true">
		[wpv-item index=1]
		<div class="row ">
			<div class="col-md-4">[wpv-post-body view_template="loop-item-in-city-related-buildings"]</div>
		[wpv-item index=other]
			<div class="col-md-4">[wpv-post-body view_template="loop-item-in-city-related-buildings"]</div>
		[wpv-item index=3]
			<div class="col-md-4">[wpv-post-body view_template="loop-item-in-city-related-buildings"]</div>
		[wpv-item index=pad]
			<div class="col-md-4"></div>
		[wpv-item index=pad-last]
			<div class="col-md-4"></div>
		</div>
	</wpv-loop>
	<!-- wpv-loop-end -->

	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

and Template for the loop item:

[wpv-conditional if="( '[wpv-post-id item="@building-in-development.parent"]' eq '' )"]
<div>[wpv-post-featured-image]</div>
<div>[wpv-post-link]</div>
<div>Rental: From RM [format-number num='[types field='rental-from-rm-psf'][/types]'] to RM [format-number num='[types field='rental-to-rm-psf'][/types]'] psf</div>
<div>[wpv-view name="accreditation-icon"]</div>
[/wpv-conditional]

[Waqar]

Hi Felix,

Thank you for contacting us and I'd be happy to assist.

To avoid the blank columns, you'll need to move the conditional check from inside the content template and wrap it around the call to the content template itself.

However, this will change the resulting item's actual index in the loop, since some of the results will have a parent and some won't.

To overcome this, you can simplify the content in the loop editor section, like this, removing the index references:

[wpv-layout-start]
    [wpv-items-found]
    <!-- wpv-loop-start -->
    <div class="row ">
        <wpv-loop>
        [wpv-conditional if="( '[wpv-post-id item="@building-in-development.parent"]' eq '' )"]
            <div class="col-md-4">[wpv-post-body view_template="loop-item-in-city-related-buildings"]</div>
        [/wpv-conditional]
        </wpv-loop>
    </div>
    <!-- wpv-loop-end -->
 
    [/wpv-items-found]
    [wpv-no-items-found]
        <strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
    [/wpv-no-items-found]
[wpv-layout-end]

This way you can remove the conditional block from the loop item, while maintaining the grid layout, without the blank/empty columns.

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[felixG-2]

Thanks, Waqar.

It did the tricks.

However, I would like to limit 3 columns per <div class="row">, how can I do that?

[Waqar]

Hi Felix,

Thanks for the update and glad that it worked.

Since there will be no fixed pattern for the posts which may or may not have a parent, including the "row" div after X (3) number of results won't be simple.

Is there any specific reason you'd like to include the "row" div for each row? The results should still show in a proper 3 column grid if only a single "row" wrapper div is used.

regards,
Waqar

[felixG-2]

The reason to have 3 columns in a row to to have better control for styling purpose, e.g. banded rows.

Possible to achieve that? Any insight?

[Waqar]

In case, that inclusion of "rows" div for each row, is absolutely required, you can follow these steps.

1. Restore your view to the state it was at the start of this ticket so that it includes the regular code to show content in the Bootstrap grid layout.

2. Please remove the conditional check from this view's template of the loop item, since we'll be using a separate view for this evaluation.

3. Next, create a duplicate of this view, and update that duplicate view so that it only returns the IDs of the qualifying posts, after conditional evaluation, in plain comma-separated format.

Code for the loop editor section:

[wpv-layout-start]
    [wpv-items-found]
    <!-- wpv-loop-start -->
    <div class="row ">
        <wpv-loop>
        [wpv-conditional if="( '[wpv-post-id item="@building-in-development.parent"]' eq '' )"]
        [wpv-post-id],   
        [/wpv-conditional]
        </wpv-loop>
    </div>
    <!-- wpv-loop-end -->
    [/wpv-items-found]
    [wpv-no-items-found]
    [/wpv-no-items-found]
[wpv-layout-end]

To avoid any extra spaces, you'll also need to remove any line breaks and empty spaces from this duplicated view's "Output Editor" and the "Loop Editor" sections.

Example:

[wpv-layout-start][wpv-items-found]<!-- wpv-loop-start --><div class="row "><wpv-loop>[wpv-conditional if="( '[wpv-post-id item="@building-in-development.parent"]' eq '' )"][wpv-post-id],[/wpv-conditional]</wpv-loop></div><!-- wpv-loop-end -->[/wpv-items-found][wpv-no-items-found][/wpv-no-items-found][wpv-layout-end]

4. To avoid extra spaces, please also make sure that in this duplicated view:

- "No pagination" is selected in the pagination settings
- The shortcode "[wpv-filter-meta-html]" is removed from the "Output Editor" section
- "Disable the wrapping DIV around the View" option is checked, just above the "Output Editor" section

5. Once it is confirmed that this new view is only returning the IDs of the qualifying posts, in a comma-separated format, you can include its shortcode in shortcode of the actual view, so that the duplicated view's output gets passed as the value of the shortcode attribute "ids".
( ref: https://toolset.com/documentation/user-guides/passing-arguments-to-views/#controlling-the-filter-with-shortcode-attributes )

[wpv-view name="slug-of-the-actual-view" ids="[wpv-view name='slug-of-the-duplicated-view']"]

Note: You'll replace "slug-of-the-actual-view" and "slug-of-the-duplicated-view" with the actual slugs of these views on your website.

6. As the last step, in the "Query Filter" section of your actual view, include a post ID filter, so that it only includes those posts, whose ID gets passed through the shortcode attribute "ids".

Screenshot: hidden link

I hope this helps and please let me know if any step is not clear.