[Resolved] Need help building a multi-column archive

[Author]

Posts

[tomG-8]

Hey, folks. I'm new to Toolset and am trying to do something that's probably quite simple: create an archive layout where fields for each item in the loop appear in columns.

Basically, exactly like the image illustrating https://toolset.com/documentation/user-guides/what-archives-are-and-why-they-are-so-important/ (also attached).

Is there a video, or could someone give me a step-by-step? Thanks!

[y.S]

This might help
https://toolset.com/documentation/user-guides/creating-wordpress-custom-post-archives/

[tomG-8]

Thanks for the response, y.S.. I'm afraid that link didn't help, because it doesn't include information about styling the output into columns.

I was able to make it work in a very basic way by doing the following:

• Create an archive layout
• Insert an archive cell
• In the Loop Output Editor's "Loop Wizard", add my fields (title, image, body)
• Edit the image field to set its Alignment to left (see attached screenshot)
• Finish the cell-editing process.

The results are as shown. I suppose I'll further refine it with CSS.

What I was really hoping for was a visual builder within an archive, so I could have more positioning control over the fields besides "left", and so building the loop contents would be easier for a non-coder like me. If this exists, please let me know! (I've left this issue open; if such a solution doesn't exist, feel free to close it.)

Thanks again!

[tomG-8]

Small followup. I've done a bit of CSS styling... and the attached screenshot shows one of the limitations of the method I described above. (Note how the "Date" field wraps badly when the body text is too long.) I suspect a bit of CSS/shortcode fiddling will help. Any suggestions?

Here's my code:

<h2>[wpv-post-link]</h2>
[types field='image' alt='%%ALT%%' title='%%TITLE%%' width='400' height='400' align='left' resize='proportional' separator=', '][/types][wpv-post-body view_template="None"]
<label>Client</label> [wpv-post-taxonomy type="client"]<br>
<label>Format</label> [wpv-post-taxonomy type="format"]<br>
<label>Date</label> [types field='dateofpublication' style='text' format='F, Y'][/types]

Thanks!

[Christian Cox]

Hi, you could use CSS on some wrapper div elements to define these columns in the Loop Output:

<h2>[wpv-post-link]</h2>
<div style="float:left; width:50%;">
[types field='image' alt='%%ALT%%' title='%%TITLE%%' width='400' height='400' align='left' resize='proportional' separator=', '][/types]
</div>
<div style="float:left; width:50%; padding-left: 10px;">
[wpv-post-body view_template="None"]
<label>Client</label> [wpv-post-taxonomy type="client"]<br>
<label>Format</label> [wpv-post-taxonomy type="format"]<br>
<label>Date</label> [types field='dateofpublication' style='text' format='F, Y'][/types]
</div>
<br style="clear:both;" />

If you're using Bootstrap in your theme, or if you have told Toolset to load Bootstrap in Toolset > Settings > General, then you can use the Bootstrap grid system:
hidden link

[tomG-8]

Many thanks, Christian! I'm not great at CSS -- that's a great idea. I'm sure I'll use it frequently from now on.

Pity there's not a cell-style builder for items inside loops. Hmm... *clickety-click*... there, just proposed it as a feature, at https://toolset.com/forums/topic/add-cell-style-visual-layout-engine-for-within-loops/ . 🙂