Author/Artist Request | What I'd Like In A Textpattern Training Course

John-Paul F · 2021-03-26 11:50:25

Pete asked, in a different thread, what somebody in my demographic might want from a Textpattern course.

My demographic

A writer and illustrator
Longstanding Txp user
Have set up simple Wordpress sites for self and others
Would like to import some of the WP functionality to my Txp site

So, not totally ignorant. But not confident either, far from expert, in fact I find the very sight of GitHub intimidating.

What I’d like

A friend asked me to set up a very simple site for him (prototype using Wordpress here). It’s so utterly simple, I wish I could have done it in Txp. I have no idea how to make a hero page, or to put a background image on every other page.
Having moved from only writing to making (and selling) art, I’d like to create a gallery. I hate that the only way I can do that is on Instagram. I’m doing a series of drawings (28 so far) that I’d like to feature on my website.
If I knew how to do 1. and 2. I’d be extremely chuffed.
More to the point, I’d be able to help other writer / artist friends set up simple sites. Most are so afraid of the process they will never start.

IDEA: I’d like to pay somebody to show me how to do it, working together on eg Zoom, and record what I’m doing on screen capture.

Bloke · 2021-03-26 12:47:52

This is fab stuff, thank you.

Sometimes we get so embroiled in giving people specific solutions to specific problems we forget the simple stuff like how to add images to pages.

The problem we have – although ‘problem’ is perhaps harsh – is that you really do have complete freedom to set up a template however you want to suit the site in question. And we have a dearth of ready-to-go templates right now (that will change).

So if we give a 1-2-3 instruction on how to do something, it might only be applicable to a small subset of people who have set up their templates in a particular way. The background image example is a prime candidate:

You could add a class to each page template and use CSS to load a different background image per section you visit.
You could set up a custom field that could hold the name of an image to use as a background. Your background could then change per article. And you could set up your template so if an article didn’t have a background given, it could use a default image.
You could use the Article Image field. Maybe list all the image IDs you want to use in the article, comma-separated (a plugin such as com_article_image helps to do it visually). Then in your template that renders articles, take the first image ID and use it as a background or hero/banner image, or image to use in the landing page teaser/excerpt (or all three!). And then use the remaining images via <txp:images offset="1"> (to skip the first image you’ve already used) and render a clickable gallery inside the article.
You could set up your template to read an article category. Set up a category hierarchy that indicated what ‘type’ of post it is within the section, or what colour scheme you’d like it to use and then choose one of those colour schemes for, say, category 1 in an article. Then in your template:

<txp:if_article_category name="lemon" number="1">
    <txp:image name="lemon-background" wraptag="div" class="banner" />
</txp:if_article_category>
<txp:if_article_category name="lime" number="1">
    <txp:image name="lime-background" wraptag="div" class="banner" />
</txp:if_article_category>
...

That could probably be simplified with some tag-in-tag goodness. I’ve used that approach to add alert banners to pages. If someone writes a Sticky article in a particular section and selects ‘warning’ as a category, they’ll get the text in the Sticky article’s body as a banner strip along the top of the page with an amber background. If they choose ‘critical’ from the category list, they get the banner message in red, and so on. Really handy for notifying people of status changes or updates, but could equally be used to add a particular banner image to a section.

That’s just four use cases. There are hundreds of different ways you could utilise the Textpattern fields and tags to do this, and I think that’s part of the learning hump.

With WordPress, if you want a banner on such-and-such a page, you drag it into the back-end widget that says “banner on this page” and you’re done. Do that for each article. If you want to change it later, go in and do each one by hand. If the theme author hasn’t given you that option, you’re out of luck and need to learn PHP or CSS.

With Textpattern there isn’t that visual immediacy. So if we can find ways to provide potted little tutorials such as Four ways to approach image banners in Textpattern that go into detail on the above ideas, maybe that could help demystify things a bit?

Last edited by Bloke (2021-03-26 12:50:05)

etc · 2021-03-26 14:05:09

Bloke wrote #329474:

The problem we have – although ‘problem’ is perhaps harsh – is that you really do have complete freedom to set up a template however you want to suit the site in question. And we have a dearth of ready-to-go templates right now (that will change).

I find that we lack a sweet but simple hello-world sample theme, that any newbie could grok and immediately see the effects of changes he makes. And I lack designer talents to do it myself.

Bloke · 2021-03-26 15:03:40

Agree.

Phil’s new theme is great for that, as you can turn on/off things and tweak stuff and it all cascades through. Have you played with it?

etc · 2021-03-26 15:31:57

Do you mean Hive? Yes, it’s great, but I haven’t tried to reduce it to a bare minimum. I’d like to see a page of a dozen of tags, without too many conditionals. It would be just a toy theme, not for real use, but easy to understand for a newcomer.

John-Paul F · 2021-03-26 18:19:23

Bloke wrote #329474:

This is fab stuff, thank you.

You are welcome. I’m glad it’s not a pain, and thank you for taking so much trouble replying.

Bloke wrote #329474:

2. You could set up a custom field that could hold the name of an image to use as a background. Your background could then change per article. And you could set up your template so if an article didn’t have a background given, it could use a default image.

I tried doing your fourth suggestion, and managed to create a banner with the image I wanted, but what I really wanted was to make that image cover everything, with only a menu on top.

So I’m keen to try this second suggestion instead. Can you give me a clue what needs adding to the template to create a default image (I’d like the same image on every page anyway, for my friend’s site)?

As ever, if you don’t have time to reply, I’ll completely understand.

jakob · 2021-03-26 19:13:38

John-Paul F wrote #329479:

what I really wanted was to make that image cover everything, with only a menu on top.

You could use one of the techniques described on this page on css-tricks to create a background image that covers the entire page but lies beneath the page content.

For example, in your page template (Presentation › Page), you could add the current article id or the current section as a class to page’s body class, e.g.

<txp:if_article_list>
    <!-- this is a section landing page -->
    <body class="bg-image section-<txp:section />">
<txp:else />
    <!-- this is an article page -->
    <body class="bg-image article-<txp:article_id />">
</txp:if_article_list>

In your css (e.g. in the file you call or under Presentation › Styles):

.bg-image { 
  background: url(/images/default-bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Change the address to match the name – or number – of the background cover image you’d like to use. This will show if you don’t provide details for another image you’d like to use.

(This is the Awesome Easy Progressive CSS3 way in the css-tricks article.)

To change the image for an article, it’s straightforward. Go back to your page template and towards the end of the <head>…<head> block, add the following:

<txp:article limit="1">
<txp:if_article_image>
    <style>.article-<txp:article_id /> { background-image: url("<txp:images limit="1"><txp:image_url /></txp:images>"); }</style>
</txp:if_article_image>
</txp:article>

When you add the ID# of the image you want to use for an article to the article_image it will use that image for the page background.

For the section background you could name your background image the same as your section name:

In Content › Images, add the image you want to use, and edit its name so that it is called sectionbg-people.jpg or sectionbg-recently-published.jpg etc. The people or recently-published must match the section’s name.
You can then use that name with txp:images, again in the <head>…</head> block:

<txp:if_article_list>
    <style>.section-<txp:section /> { background-image: url("<txp:images name='sectionbg-<txp:section />.jpg'><txp:image_url /></txp:images>"); }</style>
</txp:if_article_list>

Note that in this case the @name@ attribute uses single quotes which means _process the contents and use as the attribute_.

Putting that all together, you get:

<head>
    …
<txp:if_article_list>
    <style>.section-<txp:section /> { background-image: url("<txp:images name='sectionbg-<txp:section />.jpg'><txp:image_url /></txp:images>"); }</style>
<txp:else />
    <txp:article limit="1">
    <txp:if_article_image>
        <style>.article-<txp:article_id /> { background-image: url("<txp:images limit="1"><txp:image_url /></txp:images>"); }</style>
    </txp:if_article_image>
    </txp:article>
</txp:if_article_list>
</head>
<txp:if_article_list>
    <body class="bg-image section-<txp:section />">
<txp:else />
    <body class="bg-image article-<txp:article_id />">
</txp:if_article_list>
…

To summarise:

You add a class to the body tag that shows the current section on a section landing page or the current article-id number on a regular article page.
You define the basic background image display settings and the default image to use in your css
If you provide an image and name it so that part of it matches your section’s name, you can override the background image on a per-section basis.
If you provide an article image for your article, you can override the background image on a per-article basis.

EDIT: corrected a tag error. My apologies.

John-Paul F · 2021-03-26 20:38:08

Wow.
I’m really stunned by the all this help I’m getting.
Thank you Jakob. I’ll give this a try.

Bloke · 2021-03-26 21:08:52

Logged in to add some detail to help out… and found jakob has gone waaaaaay above the call of duty with a fantastic explanation. Fabulous stuff, wow.

This is the sort of thing we need to add as mini-tutorials in the documentation somewhere, or in txptips or, heck, okay I started a GitHub issue on the docs repo to see if this is viable there. We can always close it if this content is better suited elsewhere. But we do need to collate this stuff somewhere so it’s not buried forever in the forum.

Please, anyone, add a comment to that thread with a link back to forum topics that contain nuggets of gold we could fashion into some training materials aimed at newcomers. Thank you!

Last edited by Bloke (2021-03-26 21:11:04)

bici · 2021-03-26 23:11:24

etc wrote #329475:

I find that we lack a sweet but simple hello-world sample theme, that any newbie could grok and immediately see the effects of changes he makes. And I lack designer talents to do it myself.

The best Textpattern tutorial that i had found that laid everything out was one by Marie Poulin so long ago, which is now only available in the way back machine.

I don’t have the chops to bring this one up to date, with perhaps cooler css and make it mobile friendly… but would be a godsend for newbies.

And i don’t mean a THEME but a tutorial to craft your own Website, customizing the default installation much as Marie laid out.

It had all the downloads etc.

Last edited by bici (2021-03-26 23:12:09)

jakob · 2021-03-27 10:29:10

bici wrote #329492:

The best Textpattern tutorial that i had found that laid everything out was one by Marie Poulin so long ago, which is now only available in the way back machine.

I don’t have the chops to bring this one up to date, with perhaps cooler css and make it mobile friendly… but would be a godsend for newbies.

I updated Marie Poulin’s tutorial and theme files last year. See this post for the download link and screenshots :-)

It is still rather basic, though.

etc · 2021-03-27 11:39:34

bici wrote #329492:

And i don’t mean a THEME but a tutorial to craft your own Website, customizing the default installation much as Marie laid out.

jakob wrote #329500:

I updated Marie Poulin’s tutorial and theme files last year. See this post for the download link and screenshots :-)

It is still rather basic, though.

Thank you! It’s close to what I mean, but still too complex for a complete newcomer, imo. I’d like to see a theme that just illustrates the roles of page, form, style, etc, without any ‘real site’ stuff (SEO, portfolio and so on). A bare minimum, but not too ugly :-)

Textpattern CMS

Textpattern CMS support forum

#1 2021-03-26 11:50:25