Tell us what you are trying to do?
Modify my View loop so that it retains the three column structure but places a unique image in the first position and then starts the loop in the second position before continuing onto the second row with all three spaces as normal. So if my output of 8 items currently looks like this:
* = View Item p = Padding
* * *
* * *
* * P
I want to modify it to look like this:
* = View Item p = Padding i = Image
i * *
* * *
* * *
Please note that the amount of items in the view output will vary as you'd expect.
Is there any documentation that you are following?
https://toolset.com/documentation/user-guides/views/digging-into-view-outputs/
Is there a similar example that we can see?
Not that I'm aware of.
What is the link to your site?
hidden link
Hello,
I think it is possible, you just need to display the "Image" outsider Views loop, for example:
...
Here display your "Image"
<wpv-loop>
...
Here display 8 items
...
</wpv-loop>
...
More help
https://toolset.com/documentation/user-guides/views/views-shortcodes/#wpv-loop
Hi Luo,
I appreciate your response, but that doesn't really solve my problem, but reading it back I don't think I was as clear as I could have been.
At present my view output looks like the first attached image and uses this code:
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop wrap="3" pad="true">
[wpv-item index=1]
<div class="row property-row">
<div class="col-md-4">
<div class="property-select">
<a href="#" data-toggle="modal" data-target=".propertiesModal-[wpv-post-id]">
[wpv-post-body view_template="loop-item-in-development-properties-view"]
</a>
</div>
</div>
[wpv-item index=other]
<div class="col-md-4">
<div class="property-select">
<a href="#" data-toggle="modal" data-target=".propertiesModal-[wpv-post-id]">
[wpv-post-body view_template="loop-item-in-development-properties-view"]
</a>
</div>
</div>
[wpv-item index=3]
<div class="col-md-4">
<div class="property-select">
<a href="#" data-toggle="modal" data-target=".propertiesModal-[wpv-post-id]">
[wpv-post-body view_template="loop-item-in-development-properties-view"]
</a>
</div>
</div>
</div>
[wpv-item index=pad]
<div class="col-md-4">
<div class="property-select">
<img src="<em><u>hidden link</u></em>" alt="Martins Developments" />
</div>
</div>
[wpv-item index=pad-last]
<div class="col-md-4">
<div class="property-select">
<img src="<em><u>hidden link</u></em>" alt="Martins Developments" />
</div>
</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]
What I want to achieve is replacing the first entry with an image whilst retaining all the formatting around it, so basically just remove the content template and either call an image or a different content template for the first position and then start the rest of them off as normal. I can do this is I REPLACE the first entry with the image and then start it at entry two, but I want it to start it at entry one, as demonstrated in the second image.
I have tried pretty much everything I can think of regarding the view loop index numbers and inside and outside various parts of the loop, but I always either reproduce the image every line or simply break the loop.
Hopefully these images and code snippet will make it clearer on what I'm trying to achieve. I'm sure it's not that hard to do, but for the life of me I can't figure this one out.
You can use [wpv-conditional] to check if current item is first item of loop, then display something else, for example:
[wpv-conditional if="( '[wpv-loop-index accumulate="false" pad="false" offset="-1"]' = 0 )"]
This is first item, display something else
[/wpv-conditional]
More help:
https://toolset.com/documentation/user-guides/views/views-shortcodes/#wpv-loop-index
This shortcode is used to display the current index in a View loop
https://toolset.com/documentation/user-guides/views/views-shortcodes/#wpv-conditional
Conditional shortcode to be used to display a specific block of meta HTML based on results of a boolean expression .
I hadn't thought of using [wpv-loop-index accumulate="false"], so I will have a play and get back to you after the holidays.
Thanks for the suggetion.
I have marked this thread as "waiting for feedback" status, you can update it when you need more assistance.
Hi Luo,
I've had a play around with the conditional and I've made progress but still can't quite get the result I need. Using the conditional I can get the image appearing in the first position, but then I either need to have the normal content template beneath it or it needs to be in an else, but I can't quite figure out how to get the else working and there's no mention of it in the code.
I will continue to play with it tomorrow but is there an example of this kind of thing working you could give me please?
Here is the nearest I've got to it working properly:
[wpv-item index=1]
<div class="row property-row">
<div class="col-md-4">
<div class="property-select">
<a href="#" data-toggle="modal" data-target=".propertiesModal-[wpv-post-id]">
[wpv-conditional if='( [wpv-loop-index accumulate="false" pad="false" offset="-1"] = 0 )']
<img src="<em><u>hidden link</u></em>" alt="Lavender Close" />
[/wpv-conditional]
[wpv-post-body view_template="loop-item-in-development-properties-view"]
</a>
</div>
</div>
[wpv-item index=other]
...
I need to use an else on the line:
[wpv-post-body view_template="loop-item-in-development-properties-view"]
and then I think it'd be working fine and will hopefully progress the first result to the second slot and so on.
Thanks again.
For example:
[wpv-conditional if='( [wpv-loop-index accumulate="false" pad="false" offset="-1"] = 0 )']
<img src="<em><u>hidden link</u></em>" alt="Lavender Close" />
[/wpv-conditional]
[wpv-conditional if='( [wpv-loop-index accumulate="false" pad="false" offset="-1"] = 0 )' evaluate='false']
[wpv-post-body view_template="loop-item-in-development-properties-view"]
[/wpv-conditional]
More help:
https://toolset.com/documentation/user-guides/views/views-shortcodes/#wpv-conditional
evaluate (opt):
true | false
It can be set to true or false and controls whether we want the condition to be met or not. The default value is true.
Hmmm, that's basically what I thought.
Doing that has taken me back to where I'd gotten to originally (although no where near as tidy as your method) where I can get the image in position 1, but then the loop starts in position 2 with loop item 2, not loop item 1.
I'm assuming this is to do with it being called within the
part of the loop, which brings me back to my original question or how do I break it out of the loop in this position so that the first item is the image, and force the loop to start in the second output slot?
For the [wpv-index] shortcode, please check our document:
https://toolset.com/documentation/user-guides/views/views-shortcodes/#wpv-item
If you use the wrap or pad attributes for the [wpv-loop] shortcode new loops are generated by the value of wrap. In such scenario wpv-item shortcodes address index items in the wrap loops.
It won't work as expected in your case, since you are using wrap and pad attribute in <wpv-loop>
https://toolset.com/forums/topic/adding-a-unique-view-output-in-first-position/#post-1420513
I don't really understand what your response was trying to tell me there. I've read through those docs loads of times before and during trying to sort this, and it hasn't helped, which is why I started a support thread.
You even say in your message that it won't work for me given the that I am using wrap and pad, which are there due to the loop wizard generating them, but don't expand on how this can be achieved.
Surely it can't be this difficult to put something before the loop results?
Let me expand it with details:
Since you are using wrap and pad attributes in <wpv-loop> shortcode:
https://toolset.com/forums/topic/adding-a-unique-view-output-in-first-position/#post-1420513
The [wpv-item index=1] shortcode will work in all items of first column.
You can test it in your website, you should be able to see that all items in first column will display the featured image
And I have provided the detail example in my answer here:
https://toolset.com/forums/topic/adding-a-unique-view-output-in-first-position/#post-1441677
I have tried above codes in my localhost, it works fine, see screenshot first-position.JPG
In order to check current item is the first item of view result, you need to check the shortcode
[wpv-loop-index accumulate="false" pad="false" offset="-1"]
If you need more assistance for it, please provide a test site with the same problem, also point out the problem page URL and view URL, I can setup a demo for you
I'm sorry Luo, I've read that time and time again and no matter how I arrange everything it still starts the loop on item two and overwrites entry one with the image rather than bumping it along.
I've included the full loop code here with it implemented as you have suggested, all of my plugins are up to date in case you were wondering, but I've spent hours now trying to follow these instructions and I just cannot get it to act as you say it should. Can you see anything I've got wrong here, because it is really has me stumped.
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop wrap="3" pad="true">
[wpv-item index=1]
<div class="row property-row">
<div class="col-md-4">
<div class="property-select">
[wpv-conditional if='( [wpv-loop-index accumulate="false" pad="false" offset="-1"] = 0 )']
<img src="<em><u>hidden link</u></em>" alt="Lavender Close" />
[/wpv-conditional]
[wpv-conditional if='( [wpv-loop-index accumulate="false" pad="false" offset="-1"] = 0 )' evaluate='false']
<a href="#" data-toggle="modal" data-target=".propertiesModal-[wpv-post-id]">
[wpv-post-body view_template="loop-item-in-development-properties-view"]
</a>
[/wpv-conditional]
</div>
</div>
[wpv-item index=other]
<div class="col-md-4">
<div class="property-select">
<a href="#" data-toggle="modal" data-target=".propertiesModal-[wpv-post-id]">
[wpv-post-body view_template="loop-item-in-development-properties-view"]
</a>
</div>
</div>
[wpv-item index=3]
<div class="col-md-4">
<div class="property-select">
<a href="#" data-toggle="modal" data-target=".propertiesModal-[wpv-post-id]">
[wpv-post-body view_template="loop-item-in-development-properties-view"]
</a>
</div>
</div>
</div>
[wpv-item index=pad]
<div class="col-md-4">
<div class="property-select">
<img src="<em><u>hidden link</u></em>" alt="Martins Developments" />
</div>
</div>
[wpv-item index=pad-last]
<div class="col-md-4">
<div class="property-select">
<img src="<em><u>hidden link</u></em>" alt="Martins Developments" />
</div>
</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]
Thanks for the details, for the problem:
no matter how I arrange everything it still starts the loop on item two and overwrites entry one with the image rather than bumping it along
You can try the suggestion in my first answer: display the image outsider the <wpv-loop> shortcode
https://toolset.com/forums/topic/adding-a-unique-view-output-in-first-position/#post-1415677
For example:
[wpv-layout-start]
[wpv-items-found]
<div class="row ">
<div class="col-md-4"><img src="<em><u>hidden link</u></em>" alt="Lavender Close" /></div>
<!-- wpv-loop-start -->
<wpv-loop>
<div class="col-md-4">
<div class="property-select">
<a href="#" data-toggle="modal" data-target=".propertiesModal-[wpv-post-id]">
[wpv-post-body view_template="loop-item-in-development-properties-view"]
</a>
</div>
</div>
</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]
Unbelievable!
I tried your original suggestion straight away, obviously, before going any deeper and it didn't work the first time. This time, it's worked!
I think it was to do with the [wpv-item] tags which I stripped out this time and it has worked perfectly, and this is exactly how I would have expected it to work originally.
Thanks for all the help Luo.
