Page template design theories

#1

Hello members,

i am wondering if anyone will offer some tips for designing a template. I am struggling with this concept because most of my html code is the same but some of it is different depending upon the page/topic. Thus, i am not sure how to create a template that can dynamically add the differnt content without breaking up a page into a dozen include statements. understand? let me try this:

<!DOCTYPE html>
<head>
  <title>[////// this must be changed //////]</title>
  <meta>
  <link rel="stylesheet" type="text/css" src="[//////this can change//////]" />
  [//////maybe this page requires a second css file//////]
</head>
<body>
<div>header navigation links and logo [//////this can change//////]>/div>
<div>breadcrumb links [//////this must be changed//////]</div>

<div>content [//////this must be changed//////]</div>

<div>legal data is static</div>
</body>
</html>

this is more complicated than i imagined it to be. the pages have two different scopes/views: public and private. I don’t know how to approach this design. Should i use an array to store data based upon a request, then fill the template using the array? really my site is small as far as code is concerned. However, i have almost one thousand different species which require different representation within a common document. Any tips to help me with this concept? please.

Thank you.

#2

In order to answer properly it would be best to know how these views will vary. If there are only minor changes (private Version has editable options) then it might make sense to use the same template. If the view is radically different it might make sense to use separate templates.

This approach is often used.

Short answer, use twig
https://twig.symfony.com/

// base.html.twig
<!DOCTYPE html>
<html>
    <head>
        {% block head %}
            <link rel="stylesheet" href="style.css" />
            <title>{% block title %}{% endblock %} - My Webpage</title>
        {% endblock %}
    </head>
    <body>
        <div id="content">{% block content %}{% endblock %}</div>
        <div id="footer">
            {% block footer %}
                &copy; Copyright 2011 by <a href="http://domain.invalid/">you</a>.
            {% endblock %}
        </div>
    </body>
</html>
// other-page.html.twig
{% extends "base.html" %}

{% block title %}Index{% endblock %}
{% block head %}
    {{ parent() }}
    <style type="text/css">
        .important { color: #336699; }
    </style>
{% endblock %}
{% block content %}
    <h1>Index</h1>
    <p class="important">
        Welcome to my awesome homepage.
    </p>
{% endblock %}
// other-page.php (aka the controller)
echo $twig->render(other-page.html.twig', ['the' => 'variables', 'go' => 'here']);

Twig gives you a very flexible templating system where you can optionally inject code into the places (blocks) you want of parent template(s), template caching, automatic escaping of all output, etc

You can of course make this yourself, but I struggle to find good arguments as to why

3 Likes
#3

A templating engine looks to be the next step in your learning progress.

twig, smarty, there are several.

1 Like
#4

Hello Jim, Thank you for this superb reply. For the most part, the pages are the same except title, css, breadcrumbs and content. I try to keep content in what i call “pages” divisions (div and span for css). When i first learned css3 (last year or maybe two years ago), i tried to learn layout without tables. I decided to create what i call “bands” and “belts” design. My nav bar is a belt, my breadcrumb title bar is a belt, my content is a band, and my legal info is a belt. A belt is a thin or less than 100 pixels high division set to hold a free floating logo (position fixed) and navigation buttons/links (login is a form and not a link, so that i can pass a token to the actual login form page. no token, no form.) The site can be divided into public views and private (must be a logged in member) views. I am extreme, yes, but i even rename my css in private view. So that in the event that a leak occured where javascript can be injected (i don’t see any leaks but i’m not a security expert), then any js that accesses an element by id or class will not work on private css and vice versa. silly but i’m not taking a chance with user trust. Meantime, the public navugation is clearly different than the private navigation. Private nav, for example, will maintain a settings/control panel/site properties button for members to change settings or info about their membership. Here, then, is a completely different page. On this page is also where i show security information such as login time, last login time, password changed date (which also sends an email when changed). I also have a complex change background photo in this area. So, yes, these pages are much different and require security (so no js is used and tokens are required and in elevation procedures, such as password change, then you also need a customer id number that i mail to you as a post letter not an email message.) Other than that, the pages are mostly the same. The biggest problem for me is actually the breadcrumb title bar, which we discussed before when you showed me example code for an Animal class with an Animal controller.

i will start reading twig and try to familiarize myself with this new technology. I’ve not seen this before but it sounds like it’s right up my alley. Thank you.

#5

yes, i agree. I need to roll up my sleeves and get to work learning this stuff. I’ll start with twig and “branch” out to other possibilities :slight_smile:

Thank you, astonecipher.

#6

I just switched over to using Grid and Flexbox in designing my website(s). I know it is relatively new, but most (if not all) modern browsers support it. It has made designing responsive websites easier and my CSS file size seems to be actually smaller.

Here’s a sample of my css (I’m using Sass to write my CSS as I just like using it).

/* Fake Popup */
.shade {
display: none;
grid-template-columns: repeat(12, 1fr);
background-color: rgba(0, 0, 0, 0.7);
padding: 0;
margin: 0 auto;
.exit-slideshow {
    grid-column: 1 / span 12;
    grid-row: 1;
    background-color: floralwhite;
    height: 3.125em;
    line-height: 3.125em;
    a { 
        overflow: hidden;
        display: inline-block;
        width: 11.250em;
        height: 100%;
        background-color: rgba(green, 0.8);
        font-family: "Titillium Web", sans-serif;
        font-size: 1.2em;
        color: #fff;
        text-align: center;
        text-decoration: none;
        padding: 0;
        margin: 0 0 0 0;
        &:hover {
            background-color: rgba(red, 0.8);
        }
    }
}
#pictureELE {
    grid-column: 2 / span 10;
    grid-row: 2;
    justify-self: center;
    align-self: center;
    width: 85%;
}
#preSlide, #nextSlide {
    z-index: 20200;
    background-color: rgba(green, 0.8);
    font-family: "Titillium Web", sans-serif;
    font-size: 1.2em;
    color: $color-white;
    text-decoration: none;
    padding: 10px;
    &:hover {
        background-color: rgba(red, 0.5);
    }
}
#preSlide {
    grid-column: 1 / span 1;
    grid-row: 2;
    justify-self: center;
    align-self: center;
}
#nextSlide {
    grid-column: 12 / span 1;
    grid-row: 2;
    justify-self: center;
    align-self: center;
}
.additional-info {
    grid-column: 1 / span 12;
    grid-row: 3;
    background-color: floralwhite;
    height: 3.750em;
    #exifData {
        font-family: 'Dokdo', cursive;
        font-size: 2.0em;
        font-weight: 300;
        color: #2e2e2e;
        text-align: center;
        span {
            padding-left: 0.625em;
        }
    }
}
}

The above is for my picture when a user clicks on the smaller image on my website
https://www.miniaturephotographer.com/blog.php

I’m actually a Smarty Template person and here’s my main template: general_page_template.tpl

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <title>{block name=title}Pepster's Place{/block}</title>
        <link rel="stylesheet" href="assets/css/styles.css">
        <link rel="shortcut icon" href="favicon.ico" >
        <script src='https://www.google.com/recaptcha/api.js'></script>
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <script>
            (adsbygoogle = window.adsbygoogle || []).push({
                google_ad_client: "ca-pub-4505611188786409",
                enable_page_level_ads: true
            });
        </script>
    </head>
    <body id="exit-frame">

        <div id="pictureBox" class="shade">
            <div class="exit-slideshow">
                <a id="btn-slideshow" class="btn-slideshow" href="#">&#8592; Exit to Website</a>
            </div>
            <img id="pictureELE" src="assets/images/img-duck-001.png" alt="Big Screen Picture">
            <a id="preSlide" href="#">PREV</a>
            <a id="nextSlide" href="#">NEXT</a>  
            <div class="additional-info">
                <p id="exifData">Additional Info Coming Soon!</p>
            </div>
        </div>

        <div id="container" class="container paper">

            {block name=navigationTemplate}

                <div class="navigation">
                    <ul id="menu">
                        <li><a href="index.php">Home</a></li>
                        <li><a href="about.php">About</a></li>                        
                        <li><a href="contact.php">Contact</a></li>
                            {if $display_status}
                            <li><a href="member_page.php">Member</a></li>
                            <li><a href="logout.php">Logout</a></li>
                            {else}
                            <li><a href="blog.php">Picture Blog</a></li>
                            <li id="showLogin"><a href="login.php">Login</a></li>
                            {/if}
                    </ul>
                </div>
            {/block}

            {block name=headerTemplate}
                <div class="header">                
                    <img class="logo" src="assets/images/img-logo-003.png" alt="The Miniature Photographer">
                </div>
                <div class="grid-calendar">
                    {$calendar} 
                </div>
            {/block}


            {block name=body}
                {$journal}
            {/block}
            {block name=aside}
                <div class="aside">
                    <div class="aside-container">
                        <div class="socialMediaStyle">
                            <ul class="socialIcons">
                                <li><a href="http://www.facebook.com/PepstersPlace" target="_blank"><img src="assets/images/img-facebook-logo-25x25.png" alt="Pepster's Place Facebook Page" ></a></li>
                                <li><a href="http://twitter.com/#!/Strider64" target="_blank"><img src="assets/images/img-twitter-logo-25x25.png" alt="Pepster's Twitter Profile" ></a></li>
                                <li><a href="http://www.linkedin.com/in/johnpepp" target="_blank"><img src="assets/images/img-linkedin-logo-25x25.png" alt="John Pepp's LinkedIn Profile" ></a></li>
                                <li><a href="https://www.flickr.com/photos/pepster/" target="_blank"><img src="assets/images/img-flickr-logo-100x25.png" alt="John Pepp's Flickr Profile" ></a></li>
                            </ul>
                        </div>
                    </div>
                    <h3 class="aside-heading">Favorite Links</h3>
                    <a href="https://www.youtube.com/channel/UCAVZgMB5cZvsSWf7BI0btOA?view_as=subscriber"><img class="aside-images" src="assets/images/img-youtube-001.jpg" alt="YouTube Page"></a>
                    <a href="https://froknowsphoto.com/"><img class="aside-images" src="assets/images/img-froknowsphoto-001.jpg" alt="Fro Knows Photo"></a>
                    <a href="https://www.dpreview.com/forums/"><img class="aside-images" src="assets/images/img-dpreview-001.jpeg" alt="Dpreview Website"></a>
                    <a href="https://bit.ly/2VwmUAJ"><img class="aside-images" src="assets/images/img-sony-alpha-logo-001.png" alt="Sony Alpha Cameras"></a>
                    {/block}



            </div>
            <div class="footer">
                <p class="page-info">&copy;2019 The Miniature Photographer</p>
            </div>
        </div>
        <script src="assets/js/myLightRoom.js"></script> 
        <script src="assets/js/showLogin.js"></script> 
    </body>
</html>

and here’s my blog page template called blog.tpl:
{extends file=“general_page_template.tpl”}
{block name=title}
{$title|escape}
{/block}

{block name=body}
    <div class="main">
        {nocache}
            <h1>The Daily Blog</h1>
            <div id="gallery" class="picture-box" data-total="{$journal|count}" >
                {counter start=-1 skip=1 print=false}
                <div class="article">
                    {foreach $journal as $cms}
                        <h2>{$cms.heading} <span class="subheading">by {$cms.author} on {$cms.date_added}</span></h2>
                        <a class="myLightBox" href="{$cms.image_path}" title="Picture Gallery" data-picture="{counter}" 
                           data-exif="{if $cms.Model}{$cms.Model}   ---   {$cms.FocalLength}    {$cms.Aperture}    {$cms.ISO}    {$cms.ExposureTime}{/if}"><img class="box" src="{$cms.thumb_path}" alt="Picture for Journal Entry"></a>                    
                        <hr>
                        <p>{$cms.content|nl2br}</p>
                    {/foreach}
                </div>
            </div>
        {/nocache}
    </div>
    {block name="aside"}
    {/block}
{/block}

The one nice thing about using a template system such as Smarty or Twig templating system is a person doing the templating really doesn’t need to know backend programming. They still need to know basic programming, but I think a person who even just learned Basic would be able to design a templating system. My preference is to keep the CSS totally part of the general page and just have the person(s) design the template between the <body></body> element. Once you get the general page template done all a person really has to do page template (like blog.tpl). However, every one develops and designs differently and I’m just give my take on templating. Templates saves a lot of time developing as you not constantly do the same thing over and over again.

2 Likes
#7

Hello @Strider64, thanks for the nice reply. Your opinion matters just as much as everyone elses. Thank you for sharing and i will make notes of your material.

By the way, very nice photo of the flying Canada Geese. I love to photograph birds. Maybe someday you will also get into macro photography. Insects and spiders are also alot of fun to photograph.