So what I specifically would like to do, but cant seem to figure out, is call blogpost titles chronologically into a bootstrap4 slider possibly, or some sort of news grid layout. I understand that I can breakdown the blogposts component and get the codes from it, and I can move it all around and changes the specific codes within it to customize it, add css to change it a bit but, for some reason I can't properly put the titles into a slider or into a layout in the way I want. When I try it, it ends up some how infinitely repeating within itself - or until max posts are reached.

Here's the link - https://nationaldossier.com/dingdong

Here's my partial code- `` <style>

posts{

text-align:center; height:100%
}

posts ul li {

display:inline-block; box-sizing:border-box; font-size:12px; border-style:groove; border-width:5px; border-color:black; height:100%; width:100%; padding:10px; margin:10px; }

post-list{

-webkit-column-count: 2;
   -moz-column-count: 2;
        column-count: 2;
      }

post-list li { }

.h-entry{

} .featuredImage{ width:100px; height:100px; display:inline-block; } </style> <div id="posts"> <ul class="h-entry" id="post-list" itemscope itemtype="http://nationaldossier.com/blog"> {% for post in posts %}

  <li itemprop="blogPost">
     {# NOTE THIS SECTION #}
     {% if post.featured_images.count %}
        <div id="post-list-featured-images-top">
           {% for image in post.featured_images|slice(0, 1) %}
              <a href="{{ image.path }}">
                 <img class="featuredImage" data-src="{{ image.filename }}"src="{{ image.path }}" alt="{{ image.description != null ? image.description : image.filename }}" title="{{ image.title != null ? image.title : post.title }}"></img>
              </a>

           {% endfor %}
        </div>
     {% endif %}

     <h3 class="post-list-title p-name" itemprop="headline">
        <a class="u-url" href="{{ post.url }}" itemprop="url">{{ post.title|slice(0,20) }}...</a>
     </h3>

<!--              <ul class="post-list-categories p-category"> -->
 <!--             {% for category in post.categories %} -->
 <!--                   <li> -->
  <!--                     <a href="{{ category.url }}">{{ category.name }}</a> -->
   <!--                 </li> -->
       <!--       {% endfor %} -->
       <!--    </ul> -->
     <div class="post-list-date">
    -&nbsp;<time class="dt-updated" datetime="{{ post.published_at|date('Y-m-d\TH:i:sP') }}" itemprop="dateModified">{{ post.published_at|date('M d, Y') }}</time>
     </div>
     <ul class="post-list-categories p-category"> 
     <p class="excerpt">{{ post.summary|slice(0,80)}}</p></ul>
  </li>

{% else %} <div class="no-post-message">{{ noPostsMessage }}</div> {% endfor %} </ul> </div> </code></pre> `

I copied some from a forum post and the rest is my sort of limited knowledge of coding. I'm really new to PHP so it's taking me time to learn how this all works.

Is there a way to call in the id's specifically so I can call specific post id's such as like 1, 2, 3 and it'll display newest post #1 in the position I call it to? Also, if you're viewing the page and it only shows 2 posts, I cant seem to get it to show more than that on any other browsers than my custom one im using right now lol. Why isnt it showing in chrome or firefox?

Last updated 3 years ago

I don't really understand what you're trying to do here, and your code is rather hard to read in this format...

This is what I mean. How do I achieve this using the blogPosts component provided via RainLab Blog plugin? I just want to pull the titles and author from it and apply it to various aspects of my page or possibly just use it in various partials. I'd like to do it by ID so like post #1 would be my latest blog post, I'm assuming each post has an ID and if not I could just assign IDs to each as they are created I guess. How would I go about making the post #1 block to contain the information for my latest blog post like title and author, and have the 2nd and 3rd block to have the info for the 2nd and 3rd latest posts? See what I mean?

Last updated 3 years ago

You don't need the blogPosts component, see example CMS page below:

url="post-test"
layout="default"
==
function onInit()
{
  $this['posts'] = \RainLab\Blog\Models\Post::isPublished()->orderBy('created_at', 'desc')->take(3)->get();
}
==
{% set p1 = posts[0] %}
{% set p2 = posts[1] %}
{% set p3 = posts[2] %}

{{ p1.title }}<br> 
{{ p2.title }}<br>
{{ p3.title }}<br>

Thank you! This was perfect!