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!

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 2 years ago

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!

daftspunky said:

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!

Does this let you see properties of other plugins too, or is it dependent?! Big if true.

Edit: I just tried using this function and it keeps giving me a page error. Where exactly are you supposed to put the function?

Last updated 2 years ago

Coding Crafter said: Edit: I just tried using this function and it keeps giving me a page error. Where exactly are you supposed to put the function?

You'll probably need something more informational - see this plugin: https://octobercms.com/plugin/inetis-dump