[Resolved] How to display multiple dynamic posts within each slide

[Author]

Posts

[morktron]

Tell us what you are trying to do? I'm trying to display multiple posts using a Views slider with a Toolset Blocks template

This was easy to do with old pre-blocks shortcode, HTML and CSS way but I don't see how this can be done using blocks? unless I make a new slider for each of the 4 columns but I'm sure there is a better way

Is there any documentation that you are following? https://toolset.com/course-lesson/creating-sliders-with-dynamic-post-content/ however this only shows how to create a slide with one post, I'm trying to create a slide with 4 columns, each column displaying a different post

Is there a similar example that we can see? hidden link

What is the link to your site? hidden link

[morktron]

I see that I can use the loop wizard > table-based grid and that will build me the 4 columns that I need

However, it is not responsive though, I could replace the Toolset generated table-based grid with the Divi theme equivalent

So how do I convert

<table width="100%" class="wpv-loop js-wpv-loop">
	<wpv-loop wrap="4" pad="true">
		[wpv-item index=1]
		<tr>
			<td>
				[wpv-post-body view_template="homepage-books-slider-slide"]
			</td>
		[wpv-item index=other]
			<td>
				[wpv-post-body view_template="homepage-books-slider-slide"]
			</td>
		[wpv-item index=4]
			<td>
				[wpv-post-body view_template="homepage-books-slider-slide"]
			</td>
		</tr>
		[wpv-item index=pad]
			<td></td>
		[wpv-item index=pad-last]
			<td></td>
		</tr>
	</wpv-loop>
	</table>

to

<div class="et_pb_row et_pb_row_0">
    
    <div class="et_pb_column et_pb_column_1_4 et_pb_column_0  et_pb_css_mix_blend_mode_passthrough">
    </div>
    
    <div class="et_pb_column et_pb_column_1_4 et_pb_column_1  et_pb_css_mix_blend_mode_passthrough">
    </div>
    
    <div class="et_pb_column et_pb_column_1_4 et_pb_column_2  et_pb_css_mix_blend_mode_passthrough">
    </div>
    
    <div class="et_pb_column et_pb_column_1_4 et_pb_column_3  et_pb_css_mix_blend_mode_passthrough et-last-child">
    </div>
    
</div>

Of course, things would be easier if it were possible to build sliders with more than one post without writing code, but Toolset has come a long way and it's getting there!

If I was using a theme based on Bootstrap it would also be easier - but I've read that it is not a good idea to add Bootstrap to Divi

[Luo Yang]

Hello,

There isn't such kind of built-in feature within Toolset Views/ Blocks plugin, and you are right, it is not recommended to use Bootstrap in Divi theme, it might conduct unexpected result.

In your case, it is required to setup the HTML tags manually, same as you mentioned above

[morktron]

Thanks Lou, please could you help me format the Divi HTML so that it will work? It’s really just the last two bits of short code I don’t understand

Thanks

[Luo Yang]

For example, you can replace the codes you mentioned above as below:

<wpv-loop wrap="4" pad="true">
[wpv-item index=1]
<div class="et_pb_row et_pb_row_0">
    <div class="et_pb_column et_pb_column_1_4 et_pb_column_0  et_pb_css_mix_blend_mode_passthrough">
      [wpv-post-link]
    </div>
[wpv-item index=2]   
    <div class="et_pb_column et_pb_column_1_4 et_pb_column_1  et_pb_css_mix_blend_mode_passthrough">
      [wpv-post-link]
    </div>
[wpv-item index=3]   
    <div class="et_pb_column et_pb_column_1_4 et_pb_column_2  et_pb_css_mix_blend_mode_passthrough">
      [wpv-post-link]
    </div>
[wpv-item index=4]   
    <div class="et_pb_column et_pb_column_1_4 et_pb_column_3  et_pb_css_mix_blend_mode_passthrough et-last-child">
      [wpv-post-link]
    </div>
</div>
</wpv-loop>

I have tried it in my localhost, it works fine, see my screenshot divi-grid.JPG

More help:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-loop
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-item

[morktron]

Thanks Lou, I appreciate your help, I shall implement this tomorrow morning and will let you know how I go, thanks again

[Luo Yang]

OK, please update here if you need more assistance for it, thanks

[morktron]

Thank you! yes this worked but in the end, I realised I would have to hand-code the next and back buttons and add some custom PHP functions to reduce the number of posts shown on different size devices, so I just bought a plugin that does it all.

Hopefully one day this feature will be built into Toolset so we don't have to hand-code or use 3rd party plugins.