Integrate Textpattern into existing HTML website

losse · 2019-07-23 18:51:50

Hi there
I have an HTML website and I’m looking to integrate a blog and blog writing solution to it. I find WordPress too bloated for what I’m looking to do as I only need to write blogs.

Wondering if this can plugin to an existing HTML site and have the blogs create match the style/css of the html site?

Thx

jakob · 2019-07-23 20:36:37

Hi losse and welcome!

Yes, you can do exactly that. Textpattern’s templates are essentially just HTML code broken down into its constituent parts. You insert textpattern tag’s to place content you manage via the CMS into your own code, so if you already have your own site already coded and ready, it’s simply a matter of starting with your code and working out which parts you wish to manage via the CMS.

You can, for example, leave your static (i.e. unchanging) .html pages as they are and just use textpattern for your blog section. Or you can manage your static information pages using Textpattern too (if you don’t have many static pages, that’s probably easier).

A typical process might be to break down your code into header, footer, navigation and content blocks. In the content block, textpattern either shows an individual blog article or a list of repeating article excerpts.
You can see this principle in the standard theme which you can see in the demo. The corresponding template code for that is here. The pages folder shows the general html code for the entire page, the forms/misc folder shows the header, footer and sidebar blocks and the forms/article folder shows the code for the individual article (default) and article list items. The standard theme is annotated to help you, but you can create your own or adapt it to pretty much exactly match your own code.

losse · 2019-07-24 00:11:31

Thanks Jakob. I checked out the admin in the demo. Is there a WYSIWYG editor to insert things like video and images into blogs?

Also, when you publish, where does it go? Into a blog roll that I would code into my HTML site?

bici · 2019-07-24 00:12:57

“have the blogs create match the style/css of the html site?”

yes, you can use your own css/style and have it apply to your textpattern incorporated site. Simply use a common header to use your own css/styles and dont make use of the internal TXP css styles.

eg of using external css:

 <link rel='stylesheet' id='style-css'  href=./assets/style.css' type='text/css' media='all' />

 <link rel='stylesheet' id='responsive-css'  href='./assets/hueman/responsive.css' type='text/css' media='all' />

best way to learn is to install TxP and start modify the default site to use your own stuff!

colak · 2019-07-24 05:33:44

losse wrote #318836:

Thanks Jakob. I checked out the admin in the demo. Is there a WYSIWYG editor to insert things like video and images into blogs?

Also, when you publish, where does it go? Into a blog roll that I would code into my HTML site?

Hi and welcome to txp

We do not currently have a WYSIWYG editor but you will find textile very easy to master. Re videos, you can check out this plugin but you should also use oui_cookie in order to make it GDPR compliant.

losse · 2019-07-24 12:38:47

So how do you add lists and change text size or insert images? Does that need to be coded in?

Bloke · 2019-07-24 13:49:15

losse wrote #318848:

So how do you add lists and change text size or insert images? Does that need to be coded in?

Stuff you enter into the panels in the Content area of the administration can all be pulled out of there into Pages (main structure of one or web pages) utilising Forms (reusable snippets) and then styled using Stylesheets to govern font sizes and positions and whitespace etc.

So you:

Write your Page structure (HTML) for each Section of the site – and you can share the same Page over many Sections if they’re broadly similar to save yourself some work).
Put placeholders (Textpattern tags) where you want dynamic Content that you’ve entered/uploaded to appear.
Style it all using CSS and associate one or more stylesheets with your Sections so the page looks how you want it.

Themes take it a step further and bundle the above components, but you can worry about that later.

Step 2 is where the magic happens. Depending on the attributes you supply to the Textpattern tags and the current context (essentially the URL) determines how the content is injected into your placeholders. For example in your Page template (or a Form referenced inside it) this tag:

<txp:article form="my-articles" limit="10" />

will be replaced with Article content governed by the layout (HTML and Textpattern tags) in the my-articles Form. How it does that depends on the URL:

If your visitor is on a landing page (example.com/blog) then you are in list context.
If you are viewing an actual article (example.com/blog/how-to-use-textpattern) then you are in individual article context.

In your Form called my-article you could have:

<txp:if_article_list>
    <div class="entry">
      <txp:permlink><h2><txp:title /></h2></txp:permlink>
      <p class="thumb"><txp:thumbnail /></p>
      <p class="published">Published: <txp:posted /></p>
   </div>
<txp:else />
   <h1><txp:title /></h1>
   <div class="teaser"><txp:excerpt /></div>
   <txp:image />
   <txp:body />
</txp:if_article_list>

Thus, on a landing page the first chunk renders your list of articles (10 per page – governed by your limit attribute). When visitors click on one of the articles to visit its individual article page – the permlink tag wrapped around the title allows them to do this – the same code will run but in a different context, so it’ll use the else branch and display the title, excerpt, image and body instead.

Regarding images, you can associate them with an article by uploading them to the Content->Images panel, then list their IDs in the article image field. Somewhere in your Page template you can then put image placeholders (as above: the image and thumbnail tags) to display them around your other pieces of content.

Or, you can drop the image tags directly in your article body to scatter your pictures within the text. Or you can get clever and offload the actual image layout to shortcodes (essentially to build your own tags) and use those inline instead, which is more future proof.

You’ll find with Textpattern that there are often many ways to achieve something, and as you become more familiar with it you’ll find more efficient ways to display content in reusable manners to keep the amount of template code down and thus make everything more maintainable.

Hope that helps but please holler here if things don’t quite click yet and we’ll help get you up to speed as fast as we can.

Last edited by Bloke (2019-07-24 13:55:47)

bici · 2019-07-24 23:55:10

Hi Losse – years ago i found this article and the resulting files contained in the zip’d folder very useful.

It was written ten years ago and is only available on internet archive but i think you may find it helpful.

give it a read through

Textpattern CMS

Textpattern CMS support forum

#1 2019-07-23 18:51:50