[Resolved] A few layout issue I have…

[Mathieu]

Hi,

I’ve been rebuilding myself a lean, not bloated, child theme for all my sites using GeneratePress for the past week or so and the timing was really great to find you. Very happy so far.

However, I have a few questions and I am sure there’s gonna be more in the next weeks.

1) How can I put the name of the categories and the little folder images ahead of the featured image? Both in list and single.

2) I have added a breadcrumbs using this code :

// Ajouter le fil d'ariane de YOAST
add_filter("generate_before_main_content", "ajouter_fil_ariane");
if (!function_exists("ajouter_fil_ariane")) {
    function ajouter_fil_ariane()
    {
        if (function_exists('yoast_breadcrumb')) {
            if (!is_home()) {
                yoast_breadcrumb('<p id="site-breadcrumbs" style="padding: 20px 0;">', '</p>');
            }
        }
    }
}

And well, it is showing at the right place but padding is different in in_category() or is_single(). I am not sure why and how to fix it.

3) I am trying to add an image and a label on the posts featured image in listing to show that it’s hot right now.

I have this code :

.post-image .hotpost {
	background-image: url(/images/hothothot.png);
	background-position:50% 50%;
	background-repeat: no-repeat;
	position:absolute;
	width: 24px; height: 24px; top: 10px; right: 14px;
}
.post-image .hottexte {
	background-color:#1E73BE;
	border-radius: 25px;
	position:absolute;
	color:white;
	font-weight: bold;
	display: inline-block;
	vertical-align: middle;
  font-size:11px;
	text-align: center;
	width: 68px; height: 22px; top: 36px; right: 4px;

add_filter("generate_after_entry_header", "ajouter_en_vedette", 10, 1);
if (!function_exists("ajouter_en_vedette")) {
    function ajouter_en_vedette($content)
    {
        if (isHot(get_the_id())) {
            ?>
        <span class="hotpost"></span><span class="hottexte">En vedette!</span>
      <?php
        }
    }
}

I seem to be unable to hook myself inside the “post-image”

. If I use position 9, it’s too early, position 10 it doesn’t work and position 11 it’s too late.

I don’t know if I am clear or maybe there’s just a simpler way.

4) Do you have a “Related posts” snippets that would work with the theme style?

Thanks a lot.

Have a nice weekend.

GeneratePress 2.2.2

GP Premium 1.7.8

[Tom]

Hi there,

1. What do you mean by “ahead of the featured images”? Any examples?

2. Try decreasing the priority a bit:

add_filter("generate_before_main_content", "ajouter_fil_ariane", 1);

3. You could try filtering the output:

add_filter( 'generate_featured_image_output', function() {
    $isHot = false;
    if ( isHot( get_the_id() ) ) {
        $isHot = '<span class="hotpost"></span><span class="hottexte">En vedette!</span>';
    }

    return sprintf( // WPCS: XSS ok.
        '<div class="post-image">
            <a href="%1$s">
                %2$s
            </a>
            %3$s
        </div>',
        esc_url( get_permalink() ),
        get_the_post_thumbnail(
            get_the_ID(),
            apply_filters( 'generate_page_header_default_size', 'full' ),
            array(
                'itemprop' => 'image',
            )
        ),
        $isHot
    );
} );

4. Not off by hand. There should be quite a few plugins out there that will work nicely with GP though.

Let me know 🙂

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

[Mathieu]

Thanks a lot Tom.

1) I just want to move the categories around and maybe change the icon.

See screenshot : https://prnt.sc/mvztq7

2) You’re a ninja, that worked.

3) Also worked. That’s so cool.

4) It’s really just the responsive lean CSS I need, I have a better way to pick the related posts than those plugins.

Do you have a list of GP-friendly contractor or maybe even yourself that can do those things? I am getting too old to pretend I am a fullstack dev.

5) [a new one]

In the is_category() page, I want to hook myself into the <h1>The Category</h1> and change the text to a more SEO-friendly one I have internally.

How can I do that?

Kindest regards,

[Tom]

1. GP 2.3 will make this so much easier. Right now, you could try something like this:

add_action( 'generate_after_entry_title', function() {
    $categories_list = get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'generatepress' ) );

    if ( $categories_list ) {
        printf( '<span class="entry-meta cat-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
            _x( 'Categories', 'Used before category names.', 'generatepress' ),
            $categories_list
        );
    }
} );

4. What kind of CSS/styling do you need help with? If it’s somewhat minor, we’re happy to help in here.

5. Is this for one specific category, or all of them?

You could try this:

add_filter( 'get_the_archive_title', function( $title ) {
    if ( is_category( 'My Category' ) ) {
        return 'Custom title for My Category';
    }

    if ( is_category( 'Another Category' ) ) {
        return 'Custom title for Another Category';
    }

    return $title;
} );

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

[Mathieu]

1) Nice! I can’t wait for the new version. But please tell me I am not hooking on everything for nothing and there won’t be breaking changes 🙂

4) It’s pretty simple actually, I just want a CSS that would display 4 thumbnails side-by-side with title on desktop and one-per-line full-width on mobile.

A little bit like : https://prnt.sc/mwj4as

But that would follow the style, fonts, colors of the GeneratePress.

5) That didn’t work at first but with priority 30, that worked very well. Thanks.

6) [again-a-new-one] In the blog post and also the blog listing, I would like to be able to programatically show the date or not depending on content. Right now, it’s an all or nothing option.
I have some content that is news and some that really shouldn’t be dated.

Best regards,

[Tom]

1. No breaking changes 🙂

4. Should be easy – what does it look like right now? We should be able to tweak it for you.

6. What’s the condition? We should be able to do this with a filter, but we’d need to know what condition to check for.

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

[Mathieu]

1) Perfect 🙂

2) It looks like shit, haha!

It’s a pretty simple <div> with <ul> <li> that needs some styling. It’s showing up in the URL I provided.

$my_query = new wp_query($args);

            if ($my_query->have_posts()) {
                echo '<div id="related-posts"><h3>On vous recommande chaudement!</h3><ul>';
                while ($my_query->have_posts()) {
                    $my_query->the_post(); ?>
            <li><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail("medium"); ?><?php the_title(); ?></a>
            </li>

        <?php
                }
                echo "</ul></div>";
            }

6) Something like :

if ((int)get_post_meta($post_id, "mode_pilot",true)==1) {
    // Don't show the date
} else {
   //  Show the date
}

But I can take care of that part it’s really how to filter it out & in that I need help 🙂

Kindest regards,

[Tom]

2. Try this CSS:

#related-posts ul {
    display: flex;
    list-style-type: none;
    margin-left: 0;
}

#related-posts li {
    width: 25%;
    padding: 20px;
}

#related-posts img {
    display: block;
    width: 100%;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    #related-posts ul {
        display: block;
    }

    #related-posts li {
        width: 100%;
    }

    #related-posts li img {
        display: block;
        margin-bottom: 20px;
    }
}

6. Try this PHP:

add_filter( 'generate_post_date', function( $show ) {
    if ( (int) get_post_meta( get_the_ID(), "mode_pilot", true ) ==1 ) {
        return false;
    }

    return $show;
} );

Let me know 🙂

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

[Mathieu]

Hi Tom,

2) It is working fine. Almost perfect on desktop but if I want the image to be full width on my cellphone or at least take all the space it can takes. Do I have to change the CSS or change the width of my thumbnail? Or both? What would be a good width?

6) It doesn’t seem to enter in the hook. I tried your exact code.
And, I’ve tried that with priority 1 and also priority 30.

I’ve tried echo, sending me an email. It’s never triggered.

add_filter('generate_show_date', 'afficher_ou_non_la_date', 1, 1);

if (!function_exists("afficher_ou_non_la_date")) {
    function afficher_ou_non_la_date($show)
    {
        if ((int) get_post_meta(get_the_ID(), "qc_blog_republiable", true) ==1) {
            return false;
        }

        return $show;
    }
}
  

Best regards,

[Tom]

2. I just edited the CSS above: https://generatepress.com/forums/topic/a-few-layout-issue-i-have/#post-837147

6. Have you tried adding it using one of these methods?: https://docs.generatepress.com/article/adding-php/

Let me know 🙂

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

[Mathieu]

Hi Tom,

2) Finally, I have tweak it with 33% because 4 side-by-side was a little bit too much.

Let’s say I want to make it two lines? How would I make it change line?

6) I have it in my child theme at the right place. Are you sure about “generate_show_date” ? It’s nowhere in generatepress/ or gp-premium/ and the only Google search for the term is this thread.

Regards,

[Tom]

2. Setting the width to 50% should do it.

6. Ah, sorry about that. It should be generate_post_date. Updated the code above.

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

[Mathieu]

1)

Here’s my CSS :

#related-posts ul {
    display: flex;
    list-style-type: none;
    margin-left: 0;
		width:100%;
}

#related-posts li {
    width: 33%;
    padding: 20px;
}

#related-posts img {
    display: block;
    width: 100%;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    #related-posts ul {
        display: block;
    }

    #related-posts li {
        width: 100%;
	padding: 0px;
	text-align: center;
    }

    #related-posts li img {
        display: block;
        margin-bottom: 20px;
    }
}

And here’s the result : https://prnt.sc/n00t34

I am not sure what you mean by width: 50%? I have tried in on the UL, but what I really want is two lines of three.

6) Super! That works 🙂

Thanks

[Tom]

Try this as your CSS:

#related-posts ul {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    margin-left: 0;
    width:100%;
}

#related-posts li {
    width: 33%;
    padding: 20px;
    box-sizing: border-box;
}

#related-posts img {
    display: block;
    width: 100%;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    #related-posts ul {
        display: block;
    }

    #related-posts li {
        width: 100%;
	padding: 0px;
	text-align: center;
    }

    #related-posts li img {
        display: block;
        margin-bottom: 20px;
    }
}

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

[Mathieu]

Wow! Perfect. Thanks 🙂

[Author]

Posts