[Resolved] How can I make from scratch slider image from dispatch?

[Sara]

Hello,

I am building my website from scratch and I would like to know, how I can make with wpshowposts a hero slider like dispatch site library has, but instead of doing it like dispatch I would like to show like colorlib theme https://wordpress.org/themes/colormag/ so it would be 1 big hero image and then other 4 on same size.

Thanks!

[Tom]

Hi there,

Show Posts itself isn’t really built for that kind of layout, but it is possible.

Dispatch is using CSS Grid to build the layout using one single list.

Another option is to:

1. Build two lists
2. The first list should display only 1 post.
3. The second list should be set to display 4 posts, with the offset in More Settings set to 1 so it doesn’t duplicate the first post.
4. Use GenerateBlocks to build a two-column grid, and place each list in each column.

Let me know if you need more info 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Sara]

Hello Tom,

I am trying building list but does not seem to be working, can you please tell how to make same slider as dispatch from scratch?

Thanks,

Sara

[Leo]

What isn’t working for you?

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sara]

Hello Leo,

Thanks for the fast reply, sure just added website to support ticket.

What I would like to place is slider from dispatch on website.

Can you tell me how to do this?

Thanks!

[Leo]

There is no slider in the default Dispatch.
https://gpsites.co/dispatch/

Which section are you referring to?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sara]

I know is not an official slider but, hero image looks like a slider, I want to place same hero image on my website showing latest 4 posts of all categories like happens on dispatch.

How I can do this Leo?

Thanks!

Sara

[Leo]

Tom provided pretty instruction here:
https://generatepress.com/forums/topic/how-can-i-make-from-scratch-slider-image-from-dispatch/#post-1418101

Which part are you stuck on?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sara]

Yes but, that is for slider from colormag not from dispatch one, how can I build dispatch one?

[David]

Hi there,

its not easy – as the Dispatch site imports a Hook Element for outputting the post list, and some CSS to style it.

I provide the instructions in this topic:

https://generatepress.com/forums/topic/magazine-grid-from-dispatch-on-another-gp-theme-no-success-hooks-added/#post-1306763

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sara]

Hello David,

I followed your steps but it seems the style classes “wpsp-grid wpsp-card” to place in the “Element Classes field” not seem to be working. Since its showing posts as normal listing.

I have place it like this on the Element Classes Field => wpsp-grid wpsp-card

Do I need to add any special character like # or .? Do I need to separate it with semicolon?

Please let me know since style is not working, thanks!

[David]

Actually its a lot more complicated.

First off add this PHP snippet to your site:

add_action( 'wpsp_before_header' , function() {
    ?>
    <div class="wpsp-content-wrap">
    <!-- Openeing wrapper -->
    <?php
}, 15 );

add_action( 'wpsp_after_content' , function() {
    ?>
    <!-- Close WPSP Wrapper -->
    </div>
    <?php
}, 15);

Once thats in place ill send you a new link for the CSS thats required.
The header element classes you have added are correct.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sara]

Hello David,

I installed plugin “Insert PHP Code Snippet” to add php code you mention is been created and is giving me a shortcode, where do I place it?

And what would be next step? Thanks!

[David]

No – that code should not be creating a Shortcode.

Remove that plugin and use this:

https://en-gb.wordpress.org/plugins/code-snippets/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sara]

Hello David,

I installed plugin you recommend and added code snipped with your code and I placed to execute only in homepage is that last step, corrected?

If so, what would be next step?

Thanks!

[Author]

Posts