Tell us what you are trying to do?
I have two custom post types, girls and reviews. I have a ‘reviews’ page built in elementor that shows a toolset view that lists each review in a row. The view consists of 4 fields in a bootstrap layout. The fields are post title, review source, review date and review link. I’m happy with the view and it works. I’d like to edit it though so the layout changes to show a two column box per row. The first column should have just one row with the featured image of the girls cpt post that the review is linked to, the second column should show 4 rows each with the 4 current fields in.
I cannot see any option in the Loop Wizard to take the featured image not of the post, which would be the review cpt, but of the cpt post the review is linked to which in this case is girls.
Is that possible? If so can you tell me how I do this please.
Is there any documentation that you are following? No.
Is there a similar example that we can see? No.
What is the link to your site? hidden link
Hi, looks like a bug where all the post relationship options aren't appearing correctly in the post selection tab. Until we can get that fixed, I can show you how to modify the shortcode manually to point to the parent post. First, you need to know the post relationship slug. You can find that by going to Toolset > Relationships. Edit the relationship between girls and reviews and copy the slug of the relationship.
Then in the Loop Editor, find the wpv-post-featured-image shortcode. Add an item attribute that points to the related post using the syntax item='@relationship-slug.parent'. So if your slug is girl-review and girl is the parent in this relationship, then the shortcode would look something like this:
[wpv-post-featured-image item='@girl-review.parent']
We have more information about the item attribute here: https://toolset.com/documentation/user-guides/views-shortcodes/item-attribute/
We also have more information about Views shortcodes like wpv-post-featured-image available here: https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-featured-image
Let me know if you get stuck or if I misunderstood what you want to accomplish.
Hi Christian,
Fantastic. It works so thank you very much for explaining things.
I was confused that I needed to go to the loop editor to find the short code as that put it at the top in the loop window after clicking it. I needed to remove it and put it in the content t template area below. Anyway, that's just my lack of experience with Toolset.
Using the following code in the content template the correct info is there now on hidden link
[wpv-post-featured-image size="-bg-portrait" item="@reviewed-girl.parent"]
[wpv-post-link]
[types field="review-source"][/types]
[types field="review-date"][/types]
[types field="review-link"][/types]
...but how do I get it to look good. I want to use a big image but force it to display small so the quality is good (I'm the photographer so so I'm a bit precious with images). I've chosen the custom image size I need but how do I get the data lined up so that the image is in a left column on it's own, then the [wpv-post-link], [types field="review-source"][/types], [types field="review-date"][/types] and [types field="review-link"][/types] fields are all in a right hand column?
If that's too complicated then I'd be happy to have things left as they are with the fields separated by line breaks and just the image being forced to show at a max height of 150px.
Are you able to help me with this? I've tried bootstrap and table views but can't seem to split the content display into two columns. With regards to the image size I've tried wrapping the the image field in a div and giving it a max-height and tried adding css in amongst the [wpv-post-featured-image size="-bg-portrait" item="@reviewed-girl.parent"] code but all my attempts fail.
Any help with tweaking this so it looks good would be gratefully appreciated.
Many thanks,
Barry.
Hi Christian,
I've fiddled a bit (I discovered the 'grid' button) and have got something almost ok using the following code on hidden link
<!--CONTAINER-->
<div style="padding:5px;border:1px solid rgba(72,165,251,0.32);background-color: rgba(72,165,251,0.17);">
<!--ROW 1-->
<div class="row">
<div class="col-sm-6"><div style="max-width:100px;">[wpv-post-featured-image size="-bg-portrait" item="@reviewed-girl.parent"]</div>
</div>
<div class="col-sm-6">[wpv-post-link] - [types field="review-source"][/types] - [types field="review-date"][/types]
</div>
</div>
<!--END ROW 1-->
<!--ROW 2-->
<div class="row">
<div class="col-sm-12">[types field="review-link"][/types]</div>
</div>
<!--END ROW 2-->
</div>
<!--END CONTAINER-->
<br>
....and although the size of the image is contained I can't get the first grid row to show its 2 columns side by side. The second row which I added manually with col-sm-12 correctly spans the area, but the row above with 2 cols marked with col-sm-6 should be left and right equal sizes I believe. It's just this that's stopping me finishing the view so I'm so close. You can see the layout I want on the right hand side of the page in the black sidebar. The girl image is on the right and the text on the left. It's this but in reverse that I need.
Are you able to help with this one tweak please?
Many thanks,
Barry.
It looks like you need to activate the Bootstrap library to use their grid system. Go to Toolset > Settings > General and scroll down to Bootstrap loading. Choose the option Toolset should load Bootstrap.
My issue is resolved now. Thank you!
