Pod Template Formatting

  • Resolved Maxwell

    (@nimblearchi)


    6 years, 4 months ago

    Hi! I am loving Pods & I’d like some guidance on formatting a template. I am wanting to list (and eventually sort by criteria) People onto a page. Currently, I’m unable to use my People Template Pods shortcode without this sort of wacky markup to separate the fields and to separate the pods. Here is my template:

    {@image}<br><br><br><br><br><br><br><br><br><br><br>
{@name-and-position}<br>
{@departments}<br>
{@organizations}<br>
<a href="{@faculty_page}" target="_blank">Faculty Page</a><br><br><br>

    Thank you.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor Jim True

    (@jimtrue)

    You’d want to wrap that with some HTML. If you think of the Pods Templates as very much ‘mail merge’ templates, they are intended to be output for each ‘loop’ through the content. Typically when you’re doing a ‘list’ of people on a page, you want to output those people in an un-ordered list that you can define by an ID or a Class and then style the list anyway you’d like.

    
[before]<ul class="people-list">[/before]
<li><img class="people-image" src="{@image._src}" />
<div>{@name-and-position</div>
[if departments]<div><strong>Departments:</strong> {@departments}</div>[/if]
[if organizations]<div><strong>Organizations:</strong> {@organizations</div>[/if]
<div><a href="{@faculty_page,esc_url}" target="_blank">Faculty Page</a></div>
</li>
[after]</ul>[/after]

    I hate to tell you, but that’s not wacky markup; that’s HTML and CSS and that’s the web ?? If you’re very uncomfortable with this kinda stuff, you can look at Beaver Builder & Beaver Themer and Elementor and Elementor Pro which allow you to pull in more dynamic content in a ‘builder’ experience, but the above stuff is just basic HTML. CSS can be applied to that HTML very semantically to identify the list items in your people-list un-ordered list and pretty much style this anyway you want.

    You can check out this video as well, to help with understanding how this all works together:

    • This reply was modified 6 years, 4 months ago by Jim True. Reason: left off a closing div
    Thread Starter Maxwell

    (@nimblearchi)

    Hi Jim! Thanks so much for the fast response. That is very helpful. ??

    I am watching the video you linked now.

    Cheers!

    • This reply was modified 6 years, 4 months ago by Maxwell. Reason: Please ignore my original reply; it worked! I must've done something wrong originally
    Plugin Contributor Jim True

    (@jimtrue)

    Good luck ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Pod Template Formatting’ is closed to new replies.

Tags