Display Realtime Collection as Bocks

This shortcode will help to retrieve a whole collection data from Realtime database and display it as blocks on your page or post.

Remember to set the security rule for your database, so the right people can read your document.

// show realtime data basing on collection name as blocks

[realtime_blocks class='your-class-name' collection_name='blog' display_fields='title,description,more' images='url']

// In order to sort the data, you can add order_by, the order bases on orderByChild()

[realtime_blocks class='your-class-name' collection_name='blog' display_fields='title,description,more' images='url' order_by='title']

I suggest that you also add this shortcode to show any error when retriving data:

[firebase_error class='your-class-name'][/firebase_error]

It will get data from blog collection and display data basing on the display fields. You can style it by replacing your-class-name.

// This is structure, you can style the elements by using CSS
<div class="if-realtime-blocks">
	<div class="if-realtime-blocks__content 1">
		<div class="if-realtime-blocks__content__images">
			<img src="" alt="">
		</div>
		<div class="if-realtime-blocks__content__title">First title</div>
		<div class="if-realtime-blocks__content__description">This is a description</div>
		<div class="if-realtime-blocks__content__more">Read more</div>
	</div>
        // more items here
</div>

// Sample CSS
.if-realtime-blocks {
    display: grid;
    grid-template-areas: 'item item';
    grid-gap: 20px;
}