Textpattern CMS

#1 2017-01-17 01:02:52

jaser

Member

Registered: 2016-05-28

Posts: 17

Masonry

Is it possible to have main front end layout in the masonry style?
Has anyone worked out how to impliment it.
Any help would be most appreciated.
http://masonry.desandro.com

Last edited by jaser (2017-01-17 02:11:05)

#2 2017-01-17 06:13:57

colak

Admin

From: Cyprus

Registered: 2004-11-20

Posts: 9,011

Website GitHub Mastodon Twitter

Re: Masonry

Hi jaser

It looks like it is very possible to create a front end with masonry. The html looks very simple.

Could you tell us more about the type of content you want? I guess that it will it be images right?

---

Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

#3 2017-01-17 08:33:54

NicolasGraph

Plugin Author

From: France

Registered: 2008-07-24

Posts: 860

Website

Re: Masonry

As colak said, it is easy to do as far as you know HTML+CSS and a bit of js (maybe optional); I did it in the past. Masonry don’t care about your CMS… You could just follow this example and replace the HTML code by the right Txp tags.

Masonry HTML example:

<div class="grid">
    <div class="grid-item">...</div>
    <div class="grid-item grid-item--width2">...</div>
    <div class="grid-item">...</div>
    ...
</div>

Textpattern example with articles:

In your page (default as far as it’s for your home page):

<txp:article form="masonry" wraptag="div" class="grid" />

In your masonry article form (a custom field is used here to conditionate the width):

<txp:if_custom_field name="width">
    <div class='grid-item grid-item--width<txp:custom_field name="width" />'>
<txp:else />
    <div class="grid-item">
</txp:if_custom_field>
    <txp:title />
    <txp:excerpt />
    …
</div>

Edit: It is a basic example and you should use semantic markup and custom classes.

Last edited by NicolasGraph (2017-01-17 08:36:34)

---

Nicolas
Follow me on Twitter and GitHub!
Multiple edits are usually to correct my frenglish…

#4 2017-01-17 12:04:09

jstubbs

Moderator

From: Hong Kong

Registered: 2004-12-13

Posts: 2,395

Website

Re: Masonry

You can also see an example of a combination of Masonry, Flickr images and Foundation here.

---

Textpattern Tips

#5 2017-01-17 14:01:37

jaser

Member

Registered: 2016-05-28

Posts: 17

Re: Masonry

Thanks people. I got the standard html implementation working ok.
I have even width columns 4 @ 25%. On the front page. It continues throughout the site with one column at 25% page width
Think, I understand the variable width field for the mixing of column widths.

But if I want masonry columns on the first/front page & standard width article pages?
Am I missing something obvious?

Last edited by jaser (2017-01-17 16:27:23)

#6 2017-01-17 20:00:13

uli

Moderator

From: Cologne

Registered: 2006-08-15

Posts: 4,304

Re: Masonry

jaser wrote #303604:

But if I want masonry columns on the first/front page & standard width article pages?

Are you looking for something like the if_individual_article tag?

---

_{In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links}