Struggling with Auto Templates

Hi @djnativus

Please view our introduction video!
https://docs.pods.io/videos/grow-beyond-posts-pages-introduction-pods-framework/

Cheers, Jory

Okay cool! That was super useful. I got everything working but my grid. The templates part confuses me because when I’m showing a bidirectional field, I’m not sure how to point to the field because sometimes I’ll have the same name in multiple fields.

So my site will be a list of circles (authors) and the books they published. I’m trying to list a thumbnail grid on each author page with the books they published. I have tried two different codes: one from pods.io docs and one I took from the theme for their main grid page here: https://kemolove.com/doujinshi/ [NSFW if you click read book]
And here is the author page for that book: https://kemolove.com/circles/anchabi/

So the auto template works for the name, members, and websites (I’m proud I got the image srcs working) but the grid isn’t working.
Code I took from theme (doujinshi page I linked to):

[if circle.books_published]
[each circle.books_published]
<li class="col-xs-12 col-sm-6 col-md-4 ">
<div class="list-item">
<a href="{@permalink}">
<img width="350" height="500" src="{@post_thumbnail.thumbnail}" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" loading="lazy" /> </a>
<div class="list-item-info">
<h2 class="list-item-head">{@post_title}</h2>
<h3 class="list-item-sub">{@circle}</h3>
<p class="list-item-actions">
<a href="{@permalink}" class="action-btn view">Read now</a>
</p>
</div>
</div>
</li>
[/each]
[/if]

And the one from the docs site:

<div style="float: left; margin: 10px 10px 0 0; display: block;">
    {@circle.published_works.post_thumbnail.thumbnail}
    <div style="display: block;"><h3>{@circle.published_works.post_title}<br /><span style="font-size: .65em; font-style: italic;">{@circle.published_works.circle}</span></h3></div>
</div>

• This reply was modified 3 years, 6 months ago by djnativus.

Hi @djnativus

This grid is depending on your theme whether it’s going to work or not. This is a Bootstrap grid and your theme supports Bootstrap so that should be ok.
However, outside of your each loop you don’t include a row (<ul>) so that is probably the reason the grid itself isn’t working.
However, all of this is actually outside of Pods support as this is about general CSS and grids.

Cheers, Jory

• This reply was modified 3 years, 6 months ago by Jory Hogeveen.

Darnit. Do you know who could help me then? I thought ul tags were for lists. I tried modifying it and still see no results:

[if circle.books_published]
[each circle.books_published]
<div class="row">
<ol class="listing group ">
<li class="col-xs-12 col-sm-6 col-md-4 ">
<div class="list-item">
<a href="{@permalink}">
<img width="350" height="500" src="{@post_thumbnail.thumbnail}" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" loading="lazy" /> </a>
<div class="list-item-info">
<h2 class="list-item-head">{@post_title}</h2>
<h3 class="list-item-sub">{@circle}</h3>
<p class="list-item-actions">
<a href="{@permalink}" class="action-btn view">Read now</a>
</p>
</div>
</div>
</li>
</ol>
</div>
</div>
[/each]
[/if]

Maybe I should check out Toolkit. Maybe this is too advanced for me. Thanks though!

Hi @djnativus

Your format would be something like this:

[if circle.books_published]
<ul>
[each circle.books_published]
<li></li> // YOUR ELEMENT GRID CONTENT!
[/each]
</ul>
[/if]

Cheers, Jory