HTML theme to Textpattern

mari486 · 2019-11-04 16:44:57

Hi, I am wanting to port an HTML theme to Textpattern, but I had some problems.

The theme has the following structure:
Menu
Logo
Content
Footer

I was using the default theme to get my bearings and was completely confused… Is there any more “simplified” way to do this? I don’t intend to do anything sophisticated, just make the theme work.

Can someone help me?

WebmistressM · 2019-11-04 17:22:43

I think many of the Text Pattern themes are about taking simple html layouts and putting them into a framework’s theme or template system. I see you listed the kind of structure your HTML layout has, but I guess Im not quite sure what the problem is that you are describing. Sounds like your layout isnt off the beaten path, with your standard footer and a header (which can hold both the logo and the menu in many cases).

I thought there was a tutorial online that might get into the specifics, but Im having a hard time finding it just now. :/

mari486 wrote #319921:

Hi, I am wanting to port an HTML theme to Textpattern, but I had some problems.

The theme has the following structure:
Menu
Logo
Content
Footer

I was using the default theme to get my bearings and was completely confused… Is there any more “simplified” way to do this? I don’t intend to do anything sophisticated, just make the theme work.

Can someone help me?

colak · 2019-11-04 17:27:50

Hi Mari,

and welcome to txp. Can we have some more details? ie, do you have the html theme somewhere that we can view it in order to advice properly?

Your menu. Would that be sections, categories?

Your content. Would that be an article list in section landing pages and individual articles from there on?

Do check out the txp tags as, once you familiarise yourself with them, it’ll be a breeze.

jakob · 2019-11-04 22:49:24

colak wrote #319923:

Can we have some more details? ie, do you have the html theme somewhere that we can view it in order to advice properly?

Yes, that would make more specific advice possible.

mari486 wrote #319921:

I was using the default theme to get my bearings and was completely confused…

You can see the default theme here.

Probably the easiest way to get started is to create yourself a new theme – or if you want to base yours on the default template, duplicate the default theme – in the Presentation › Themes tab. Creating a new theme will make you the bare minimum ready for you to put your own code into.

The basic theming concept is split into:

Pages: Page templates. default is the standard template, error_default the standard error page template. Typically you would create different page templates for distinctly different page layouts.
Forms: Forms are chunks of your html source that you re-use (such as headers, footers, menus, sidebars) or that recur multiple times on a page, such as blog posts and blog post list excerpts. They’re subdivided into article, comment, file, link (for use with the relevant article, comment, file, and link tags) as well as misc for general purpose forms.

In the default theme misc forms, you’ll find body_header, body_footer, and body_aside (the sidebar) which each include the relevant part of the page and will correspond roughly to your header/menu, footer etc. in your template.

You can see how those forms are inserted at the relevant points in the main default page template, e.g. the body_header, the body_footer and body_aside. You can name all these forms how you like. The default theme just uses sensible names.

The forms for articles and posts are called using txp:article and if you don’t specify your own form names, it uses default for the main article display and article_listing for the list of post excerpts – that may be what had you confused: if you look at the docs (linked at the beginning of this paragraph), you’ll find them specified as the default for the form and listform attributes. They are called with this one tag here in the main default page template. If you look at each of those linked templates, you begin to see how they show a chunk of the page’s HTML replacing things like the article title with a txp:title tag, the article post content with txp:body, … and so on. These placeholders – and many more (see the article tags docs) – bring in the content you have entered in the admin area.

The txp:article tag is very powerful and will automatically respond to the current url, e.g. show a list on a section landing page, show the full article on the individual article page, filter by author or by category if they are part of the url, and so on.

This is just an introduction to help you better find your way around the default template so that you can carry over those principles to your own theme. The default theme is well structured so it is worth looking at how it fits together and solves the various display situations. It is also commented to help you follow how it works. I hope the links above help you understand how it’s put together.

mari486 · 2019-11-05 18:00:09

Hi guys, thank you for answer me.

This is the theme I want to make it work (https://templatemo.com/tm-084-design-blog
), the menu already works, but much remains to be done.

As you can see from the screenshot, I want to get closer to functions, as shown in the theme.

I want to fit the content generated by Textpattern inside each HTML element of the theme. With the tags I able to put the menu, replacing the sample content, I have to do the rest and Basic Tutorial helped me a lot in this beginning.

jakob · 2019-11-05 21:42:10

Thanks for showing us what you had in mind. The template is pretty ancient, so you might want to bring it into the HTML5 age. It also shows only one view of the page, so you’ll have some extra work to do for the other sections, but otherwise it is fairly straightforward.

For the menu:

Create your sections under the Presentation › Sections tab. In their example they have Gallery, Tutorials, Freebies, About us, Contact us. The name is what appears in the address bar, the title is how you want it to display on your page.
Use txp:section_list with the attributes include_default="1" and default_title="Home" to include the “Home” link. Take a look at the other attributes in the docs, e.g. wraptag="ul" break="li" and active_class to make it automatically respond to the section you are on.

For the left-hand column_one:

The list of categories you can create with txp:category_list. As with the menu, you need to create your article categories first.
For the archive view, you’ll want to run through all articles in your “articles” section (change this as required) by date, but only create a link to the by-month view when the month changes. For that you use the article_custom tag together with if_different:

<txp:article_custom limit="9999" section="articles">
    <txp:if_different>
        <a href href="<txp:site_url /><txp:posted format="%Y-%m" />">
            <txp:posted format="%Y %B" />
        </a>
    </txp:if_different>
</txp:article_custom>

(replacing “articles” with whatever section you are using)

For popular posts, it depends what “popular means”. If you just want to see the most recent articles, you can use txp:recent_articles. If you want to feature special posts, you could set them to a category such as “featured” and then list all articles (article_custom again here) filtered by category="featured".
For the “Cool Links” you can use txp:linklist just like in the default template

For the main column column_two:

As this column will respond to the current url of the page, e.g. to the date filter, articles by category or by author filter that might be linked to from the archive or category links in the left-hand column, you need to use the txp:article tag as this (unlike article_custom) is context-sensitive and will automatically filter for you depending on what is in the url. The great thing is, this takes out all the hard work for you deciding how to deal with each of these different views.

Your code in your page template can be as simple as:

<txp:article limit="5" />

(replacing “5” with however many articles you wish to list)

The txp:article tag uses the article forms “default” for the full article and “article_listing” for the short view, shown here in your template. You can use the whole range of article tags to display individual bits of information about your article.

In your template, your article_listing form could look like this:

<div class="column_two_section">
	<h1><txp:permlink><txp:title /></txp:permlink></h1>
    <div class="post_info">
    	Posted by <txp:author link="1" />, <txp:posted />, in <txp:category1 link="1" />
    </div>
    <txp:article_image thumbnail="1" />
    <txp:excerpt />
    <div class="post_comment">
        <a href="<txp:permlink />#comments"><span class="comment"><txp:comments_count /> comments</span></a>
    </div>        
</div>

To make different headings depending on author, category, date etc. and to add pagination at the bottom of the list, see how it’s done in the default theme.

For the right-hand column_three:

For the images (let’s say they’re simple images rather than linked ads):
- First create yourself an image category (in Content › Categories under the images heading) called featured_images.
- Upload some images in the desired size. You can generate thumbnail versions at the size you need, including cropping to square dimensions. Assign them to the featured_images category.
- In your page template use txp:images with the attribute category="featured_images" and txp:thumbnail to show four images, e.g.

<txp:images limit="4" category="featured_images" break="div">
    <txp:thumbnail />
</txp:images>

See the image tags if you need more control over the output.

Popular posts is as with column one, except that it includes more detail. use txp:author to display the post author, txp:posted to show the post date, txp:comments_count to show the number of comments, txp:title for the post title, txp_permlink for the link to the article.

For “About this Blog”, you want to bring in details from just one specific article. For this you use txp:article_custom (because this is a custom case again) together with the id="{id-number}" attribute and txp:excerpt to show just the short text for that article.
- First create your About article. Write your shorter page summary in the excerpt box of that article. When you save it make a note of the article ID#.
- In you page template do:

<txp:article_custom id="1" wraptag="div" class="column_three_section">
    <txp:title wraptag="h1" />
    <txp:excerpt />
    <txp:permlink>read more</txp:permlink>
</txp:article_custom>

(replacing “1” with the article ID# you noted earlier).

A note about when to use txp:article and when to use txp:article_custom:

txp:article: In the above you’ll see there are parts of the pages that will displays differently depending on whether your showing a list view of all articles, a list view of articles in a particular category, from a particular month, by a particular author, or a list of search results. The txp:article tag responds automatically to these situations, including pagination of past articles.
txp:article_custom: Other parts of the page will not change when the url changes, for example, your featured posts, or recent articles or your about page article intro. This is when you use article_custom. It offers a very high degree of flexibility but disregards the url in the address bar and therefore doesn’t come with in-built pagination. You can make it more responsive using tags-in-tags if you need to.

— — —

That should give you some pointers of how to approach your page template.

One final note: if you decide you want to handle the individual parts of the page separately, create an individual “misc”-type form for each part and then use:

<txp:output_form form="your_form_name" />

to output it where you want it in your page template.

Textpattern CMS

Textpattern CMS support forum

#1 2019-11-04 16:44:57