[Resolved] WP Show Post Show title over image

[Javier]

Hello, on my home page I show the articles of different categories with wp show post. I would like some of them to show the title on the image, however I have only managed it in one of them.

I have copied all the settings, but I don’t know how to make the title show with the background image.

+ Moda is correct, it shows the title on the image.

Nevertheless, Zara displays the title below the image.

How could the first configuration, that of + Moda, replicate?

Thanks

[Tom]

Hi there,

It looks like the Moda one is using the Cards feature, where the other one isn’t. Can you check the Cards section of the settings?

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

[Javier]

Thanks for your help, but I can’t find the Cards feature option.

By default, my GeneratePress theme (Dispatch) has different views configured for WP Show Post.

For example, this also happens with sidebar. Sidebar displays the captions above the images and with an effect on the image when you hover your mouse, while Simple Sidebar does not.

How could I replicate this in my wp show post lists?

Is there a manual where this is explained in detail?

Thank you

[David]

Hi there,

to apply the card style in Dispatch you need to wrap this around your shortcode:

<div class="wpsp-card">

Your Shortcode goes here

</div>

The Dispatch Sites blog provides posts on how to use the Site:

https://gpsites.co/dispatch/blog/

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

[Javier]

Hello, I have tried what you tell me but the CSS style does not apply. Also, on the home page you can see the div code.

I leave it active so you can review it:

Massimo Dutti

Regalo día de la madre
Ideas de regalo para el día de la madre, colección Massimo Dutti mujer primavera 2020
Massimo Dutti 2019
Novedades Massimo Dutti mujer otoño 2019, las tendencias de la temporada

This is the code inserted in my home page with gutenberg:

<h2>Estilo de Vida</h2>
<p>[wp_show_posts name="Estilo"]<!-- using the Standard List --></p>
<hr />
<h2>Celebs</h2>
<div class="wpsp-align">[wp_show_posts name="Celebrities"]</div>
<p><!-- Using the Align List --></p>
<hr />
<h2>+ Moda</h2>
<div class="wpsp-card">[wp_show_posts name="Moda"]</div>
<p><!-- Using the Simple List --></p>

<!-- wp:heading -->
<h2><a href="https://www.modalia.es/moda/zara/">Zara</a></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p> [wp_show_posts name="Zara"] </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><a href="https://www.modalia.es/el-corte-ingles/">El Corte Inglés</a></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p> [wp_show_posts name="Corte_Ingles"] </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><a href="https://www.modalia.es/moda/massimo-dutti/">Massimo Dutti</a></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><div class="wpsp-card"> [wp_show_posts name="Massimo_Dutti"] </div></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Modalia.es, mucho más que moda</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Modalia.es es una revista de moda creada en 2008 con el objetivo de informar sobre el sector de la moda, desde el diseñador hasta el cliente final. <a href="https://www.modalia.es/negocios/ferias/">Ferias</a>, <a href="https://www.modalia.es/disenadores/pasarelas/">pasarelas</a>, <a href="https://www.modalia.es/directorio/agenciademodelos/">agencias de modelos</a>, las novedades de las marcas, aperturas de nuevas tiendas y, sobretodo, las nuevas tendencias. Lo que se lleva y lo que se va a llevar en el cambiante mundo de la moda. </p>
<!-- /wp:paragraph -->

<!-- wp:core-embed/youtube {"url":"https://www.youtube.com/watch?time_continue=4\u0026v=ELNjV0RK52s","type":"video","providerNameSlug":"youtube","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">

</div></figure>
<!-- /wp:core-embed/youtube -->

<!-- wp:heading {"level":3} -->
<h3>Nueva colección 2020</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><a href="https://www.modalia.es/moda/ham/">H&M</a> / <a href="https://www.modalia.es/moda/mango/">Mango</a> /  <a href="https://www.modalia.es/moda/bershka/">Bershka</a> / <a href="https://www.modalia.es/moda/el-corte-ingles/gloria-ortiz/">Gloria Ortiz</a> / <a href="https://www.modalia.es/moda/massimo-dutti/">Massimo Dutti</a> / <a href="https://www.modalia.es/moda/primark/">Primark</a> / <a href="https://www.modalia.es/moda/oysho/">Oysho</a> /  <a href="https://www.modalia.es/moda/pull-and-bear/">Pull & Bear </a></p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Pero además de la moda, también nos interesan los viajes y la gastronomía, nuestro <a href="https://www.modalia.es/estilo-de-vida/">estilo de vida</a> y la <a href="https://www.modalia.es/belleza/">belleza</a> con los últimos tratamientos, muy atentos siempre a los tratamientos naturales y ecológicos, porque nos preocupa el medio ambiente y creemos en la moda sostenible. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>[wp_show_posts name="Belleza"]</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Y además:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>[wp_show_posts name="Home_Footer"]</p>
<!-- /wp:paragraph -->

[David]

Within the editor You need to Edit as HTML

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

[Javier]

Hello, the solution to show the style has been to insert the code with gutemberg, but in an html box:

<!-- wp:html -->
<div class="wpsp-card"> [wp_show_posts name="Home_Footer"] </div>
<!-- /wp:html -->

Thank you

[David]

Glad to hear that

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

[Author]

Posts