[Resolved] Featured post on every page of the blog

Home Forums Support [Resolved] Featured post on every page of the blog

Home Forums Support Featured post on every page of the blog

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1544578
    Sjoerd

    Hi,

    I am trying to have a first featured post on each page of the blog. The first page obviously it works great with the Customizer setting to “Make first post featured”, but when you navigate to page 2,3,4, etc, the first post is back to a normal sized post again.

    I understand the reasoning behind this, but I want to have a first “featured post” on each page of the blog for design reasons.

    Is there an add_filter() function that I can add as a snippet to get this to work?

    Thanks so much in advance!

    Cheers,
    Sjoerd

    #1544874
    Leo
    Staff
    Customer Support

    Hi there,

    So you are trying to make the first post of each page featured?

    There is no filter for this unfortunately – this is the first time it’s been requested.

    I can try some CSS solution if you can link me to the page in question?

    #1545100
    Sjoerd

    Hi Leo,

    Thanks for the response!

    I can’t point you to the actual site, but it’s basically the “Broadcast” Theme out of the box from Generatepress – https://gpsites.co/broadcast/

    So, if you open up the Broadcast theme, you can see the first post is featured and enlarged. If you go to the second page when NOT using infinite scroll you would go to https://gpsites.co/broadcast/page/2/

    That doesn’t work on this example, since it has infinite scroll turned ON, but if it’s paginated you would see that the first box on page 2 is now a smaller sized box.

    For this reason I thought it would be possible to work with an add_filter() since it’s an actual new pageload?

    Does that make sense? πŸ™‚

    Let me know your thoughts.

    Cheers,
    Sjoerd

    #1545142
    Sjoerd

    I’ve been messing around with some Javascript and came up with a pretty simple solution actually.

    var el = document.getElementsByTagName('article');
    el[0].className += ' grid-50';

    It selects all the <article> elements and appends the grid-50 class to the first element.

    That did the trick! πŸ™‚

    #1545154
    Sjoerd

    Like this it might even be neater… first removing the grid-25 class from the first <article> element and then adding the grid-50 class.

    var el = document.getElementsByTagName('article');
    	
    	el[0].classList.remove("grid-25");
    	el[0].classList.add("grid-50");

    Hope it helps someone else that has the same desire to make a certain element of the page featured.

    By changing the el[0] to another number, you can actually decide which one you want to enlarge or even enlarge multiple posts to featured sizes.

    #1545176
    Leo
    Staff
    Customer Support

    Thanks for sharing your solution!

    I believe this CSS would work as well:

    body.paged .site .generate-columns-container article:first-child.generate-columns.grid-25 {
        width: 50%;
    }
    #1545214
    Sjoerd

    Hi Leo,

    Yes! That works too and pure css! πŸ™‚

    It needs to be adjusted though to make sure it only adjusts for desktop.

    @media (min-width: 769px) {
    		body.paged .site .generate-columns-container article:first-child.generate-columns.grid-25 			{
        		width: 50%;
    			}
    	}

    This seems to do the trick! Thanks so much for the support πŸ™‚

    #1545289
    Leo
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.