We're merging with GenerateBlocks! Learn more here.

[Support request] Can I create this layout using WPSP Pro?

Please login to receive premium support.

Support for the free plugin can be found here.

Home › Forums › Pro Support › Can I create this layout using WPSP Pro?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 12, 2021 at 11:12 am #31917
    Nicolas
    Participant

    Hello,

    I discovered this plugin after starting working with GeneratePress Pro. I am currently using The Grid plugin to display posts and products in grids (some grids for posts, some grids for products). But the plugin is very heavy and I would like to move to a lighter solution.
    With customization (php and css) do you think I could reach this result with WPSP Pro without being a developer? Here is a page of a current grid: https://hautlescours.fr/danse/danse-classique-contemporaine/

    Here are the constraints:

    • I must display several taxonomies relating to the post, including custom taxonomies
    • The design is responsive, from 3 to 1 columns depending on the viewport
    • It is a grid so each element has the same height
    • Most of my images (if not all) have the same ratio 1.5:1

    Thanks for your thoughts on that.

    Best,

    Nicolas

    July 12, 2021 at 4:34 pm #31923
    elvin
    Moderator

    Hi there,

    It’s possible but you have to manually code a few things. (simple hooks)

    I must display several taxonomies relating to the post, including custom taxonomies

    I believe this is the one overlaying the image? You can hook that in usingwpsp_inside_image_container and then style it with CSS. Here’s an example PHP + CSS combo to overlay a category on an image.

    add_action( 'wpsp_inside_image_container', function( $settings ) {
    if ( 30979 === $settings['list_id'] ) {
        $wpsp_cat_list = get_the_category_list(); 
		$wpsp_category = get_the_category();
		if ($wpsp_category) {
			foreach($wpsp_category as $wpsp_cat) {
			$wpsp_cat_slug = $wpsp_cat->slug; 
			}		
		}
		if($wpsp_cat_list){echo '<span class="cat_links"><span class="'.$wpsp_cat_slug.'">'.$wpsp_cat_list.'</span></span>';} 
	}
});
    .wp-show-posts-image .cat_links {
    position: absolute;
    top: 2%;
    left: 2%;
}

    The design is responsive, from 3 to 1 columns depending on the viewport

    Can be done with custom CSS as well. We can do 3 on desktop, 2 on tablet. 1 col on mobile is default.

    It is a grid so each element has the same height

    The plugin has a matchHeight js for that.

    Most of my images (if not all) have the same ratio 1.5:1

    We can force the aspect ratio on all images with CSS. 🙂

    You can try these things out and point us to the page you’ve started working on w/ WPSP. You can ask us if you get stuck on something. 🙂

    July 14, 2021 at 2:52 am #31966
    Nicolas
    Participant

    Thank you Elvin,

    I add success reproducing my The Grid display with WPSP. I shaves off quite a few percentage points in GTMetrix scores! Here is the page I have recreated: https://hautlescours.fr/theatre/scene-theatre/

    I have a few questions:

    • I tried to adapt the code you provided hereabove for categories to a custom taxonomy (‘pratiques’). It displays the taxonomy inside the image container but it doesn’t create the class associated to the term slug. Can you correct my code please (I kept most of your variable names in the code)?
      • add_action( 'wpsp_inside_image_container', function( $settings ) {
    if ( 77954 === $settings['list_id'] || 78041 === $settings['list_id'] ) {
		$taxonomy = 'pratiques';
        $wpsp_cat_list = get_the_term_list($post->ID, $taxonomy); 
		$wpsp_category = get_term_link($taxonomy);
		if ($wpsp_category) {
			foreach($wpsp_category as $wpsp_cat) {
			$wpsp_cat_slug = $wpsp_cat->slug; 
			}		
		}
		if($wpsp_cat_list){echo '<span class="pratiques_links"><span class="'.$wpsp_cat_slug.'">'.$wpsp_cat_list.'</span></span>';} 
	}
});
    • To keep the same image ratio I guess it is better to define the width and height of the image in the WPSP list settings rather than trying to manage it with CSS? That’s what I have done (actually my grids with the Grid worked with generated 450*300px thumbnails, so I just reuse them with WPSP I guess if I select 450*300 in WPSP settings). I didn’t have much luck using CSS snippets found on the forum to achieve this result.

    Thanks,

    Nicolas

    July 14, 2021 at 11:28 pm #32000
    elvin
    Moderator

    It’s because of this – $wpsp_category = get_term_link($taxonomy);

    While my code has this – $wpsp_category = get_the_category();

    They don’t output the same thing. get_the_category() returns an array and this array has a key for slug.

    I don’t think get_term_link($taxonomy) returns an array. I believe it only returns a single value which is a link meaning it doesn’t have the ->slug.

    That’s why $wpsp_cat->slug had no value.

    July 15, 2021 at 4:59 am #32033
    Nicolas
    Participant

    Thank you I get it, no problem it is still perfectly usable.

    July 15, 2021 at 4:37 pm #32070
    elvin
    Moderator

    No problem. 🙂

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.