[Resolved] build loop of custom post tpye within wpbakery page

[Author]

Posts

[dorianS-3]

Tell us what you are trying to do?
This page was set using WPBakery Page Builder: hidden link
I've now changed the lower part displaying the people into a custom post type, containing image/name/country/job position.

Now how do I replace the static div.vc_row.ypa-profiles with a query of the custom post type? It needs to look the same as the static content.

Thx for advising.
Dorian

What is the link to your site?
hidden link

[Shane]

Hi Dorian,

Thank you for getting in touch.

Are you using our Toolset Blocks plugin or are you using Toolset Views. You won't be able to replicate this Layout exactly with the use of Blocks.

Please let me know and we can take it from there.

Thanks,
Shane

[dorianS-3]

Hi Shane,

thank you for taking the the time.

I‘m happy to use whichever one you suggest, Views is currently active. If I cant do it with Blocks I‘ll use Views - not sure about the difference anyways..

Have tried around a little bit but I‘m struggling with the whole concept of placing a view = WPBakery rows inside of a WPBakery TEXT field. Ist seems to mess with the column framework or something?

Any advise very much appreciated.

Thanks,
Dorian

[Shane]

Hi Dorian,

With views you can rebuild your exact setup in Content template section of the view. What you can do is when you create your view for this section, use the Loop Wizard to create a 4 column setup.

Then you can scroll to the content template for this view and Click the Edit with WpBakery Pagebuilder button and it should take you to the pagebuilder.

This should let you edit your view template with the pagebuilder for you to remake your exact layout.

Please let me know if this helps.

Thanks,
Shane

[dorianS-3]

Thanks, Shane.

After creating the view, do I place the shortcode [wpv-view name="ypa-column-list"] inside a TEXT ELEMENT on the desired page?
I have a feeling that messes up my layout, please see screenshots.

I used a 1/3 column in the view, somehow that doesn't translate to the frontend well, please see screenshots.
What's my mistake?

[Shane]

Hi Dorian,

Thanks for the screenshot, yes you are correct in placing the [wpv-view name="ypa-column-list"] inside a TEXT ELEMENT on the desired page.

I would like to have a further look at the view itself. Would you mind allowing me to have admin access to the website so that I can have a more detailed look at the view itself ?

Thanks,
Shane

[dorianS-3]

Hi Shane,

I'm currently contractually not allowed to allow third parties access to the site - is there any other screenshot or information I can provide you with to move forward in finding a solution?

Thanks,
Dorian

[Shane]

Hi Dorian,

Yes please provide a screenshot of your View setup.

I would like to ensure that you've setup the column layout for your view.

Thanks,
Shane

[dorianS-3]

Sure, here's the screenshot.

I'm guessing the column handling can't be done by WPBakery and therefore I've missed adding some kind of Grid to the Loop Editor?

[Shane]

Hi Dorian,

I see the issue now. You setup your view without any columns.

You will need to use the "Loop Wizard" on your view to create the 4 column Layout.

The WPBakery isn't able to handle the column layout because it is not creating the loop itself. What it is doing is telling views how to display each individual post that the view generates.

Please let me know if this is clear.

Thanks,
Shane

[dorianS-3]

Hi Shane,

I got it, thank you.
Wish I could use WPBakery to handle the columns, would make things a lot easier. What I did is basically rebuild the column code in the loop, see LOOP-editor.png. That seems to work - even inside the TEXT Element where the view is placed.

After setting up the item template (see CONTENT-template.png) I still have some troubles with:

1. The CUSTOM HEADING element does not seem to work.
I inserted

[types field="ypa-first-name"][/types] [types field="ypa-last-name"][/types]

in the text field of the element but it just returned an empty headline on the frontend. Ended up replacing it with a text field and styling via CSS code, but that's not what the idea of Views is I guess.
Since toolset is supposed to work "with all 50 built-in content elements" (https://toolset.com/documentation/user-guides/using-toolset-with-wpbakery-page-builder/displaying-fields-inside-any-wpbakery-page-builder-element/) I just wonder if I did anything wrong in setting it up?

2. The Design Options I set for the Text Blocks in the item template do not get applied on the frontend. Maybe I'm doing something wrong, but it seems more like a bug.

As you can see on the "original" on hidden link the "country" TEXT BLOCK receives custom margins and padding, but in the item template they don't get applied (see Design-Options-Frontend.png). I've set the exact same margins and paddings.

.vc_custom_1586109467712 {
    margin-bottom: 8px !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
}

3. The link to a types URL field does not work, only "hidden link" gets shown in the frontend (see screens LINK-to-linkedin.png and LINK-to-linkedin-Frontend.png). What am I doing wrong?

Please advise.

Thanks,
Dorian

[Shane]

Hi Dorian,

1. The CUSTOM HEADING element does not seem to work.

Try adding your shortcode like this.
{!{types field="ypa-first-name"}!{{!{/types}!} {!{types field="ypa-last-name"}!}{!{/types}!}

2. The Design Options I set for the Text Blocks in the item template do not get applied on the frontend. Maybe I'm doing something wrong, but it seems more like a bug.

Given that you're not able to provide a custom login for me to check the site is it possible to provide a copy? Also remember that the View is providing the entire wrapper so the settings here will only apply to each individual item that is being displayed. Perhaps the setting is only being applied to the individual persons being listed out.

3. The link to a types URL field does not work, only "hidden link" gets shown in the frontend (see screens LINK-to-linkedin.png and LINK-to-linkedin-Frontend.png). What am I doing wrong?

This is not how you would write the code for the shortcode to be linked to something.

You will need to manually write out the html like this.

<a href='my-url'>[types field="ypa-job"][/types]</a>

Please let me know if this helps.
Thanks,
Shane

[dorianS-3]

1. That gave me just "" as the output.
I've worked around it using a TEXT element and custom CSS code.

2. Can't provide a copy either, sorry. Since I need to deliver this to the client today I ended up using custom classes per element and applying custom CSS code.
Not the nicest thing but it workes for now. Will get back to this issue when I find the time.

3. Managed to do it.

Thank you for your help!
Dorian