Custom Blog Feed

Blog

Create your own custom blog feed

Play with the example below to see what you can do:

Open this example as a template so you can see how everything works in the Editor. 

What We Built

In this example we showcased the most recent featured post in a strip, and displayed several recent posts in a repeater with custom hover effects.

How We Built It

Collections

For this example we used the database collections automatically added to your site if you have a blog:

 

Page Elements

In our site we added the following page elements:

  • Strip: Displays details of the most recent featured post. Contains the following elements:

    • Strip background image, title text, and description text

    • Read more button

  • Repeater: Displays details of the 4 most recent blog posts. Each repeater item contains the following elements:

    • Text to display the post category

    • Post image

    • Post title text

    • Post title text of a different color revealed on hover

    • A box with a faded color that is hidden on load and only displayed on hover

    • Full-sized transparent button for interacting with the repeater item

  • Datasets: Three datasets to connect the page elements with data in the blog collections

Data

We used the following datasets to connect data in our blog collections to page elements:

  • Featured Posts dataset: 

    • Connected to the Blog/Posts collection

    • Displays the latest featured post data in the strip elements

    • Connects the Read More button to the corresponding post page URL

    • We set the Number of items to display as 1 since we only need to retrieve 1 item to display

    • We sorted the items from new to old so the latest post is displayed

    • We set a filter to only load an item if the post is Featured in the blog 

  • Blog/Posts dataset: 

    • Connected to the Blog/Posts collection

    • Displays data for the 4 most recent blog posts in the repeater

    • Connects the transparent button click action to the corresponding post page URL

    • We set the Number of items to display as 4 so only 4 posts are displayed

    • We added a filter that excludes the current item in the Featured Posts dataset so that the post in the strip doesn’t also appear in the repeater

    • We sorted the items from new to old so the latest posts are displayed

    • We added a filter that excludes the current item in the Featured Posts dataset so that the post in the strip doesn’t also appear in the repeater

  • Blog/Categories dataset: 

    • Connected to the Blog/Categories collection

    • Displays the category for each post in a text element in the repeater

    • We set the Number of items to display as 4 so only 4 categories are displayed

    • We got the category that matches the current post by filtering the dataset by the Blog/Posts dataset 

Code

  • We added an onItemReady event handler that runs when new items in the Blog/Posts dataset are ready to be loaded into the repeater.  

  • We added hover effects: When a site visitor hovers over a transparent repeater button, the box with the border is displayed. In addition, the regular text is hidden, causing the hover text of a different color to show. When the mouse moves away from the button, the box is hidden and the regular text is displayed again.

Example Code

arrow&v

Example Demonstrates

Database Collections

Dataset

To start using Corvid:  Go to the Wix Editor > Dev Mode > Turn on Dev Mode