dab69574
dab69574

Hi, I'm a newbie using Ocms 2.14, and I'm building my blog page at https://eaware.ca/blog.

In the left column, I want to make a list of just the blog post titles. I tried {{ post.title }} which doesn't work, and I suspect I'll have to iterate over the blogPosts collection and pull out just the titles. These will be links to anchors on the same page. I will put the list of blog titles in a sticky and scrollable div.

In the right column, I want to put the full blog post, not just the first 600 characters. I see this has been done in the Vanilla theme, so I know it's possible. The layout in the Vanilla theme is quite advanced, and poking around in there is putting me to sleep.

If anyone can point me in the right direction, I would greatly appreciate it!

dab69574
dab69574

No one is more surprised than me that I was able to achieve this on my own. In my left column, I simply put:

{% for post in posts %}
     <li class="nav-item"><a href="#{{ post.slug }}" class="nav-link">{{ post.title }}</a></li>
{% endfor %}

to create a vertical nav list. I got this from the blog component documentation. And for the right column, I swiped a partial from the Vanilla theme and pared it down a little:

{% set posts = blogPosts.posts %}
<div class="post-list">
    {% for post in posts %}
        <div class="media">
            <div class="media-body">
                <h4 class="media-heading" id="{{ post.slug }}">
                    <a href="{{ post.url }}">{{ post.title }}</a>
                </h4>
                <p class="info">
                    Posted
                    {% if post.categories.count %} in {% endif %}
                    {% for category in post.categories %}
                        <a href="{{ category.url }}">{{ category.name }}</a>{% if not loop.last %}, {% endif %}
                    {% endfor %}
                    on {{ post.published_at|date('M d, Y') }}
                </p>
                {% if post.excerpt %}
                    <p class="excerpt">{{ post.excerpt }}</p>
                {% else %}
                    <div class="content">{{ post.content_html|raw }}</div>
                {% endif %}
-------------------------------------------------------------------------------------------------<br />
            </div>
        </div>
</div>

I added a line of dashes to separate the posts visually. It works like a charm! Although I feel like an illiterate person copying and pasting words I don't understand, but I think I will soon.

What would really help me out is an object browser so I can see what properties and methods are available without a lot of guessing and researching. Is there an easy way to iterate over the contents of an object and display them on a test page?

Last updated

daftspunk
daftspunk

Hey dab,

Glad you got it sorted! You can use the twig dump() function to inspect properties on the page. For example:

{{ dump(post) }}

I hope this helps!

1-3 of 3