[Resolved] Link Category to a specific page – not the archive page

[David]

3. Not easily – the purpose of the Custom Excerpt is that you define exactly what you want to be written there. By default the Custom excerpt is not displayed on the Single Post.

5. You can adjust the query in the PHP snippet – ie. this:

if(!empty($get_description)){

becomes:

if(!is_tag() && !empty($get_description)){

[Max]

Hi David!

3.) I used the auto-excerpt function and left out the custuom excerpt (WP) – it is far easier this way. However, I did encounter a problem: While I was able to limit the excerpt length on the tag archive page with the according php snippet I was not able to add a “read more” button even though I used the filter provided in the documentation. However, once I added a “read more” label in the customizer a button appeared. Unfortunately it also appears inside of the plugin I am using which is why there would be two “read more” buttons (one comes with the plugin).
On the other hand this is also an opportunity to standardise the “read more” buttons on the page which means I would be using the built-in option of GP instead of the plugin option. In this case I would not need an extra php snippet/filter to add a “read more” button but I do need to style the current one. Can you provide the code? I want to change its style, colour, size, maybe add the same transition like everywhere else. I also want to change the colour of the “loading” label. Changing the “loading” text was easy of course but the colour still remains gray once the process starts.

5.) That worked like a charm – thank you!

6.) On the “author page” (the page which shows all the posts of the according author once you click on the author’s name) I would like to achieve the same thing we made possible on the tag archive page. Do you I just need to change the “is” conditional? If so, could you tell me what the conditional for the author page is called? I know that as far as CSS goes I can use the .archive.author selector but php is another matter I suppose.

6.1.) On the author (archive) page there is one additional “feature” which looks fairly ugly as long as it is left unstyled. That is the “author box” (image, name, description). Is there a way to style and/or remove it?

[David]

3. This CSS will style the GP read-more the same as the other plugin:

a.read-more {
    color: #000000;
    background-color: #fff;
    font-size: 14px;
    line-height: 20px;
    border: 1px solid rgba(206,169,47,0.76);
    padding: 6px 15px;
}
a.read-more:hover {
    border: 1px solid  #000;
    color: rgba(206,169,47,0.76);
    background-color: #fff;
}

Which loading button do you mean?

6. is_author() is the conditional tag for an author archive. You can see all the conditional tags here:

https://codex.wordpress.org/Conditional_Tags

6.1 This CSS to remove the author avatar:

.author .page-header .avatar {
    display: none;
}

[Max]

Hi David!

3.) The code worked but the button’s bottom border line is missing/it gets cut off. Once you hover over it with your mouse it gets displayed though. Do you have any idea what might be causing this? It only happens in combination with the plugin though. Let me know if I should rather ask the support forum over there.

The “loading button” appears once you go to e.g. this page, scroll down until you see the “More Results” button. Everything is fine as long as you keep your mouse on the button but once you move it the button turns gray (while loading).

6.) Thank you for providing this page – it is incredibly useful!
The list php snipped I applied to the tag archives page also worked here.

However, when I tried to apply the php snippet for changing the featured image’s size it broke my page.
This is the code I used:

add_filter( 'generate_blog_image_attributes','tu_variable_image_sizes' );
function tu_variable_image_sizes( $atts ) {
    if (is_author ()) {
        $atts[ 'width' ] = 250;
        $atts[ 'height' ] = 170;
        $atts[ 'crop' ] = true;
    }
    return $atts;
}

So basically I just exchanged is_tag for is_author.

6.1.) Thank you – that worked although I decided to style the “author box” a bit.

[David]

3. Add this CSS as the plugins CSS is stripping the CSS:

.sp-post-carousel-pro-section .sp-post-carousel-pro-area a.read-more {
    border: 1px solid rgba(206,169,47,0.76);
}

3. Loading button – I am not seeing this – its the same styling when loading whether its hovered or not. Can you check the site as a logged out user

6. Your conditional is wrong there should be no space before () ie. is_author()

[Max]

I applied your code:

3.) It worked – perfect!
The only thing that remains is: Once you click on the button it turns and stays gray. I tried to change it with the a.read-more:visited selector but that did not work so well. Once the button has been clicked I simply want the font to keep the color of the mouse-over (rgba(206,169,47,0.76)).
I also noticed that e.g. on tag archive pages, once you click on the read more button, its border color simply changes and it flickers once you hover over it. Only in Firefox though. In Opera and Edge the button simply turns gray. In general I want a site-wide solution, so the same behaviour for all of the read more buttons.

Loading button: I uploaded a gif to show you the issue I described. It happens when I am logged in or out in different browsers: https://www.dropbox.com/s/5zri3we5d24q0ie/Loading%20button%20turning%20gray.gif?dl=0

6.) I changed the conditional (I had tried that out before) but the snippet still breaks my site. I used the same snippet for the tag archive (with a space before the ())and it worked without any issues. So they are the same just the conditional is different.

The code for the tag archive snippet:

add_filter( 'generate_blog_image_attributes','tu_variable_image_sizes' );
function tu_variable_image_sizes( $atts ) {
    if (is_tag()) {
        $atts[ 'width' ] = 250;
        $atts[ 'height' ] = 170;
        $atts[ 'crop' ] = true;
    }
    return $atts;
}

And the code for the author archive snippet:

add_filter( 'generate_blog_image_attributes','tu_variable_image_sizes' );
function tu_variable_image_sizes( $atts ) {
    if (is_author()) {
        $atts[ 'width' ] = 250;
        $atts[ 'height' ] = 170;
        $atts[ 'crop' ] = true;
    }
    return $atts;
}

[David]

3. In this CSS try giving the background color some importance ie:

a.read-more {
    color: #000000;
    background-color: #fff !important;
    font-size: 14px;
    line-height: 20px;
    border: 1px solid rgba(206,169,47,0.76);
    padding: 6px 15px;
}

6. When adding functions there name must be unique:

add_filter( 'generate_filter_hook','my_function_name_must_be_unique' );

Currently both you’re filter functions have the same function name which is the issue. Considering the output is the same in both functions you can simply have one function and include an || or condition:

add_filter( 'generate_blog_image_attributes','tu_variable_image_sizes' );
function tu_variable_image_sizes( $atts ) {
    if (is_tag() || is_author() ) {
        $atts[ 'width' ] = 250;
        $atts[ 'height' ] = 170;
        $atts[ 'crop' ] = true;
    }
    return $atts;
}

[Max]

3. + 6.) I had to give more importance to some more variables but now everything gets displayed correctly. The same goes for the “loading more” button – I added the `!important” command to the background colour etc. and now the button remains more or less the way I want it to.

Thank you for providing the solutions to my detailed requests!

[David]

Glad to be of help

[Max]

Unfortunately I had to reopen to post again because I discovered that the whole design basically breaks into smithereens once I reach the mobile breakpoint.

Basically there are two issues on mobile (tag/author archives – list view):

1.) The featured image of the posts gets aligned to the center.
2.) The excerpt stretches across the entire page.

1.) Is there a way to let the featured image be aligned to the left on mobile as well?
2.) Can the excerpt be kept in check, e.g. defining the maximum width the text is allowed to stretch across the page? Letting it align to the left does not seem to be enough.

I would rather have everything be displayed in a tidy manner on the left side than let the different elements fly around.

3.) An additional problem appears on the author archive page: Once I switch to mobile view (mobile phone so smaller than tablet) in the customizer/browser, the author name gets either split in two – meaning the first name stays next to the author picture, the last name gets moved below the picture – or the name stays next to the picture but breaks over four lines depending on the browser (apparently). I looked around but did not find any solution to this. Do you have an idea how to move the complete author name below the picture on mobile phone view only as in:

Author picture
First Name
Last Name
?

One break happens around 974px although I could live with that one. A more crucial one would be at around 789px (in Firefox).

[Tom]

Hi there,

1 + 2 + 3: Try this CSS:

@media (max-width: 768px) {
    body:not(.post-image-aligned-center) .inside-article .post-image {
        margin-right: 1.5em;
        margin-left: 0;
        float: left;
        text-align: left;
        max-width: 150px;
    }

    .entry-summary {
        overflow: hidden;
    }

    .author .page-title .vcard {
        display: block;
    }

    .author .page-header .avatar {
        float: none;
        width: auto;
        height: auto;
    }
}

Let me know 🙂

[Max]

Hi Tom!

Thanks for the quick response.

3.) Solved!

1+2.) Only partially solved:

While the post display looks much better on tablet now due to the left-aligned featured image, the look has improved only partially on mobile (phone). I increased the max. width of the featured image to 200px which improves the look a bit.

Basically some posts get displayed in a tidy manner, as in:

featured image,
title,
meta data,
excerpt,
read more button,
categories

While others appear to be quite scrambled:
Featured image – next to it: everything else.
under the featured image: categories.

I think it is due to the post title: If the first word is long (e.g. “Standardbeitrag”) it automatically pulls the rest of the content below the featured image (at least in firefox). If the first word is short (e.g. “Yet”) everything gets pressed next to the featured image (on mobile phone). I used Firefox, Edge and Opera to test. In Opera + Edge only the second (scrambled/compressed) post display happens while in Firefox some posts get display neatly.
I know that GP has only one breakpoint for mobile but is it possible to distinguish between tablet and mobile phone when dispaying the post list on archive pages?

[Tom]

At this point, our only option is to use CSS I think.

What if we stacked everything on top of each other at a certain width where the floated image no longer works. Would that work for you?

Let me know 🙂

[Max]

I think that might be the best and easiest solution!
Basically I do not mind if it already happens at the mobile menu breakpoint.

So the post “heap” should look like this:

featured image,
title,
meta data,
excerpt,
read more button,
categories

Would it be possible to easily swap the position of the featured image for the one of the title + meta data, so it would look like this:

title,
meta data,
featured image,
excerpt,
read more button,
categories

?

[Tom]

Give this a shot:

@media (max-width: 700px) {
    .archive .inside-article {
        display: flex;
        flex-direction: column;
    }

    .archive .entry-header {
        order: -1;
        margin-bottom: 1.5em;
    }

    body:not(.post-image-aligned-center) .inside-article .post-image {
        margin-bottom: 0;
        margin-right: 0;
        max-width: 100%;
    }
}

[Author]

Posts