[Support request] How to make Archive Images Square on Mobile

[Tommy]

I have created a full width archive page and wonder if I can make the mobile page featured images display as they are on desktop – square. The featured image full size is 400×400, but as you can see on mobile, they display rectangle.

Desktop: https://ibb.co/8bgW67C
Mobile: https://ibb.co/9tQRskw

I have tried setting the different image sizes in customiser but nothing changes.

Thanks in advance…

[Fernando]

Hi Tommy,

With the current structure in your website, I can see that you have a container that has a background image, and you’re using specific spacing to make the image appear.

To resolve this issue, it the best step is to remove the current padding you have in mobile view, and set a padding-top: 100% instead.

See this for reference: https://share.getcloudapp.com/nOu92G0m

Also see: https://share.getcloudapp.com/JruGZ0rD

See this test I made with this setting: https://share.getcloudapp.com/v1uLqZpW

Kindly let us know how this goes. 🙂

[Tommy]

Thanks Fernando, that did it. Is there anyway I can control the order of the archive posts? I want the ones with most comments to be at the top if possible.

[Fernando]

That sounds great!

One way you can order your archive is by adding a PHP code. Can you try adding this PHP snippet and see if it works?:

add_filter( 'pre_get_posts', 'my_pre_get_posts' );

function my_pre_get_posts( $query ) {
     $query->set( 'orderby', 'comment_count' );
    return $query;
}

Here is an article you may refer to with regards to adding PHP: https://docs.generatepress.com/article/adding-php/

Hope to hear from you soon! 🙂

[Tommy]

That worked a treat, Fernando. thank you so much!

I have a couple more questions about archive page.

How do I put space between the bottom row (or button if first page) and the footer? Right now, there’s little gap and when I add it to the element, the gap is between each row.

Also, is there a way to put other things in under the archives, such as shortcode? But specific to each archive?

[Fernando]

With regards to adding spacing, you can try creating a new block element with a spacer or a Container with Paddings, and hook it onto the specific location you wish.

See this as reference: https://share.getcloudapp.com/eDulZmnP

You may also refer to this Hooks visual guide for more guidance with regards to placing it in the right location: https://docs.generatepress.com/article/hooks-visual-guide/

Kindly try changing the priority to a high or low value depending on your preference. Priority default is 10, and this value determines which blocks goes first if they are in the same hook.

As for your second question, this is possible through setting the appropriate display location rules. For instance, if you choose “Post Category Archive”, instead of setting “All Categories”, you can choose a specific one.

See: https://share.getcloudapp.com/BludPr2y

Hope this helps! 🙂

[Tommy]

Ok, will give all that a try. hanks for your help Fernando!

[Fernando]

You’re welcome Tommy! Feel free to reach out if any further assistance is needed. 🙂

[Tommy]

I’ve noticed since I did this that the posts are also in order of comment count on the wordpress dashboard, and also my pics in the media library areordered by the popular posts instead of newest first. They’re not big problems, but is there anyway, i can change the backend to order by newest first, but my archive pages in order of comment count?

[David]

Hi there,

change this function:

function my_pre_get_posts( $query ) {
    $query->set( 'orderby', 'comment_count' );
    return $query;
}

to:

function my_pre_get_posts( $query ) {
     if (!is_admin()) {
         $query->set( 'orderby', 'comment_count' );
     }
     return $query;
}

[Tommy]

Actually, I just realised there’s an option to ‘only run on site front-end’, which I did, but I also tried your function and that works, too. Thanks again, David!

[David]

Glad to hear that!

[Author]

Posts