Integrating with Movable Type 4.1

bigolslabomeat

Joined: 2008-04-30
Posts: 1
Posted: Wed, 2008-04-30 12:01

Hello all,

Don't know how much use this is to anyone, but I spent a while working it out so thought I would share.

I have made a full (visual) integration of the "matrix" template with Movable Type 4.1 (should work with all 4.x) that will cope with design changes made in movable type itself.

This version is based on the "Univeral Template Set", but can be easily adapted to fit the standard template system (in fact you should only need to change the index page itself)

I would be interested to hear if anyone manages to do this using my code, or even if anyone cares!

Header include (edit this from existing)

<mt:setvarblock name="html_head" prepend="1">
    <MTIf name="main_template">
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTLink template="atom"$>" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<$MTLink template="rss"$>" />
        <MTUnless name="main_index">
<link rel="start" href="<$MTBlogURL$>" title="Home" />
        </MTUnless>
<$MTCCLicenseRDF$>
    </MTIf>
</mt:setvarblock>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
    <MTIf name="gallery_tpl">{literal}</MTIf>
	<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
    <meta name="generator" content="<$MTProductName version="1"$>" />
    <$MTInclude identifier="styles" trim_to="0"$>
    <link rel="stylesheet" href="<$MTLink template="styles"$>" type="text/css" />
    <$mt:var name="html_head"$>

    <MTIf name="gallery_tpl">{/literal}</MTIf>
<MTIf name="gallery_tpl">
    {* Let Gallery print out anything it wants to put into the <head> element *}
    {g->head}

    {* If Gallery doesn't provide a header, we use the album/photo title (or filename) *}
    {if empty($head.title)}
      <title>{$theme.item.title|markup:strip|default:$theme.item.pathComponent}</title>
    {/if}

    {* Include this theme's style sheet *}
    <link rel="stylesheet" type="text/css" href="{g->theme url="theme.css"}"/>
<MTElse>
    <title><$mt:var name="title"$></title>    
</MTIf>  
</head>
<MTIf name="gallery_tpl">{literal}</MTIf>
<body class="<MTIf name="body_class"><$MTGetVar name="body_class"$> </MTIf><$MTGetVar name="page_layout" default="layout-wtt"$>"<MTIf name="body_onload"> onload="<$MTGetVar name="body_onload"$>"</MTIf>>
    <div id="container">
        <div id="container-inner">
            <div id="header">
                <div id="header-inner">
                    <div id="header-content">
<MTIf name="main_index">
                        <h1 id="header-name"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
                        <h2 id="header-description">
			    <$MTBlogDescription$>
			 </h2>
<MTElse>
                        <div id="header-name"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></div>
                        <div id="header-description">
                             <$MTBlogDescription$>
			     </div>
                       </MTIf>
                    </div>
                </div>
            </div>
            <div id="main-navigation">
                <div id="main-navigation-inner">
		    <mt:Include module="Navigation" />
		    <mt:Include widget="Search (In Navigation)" />
                </div>
            </div>
            <div id="content">
                <div id="content-inner">
		    <MTIf name="main_index">
		    <mt:Include module="Homepage Image" />
		    </MTIf>
		    <div id="alpha">
                        <div id="alpha-inner">
    <MTIf name="gallery_tpl">{/literal}</MTIf>

Gallery Template (add as a new index template and set the "output file" to gallery/themes/matrix/templates/local/theme.tpl)

<MTSetVar name="body_class" value="mt-main-index">
<MTSetVar name="page_layout" value="layout-w">
<MTSetVar name="main_template" value="1">
<MTSetVar name="gallery_tpl" value="1">
<MTSetVar name="sidebar" value="0">

<$MTInclude module="Header"$>

<div id="gallery">

    <div {g->mainDivAttributes}>
      {*
       * Some module views (eg slideshow) want the full screen.  So for those, we don't draw
       * a header, footer, navbar, etc.  Those views are responsible for drawing everything.
       *}
      {if $theme.useFullScreen}
	{include file="gallery:`$theme.moduleTemplate`" l10Domain=$theme.moduleL10Domain}
      {elseif $theme.pageType == 'progressbar'}
	{g->theme include="progressbar.tpl"}
      {else}

      <div id="gsNavBar" class="gcBorder1">
	<div class="gbSystemLinks">
	  {g->block type="core.SystemLinks"
		    order="core.SiteAdmin core.YourAccount core.Login core.Logout"
		    othersAt=4}
	</div>

	<div class="gbBreadCrumb">
	  {g->block type="core.BreadCrumb"}
	</div>
      </div>

      {* Include the appropriate content type for the page we want to draw. *}
      {if $theme.pageType == 'album'}
	{g->theme include="album.tpl"}
      {elseif $theme.pageType == 'photo'}
	{g->theme include="photo.tpl"}
      {elseif $theme.pageType == 'admin'}
	{g->theme include="admin.tpl"}
      {elseif $theme.pageType == 'module'}
	{g->theme include="module.tpl"}
      {/if}

      <div id="gsFooter">
	{g->logoButton type="validation"}
	{g->logoButton type="gallery2"}
	{g->logoButton type="gallery2-version"}
	{g->logoButton type="donate"}
      </div>
      {/if}  {* end of full screen check *}
    </div>

    {*
     * Give Gallery a chance to output any cleanup code, like javascript that needs to be run
     * at the end of the <body> tag.  If you take this out, some code won't work properly.
     *}
    {g->trailer}

    {* Put any debugging output here, if debugging is enabled *}
    {g->debug}
  
</div>

<$MTInclude module="Footer"$>

Then edit the base stylesheet for your design (in my case it was in mt-static/themes-base/blog.css but can be base_theme.css) and add the following after "layout-wm #beta"

/* Wide */

.layout-w #alpha {
    width: 940px;
}

And there you should have a nice integrated gallery in your movable type install!

You can see an example at http://www.chloeandrichard.com/gallery

Cheers

<edit>Link changed due to "hiding" the gallery until it has pictures in it!</edit>