We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Questions about {{#each}} with posts & featuredPosts

July 15, 2020 at 10:07 am #3244

[anonymous]

Hi! I’m creating an header that show only the 3 latest featured posts but I have some problem.

That’s the template: https://postimg.cc/N5yTKFT4

The big image is the latest featured post and the other two are the 2° and the 3° latest featured posts. How can I recreate that with {{#each featuredPosts}} ?

As you can see the big and the small sections have different css, but how can I tell to Publii to show the latest as big and the other two as small?

July 16, 2020 at 5:51 am #3248
Bob
You can do this by checking the order of the posts and applying the correct image size:
```
{{#if featuredPosts}}
    <ol class="container">
        {{#each featuredPosts}}
            <li>
                {{#featuredImage}}
                    {{#if url}}
                        <img
                            {{#checkIf @index '==' 0}}
                               src="{{urlLg}}"
                            {{else}}
                               src="{{urlXs}}"
                            {{/checkIf}}
                            {{#if @config.site.responsiveImages}}
                               {{responsiveImageAttributes 'featuredImage' srcset.listing sizes.listing}}
                            {{/if}}
                            {{ lazyload "lazy" }}
                            height="{{height}}"
                            width="{{width}}"
                            alt="{{alt}}">
                    {{/if}}
                {{/featuredImage}}
            </li>
        {{/each}}
    </ol>
{{/if}}
```
More about the image settings: https://getpublii.com/dev/how-images-work-in-publii/#advanced
July 20, 2020 at 5:28 pm #3266

[anonymous]

Thank you Bob! I’m trying to create an internal search bar without google custom search. I did it creating a js function that filter an {{#each posts}} list but I have a problem. The {{#each posts}} work perfectly in the homepage but it wont work in other pages. There is a way to create a list of each post in a different page ( such as a blog post ) ?

December 9, 2020 at 3:04 pm #4755
[anonymous]
Hi,

I use Technews theme and I want to change the front-page with only the Featured Posts,

So, I have change to index.hbs on line 17 “posts” by featuredPosts.
```
{{!-- {{#each posts}} --}}
{{#each featuredPosts}}
```
This solution work good but only for 5 elements.

I don’t now why but only the 5 last feature posts appears.

PS : This is my first post on this forum but I mean the Publii solution is awesome! I wish this solution a great future!

Thank you !
December 9, 2020 at 3:12 pm #4756
Bob
By default Publii generates five featured posts only, to change it go to the config.json ‎⁨file (Documents ▸ ⁨Publii⁩ ▸ ⁨sites⁩ ▸ ⁨YOUR_SITE ▸ ⁨input⁩ ▸ ⁨themes⁩ ▸ ⁨YOUR_THEME) and edit/add the featuredPostsNumber renderer option; more details: https://getpublii.com/dev/how-to-configure-rendering-process-of-your-website/#default-values-for-the-renderer-options.

You can also create a theme option to provide the ability to set the number of featured posts in the theme settings:
```
{
   "name": "featuredPostsNumber",
   "label": "Featured posts",
   "group": "Layout",
   "note": "Specify number of featured posts to show.",
   "value": "5",
   "type": "text"
},
```
PS: To preserve the custom code changed from being overwritten the next time your theme is updated, please make sure you have created override files, which are essentially copies of the existing theme files and are stored separately → https://getpublii.com/dev/theme-overrides/
December 9, 2020 at 3:20 pm #4757

[anonymous]

oh my god i looked at this link but hadn’t seen this in the available options.
I did not take a good look at the “code” part on the page and the rendered options.
I’ll take a look at “Theme overrides”
I apologize for the inconvenience but above all, thank you for such a quick response!