Themes

Posted by Gary Cunningham-Lee 28 Apr 2021 08:01 GMT-0000

If you are talking about the content of a wiki page, then Smarty templates aren't involved other than for rare specialized cases. Normally a wiki page's content is plain text plus wiki syntax, WYSIWYG (using the WYSIWYG plugin, for example), or HTML (using PluginHTML).

For a page like you show in the PDF, in my experience, if I'm the only one who will be editing it or I know the others who will be editing are comfortable editing HTML, then I generally use HTML inside an HTML plugin. You can use wiki syntax like

{DIV(class="row")}{DIV(class="col-sm-4")}{DIV(class="card")}{DIV(class="card-body")} Some content {DIV}{DIV}{DIV}{DIV}

but for layout, I prefer HTML directly especially on complex pages, where standard indentation can be used to keep track of all the sections and divs, etc.

I did a Bootstrap conversion of a Tiki site a few years ago that's rather similar to your design — http://gecco-2017.sigevo.org/index.html/HomePage.html — which shows Tiki can be used to create this kind of site, first of all. (The organization has been using Tiki for many years and wanted to move to Bootstrap layout when Tiki did; I haven't been involved in more recent years because they have capable people in their organization who can implement new iterations of the site.) Unfortunately, "View page source" isn't turned on, but you can use your browsers DOM inspector to see how the page is put together. It's pretty standard Bootstrap layout.

Most pages of that site don't need that kind of layout creativity; many are tracker records displayed in wiki pages via tracker plugins. For a page like the GECCO homepage or the one shown in your design, I suggest using PluginLayout to remove side columns and so on, if you want these (like a left sidebar/side column) at the site in general). PluginLayout has quite a few parameters and options to more or less make the wiki content area the entire (or most of) the display port.

If you have a page that is kind of heavy with HTML layout tags, you can separate the layout from editable content by using PluginInclude. Instead of having the editable content on the page itself, the page contains a PluginInclude for each chunk of content. Then there is another wiki page that contains all the content. PluginInclude can be told where to start including a page's content and where to stop, so these parameters are entered for each plugin. That way one included page can supply all the text, etc. for the including page. That's how this page — https://evoludata.com/ML — is put together. This page — https://evoludata.com/ML_Included — holds the content. Another advantage of this method is that the included page can be translated and the include plugin will include the appropriate language for the particular site visitor. As you can imagine, it's a lot easier to translate a page like "ML_Included" than a page where this text is scattered in a big page of HTML tags, and it's also a nice DRY implementation regarding the layout HTML.

-- Gary

Posted by Gary Cunningham-Lee 28 Apr 2021 09:05 GMT-0000

Hi Sam,

I hope my previous post was helpful. I would suggest considering the general layout you want for the site overall:

• Bootstrap-style top navbar or navbar in page, full width vs fixed width, etc. — This can be selected on the Look and Feel admin page.
• No sidebars/side columns or one on the left or right — This is determined by where you assign modules.

and so on. Then on the homepage (or any page where you use the full width of the window for content and backgrounds, etc,, you can use PluginLayout to remove what you don't want on that page, for example a sidebar. As I described in my other post, whether I use HTML or wiki syntax for layout (Bootstrap-style grid, etc.) depends on how complex or simple the page is. I kinda prefer HTML syntax for layout generally speaking. Then, using PluginHTML has some advantages over activating the global option to allow HTML in pages (which can be turned on or off per page), so I usually put the HTML in a PluginHTML. Are you ok with creating a Bootstrap grid in HTML? We do have adding a drag and drop page builder to Tiki on the project's roadmap, probably https://github.com/givanz/VvvebJs, but this isn't available yet.

This kind of layout composing generally isn't necessary for most content pages at the site — it's mostly for "presentation" type pages, I would say. For site member biographies, paper descriptions, association statements, and so on, the standard wiki editor should be sufficient, I would imagine, since it's mostly just adding text and images, etc. without needing to lay things out visually in a unique way. Some content layout is possible with wiki syntax — there's a PluginFluidGrid, I think it's called, which lets you use simplified syntax to create a Bootstrap grid, and images and divs, etc. can be aligned left or right, etc. so there are some limited layout options within the wiki syntax editing environment.

If there's a type of page that has consistent layout that members will create content for, or a version of, then maybe Trackers are a better way to go. In this case, the information is input by the user into a form and then displayed on wiki pages via tracker plugins. The GECCO site I mentioned earlier uses this for a lot of the content that repeats in form but differs in actual content. I used the "Pretty Tracker" method which is now Tiki old skool — there's a more modern alternative, PluginList that's said to be more efficient but has a steeper learning curve (but go for it if you want to use Tiki's most up to date methods.

-- Gary