« previous next »
Pages: [1]

Author Topic: [TWEAK] Universal layout - HTML template tags  (Read 17671 times)

0 Members and 1 Guest are viewing this topic.

Offline thunderstrike

  • 4images Guru
  • *******
  • Posts: 2.327
    • View Profile
[TWEAK] Universal layout - HTML template tags
« on: October 03, 2007, 12:59:16 AM »
This is for use top, left, right (if have for right) and below layout for HTML template tags. So, no more need for re-copy in all HTML files from {header} to {footer} for same HTML table code. Is now in one single file with load all same design with 4 tags command in HTML template. ;)

// Step 1

In includes/template.php file,

find:

Quote
if ($name == 'header' || $name == 'footer') {

replace:

Code: [Select]
if ($name == 'header' || $name == 'ste_layout_top' || $name == 'ste_layout_left' || $name == 'ste_layout_right' || $name == 'ste_layout_below' || $name == 'footer') {

Find:

Quote
if (strpos($template, $this->start.'header'.$this->end) !== false) {
      $header = $this->parse_template("header");
      $template = str_replace($this->start.'header'.$this->end, $header, $template);
}

if (strpos($template, $this->start.'footer'.$this->end) !== false) {
      $footer = $this->parse_template("footer");
      $template = str_replace($this->start.'footer'.$this->end, $footer, $template);
}

replace:

Code: [Select]
if (strpos($template, $this->start.'header'.$this->end) !== false) {
      $header = $this->parse_template("layout/header");
      $template = str_replace($this->start.'header'.$this->end, $header, $template);
    }
   
    if (strpos($template, $this->start.'ste_layout_top'.$this->end) !== false) {
      $header = $this->parse_template("layout/ste_layout_top");
      $template = str_replace($this->start.'ste_layout_top'.$this->end, $header, $template);
    }
   
    if (strpos($template, $this->start.'ste_layout_left'.$this->end) !== false) {
      $header = $this->parse_template("layout/ste_layout_left");
      $template = str_replace($this->start.'ste_layout_left'.$this->end, $header, $template);
    }
   
    if (strpos($template, $this->start.'ste_layout_right'.$this->end) !== false) {
      $header = $this->parse_template("layout/ste_layout_right");
      $template = str_replace($this->start.'ste_layout_right'.$this->end, $header, $template);
    }

    if (strpos($template, $this->start.'ste_layout_below'.$this->end) !== false) {
      $footer = $this->parse_template("layout/ste_layout_below");
      $template = str_replace($this->start.'ste_layout_below'.$this->end, $footer, $template);
    }
   
    if (strpos($template, $this->start.'footer'.$this->end) !== false) {
      $footer = $this->parse_template("layout/footer");
      $template = str_replace($this->start.'footer'.$this->end, $footer, $template);
    }

// Step 2

Ok now is very important. Before test in live gallery. Install fresh 4images copy (with fresh DB name for safety). My instruction is from default template of 4images. After, you can test on live custom template.

In templates/default folder, create folder: layout. Inside, create: ste_layout_top.html - ste_layout_top.html - ste_layout_right.html - ste_layout_below.html file.

// Step 3

Ok so one example I do. You get the rest - is very easy. ;)

In templates/default/home.html file,

find:

Quote
<table width="640" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td>
      <table width="640" border="0" cellspacing="0" cellpadding="0" class="tablehead">
        <tr>
          <td colspan="4"><img src="{template_url}/images/header_top.gif" width="640" height="6" alt="" /></td>
        </tr>
        <tr>
          <td width="6"><img src="{template_url}/images/header_left.gif" width="6" height="60" alt="" /></td>
          <td width="405"><img src="{template_url}/images/header_logo.gif" width="405" height="60" alt="" /></td>
          <td width="225" align="right">
            <form method="post" action="{url_search}">
              <table border="0" cellspacing="0" cellpadding="1">
                <tr>
                  <td>
                    <input type="text" name="search_keywords" size="15" class="searchinput" />
                  </td>
                  <td>
                    <input type="submit" value="{lang_search}" class="button" name="submit" />
                  </td>
                </tr>
                <tr valign="top">
                  <td colspan="2"><a href="{url_search}" class="smalltext">{lang_advanced_search}</a></td>
                </tr>
              </table>
            </form>
          </td>
          <td align="right" width="6"><img src="{template_url}/images/header_right.gif" width="6" height="60" alt="" /></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td class="bordercolor">
      <table width="640" border="0" cellspacing="1" cellpadding="0">
        <tr>
          <td class="tablebgcolor">
            <table width="638" border="0" cellspacing="1" cellpadding="0">
              <tr>
                <td class="navbar" height="23">
                  <table width="636" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td><img src="{template_url}/images/spacer.gif" width="4" height="4" alt="" />{clickstream}</td>
                      <td align="right">
                  <a href="{url_top_images}"><b>{lang_top_images}</b></a>&nbsp;
                  <a href="{url_new_images}"><b>{lang_new_images}</b></a>&nbsp;
                 </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>

Cut paragraph (keep in new notepad for copy) and in HTML replace:

Code: [Select]
{ste_layout_top}

(for top side)

(Note: ste = Site in word).

Find:

Quote
<table width="638" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="150" class="row2" valign="top">
                  <table width="150" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td class="head2" height="20"><img src="{template_url}/images/spacer.gif" alt="" width="4" height="4" />{lang_registered_user}</td>
                    </tr>
                    <tr>
                      <td class="tablebgcolor"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></td>
                    </tr>
                    <tr>
                      <td align="center" class="row1">{user_box}</td>
                    </tr>
                    <tr>
                      <td class="tablebgcolor"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></td>
                    </tr>
                  </table>
              {if random_image}
                  <table width="150" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td class="head2" height="20"> <img src="{template_url}/images/spacer.gif" alt="" width="4" height="4" />{lang_random_image}</td>
                    </tr>
                    <tr>
                      <td class="tablebgcolor"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></td>
                    </tr>
                    <tr>
                      <td align="center" class="row1">
                   <br />
                        {random_image}
                  <br />
                        <br />
                      </td>
                    </tr>
                    <tr>
                      <td class="tablebgcolor"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></td>
                    </tr>
                  </table>
              {endif random_image}
                </td>
                <td width="1" class="bordercolor" valign="top"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></td>
                <td width="18" valign="top"><img src="{template_url}/images/spacer.gif" alt="" width="18" height="18" /></td>

Same thing for notepad and in HTML replace:

Code: [Select]
{ste_layout_left}

(for left side)

Ok, for the right side, is option so if have right side (I no have) so cut paragraph and paste in new notepad and on HTML file - replace:

Code: [Select]
{ste_layout_right}

(for right side)

Ok - last one - find:

Quote
<p>&nbsp;</p>
                </td>
                <td width="19" valign="top"><img src="{template_url}/images/spacer.gif" alt="" width="19" height="19" /></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table width="640" border="0" cellspacing="0" cellpadding="0" class="tablebottom">
        <tr>
          <td width="6"><img src="{template_url}/images/footer_left.gif" width="6" height="19" alt="" /></td>
          <td width="405">&nbsp;</td>
          <td width="225">&nbsp;</td>
          <td width="6"><img src="{template_url}/images/footer_right.gif" width="6" height="19" alt="" /></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Same thing for new notepad and replace in HTML:

Code: [Select]
{ste_layout_below}

(for below side)

// Step 4

Ok, good step.

In templates/default/layout/ste_layout_top.html file,

paste:

Code: [Select]
<table width="640" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td>
      <table width="640" border="0" cellspacing="0" cellpadding="0" class="tablehead">
        <tr>
          <td colspan="4"><img src="{template_url}/images/header_top.gif" width="640" height="6" alt="" /></td>
        </tr>
        <tr>
          <td width="6"><img src="{template_url}/images/header_left.gif" width="6" height="60" alt="" /></td>
          <td width="405"><img src="{template_url}/images/header_logo.gif" width="405" height="60" alt="" /></td>
          <td width="225" align="right">
            <form method="post" action="{url_search}">
              <table border="0" cellspacing="0" cellpadding="1">
                <tr>
                  <td>
                    <input type="text" name="search_keywords" size="15" class="searchinput" />
                  </td>
                  <td>
                    <input type="submit" value="{lang_search}" class="button" name="submit" />
                  </td>
                </tr>
                <tr valign="top">
                  <td colspan="2"><a href="{url_search}" class="smalltext">{lang_advanced_search}</a></td>
                </tr>
              </table>
            </form>
          </td>
          <td align="right" width="6"><img src="{template_url}/images/header_right.gif" width="6" height="60" alt="" /></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td class="bordercolor">
      <table width="640" border="0" cellspacing="1" cellpadding="0">
        <tr>
          <td class="tablebgcolor">
            <table width="638" border="0" cellspacing="1" cellpadding="0">
              <tr>
                <td class="navbar" height="23">
                  <table width="636" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td><img src="{template_url}/images/spacer.gif" width="4" height="4" alt="" />{clickstream}</td>
                      <td align="right">
<a href="{url_top_images}"><b>{lang_top_images}</b></a>&nbsp;
<a href="{url_new_images}"><b>{lang_new_images}</b></a>&nbsp;
  </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>

In templates/default/layout/ste_layout_left.html file,

paste:

Code: [Select]
<table width="638" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="150" class="row2" valign="top">
                  <table width="150" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td class="head2" height="20"><img src="{template_url}/images/spacer.gif" alt="" width="4" height="4" />{lang_registered_user}</td>
                    </tr>
                    <tr>
                      <td class="tablebgcolor"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></td>
                    </tr>
                    <tr>
                      <td align="center" class="row1">{user_box}</td>
                    </tr>
                    <tr>
                      <td class="tablebgcolor"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></td>
                    </tr>
                  </table>
  {if random_image}
                  <table width="150" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td class="head2" height="20"> <img src="{template_url}/images/spacer.gif" alt="" width="4" height="4" />{lang_random_image}</td>
                    </tr>
                    <tr>
                      <td class="tablebgcolor"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></td>
                    </tr>
                    <tr>
                      <td align="center" class="row1">
    <br />
                        {random_image}
<br />
                        <br />
                      </td>
                    </tr>
                    <tr>
                      <td class="tablebgcolor"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></td>
                    </tr>
                  </table>
  {endif random_image}
                </td>
                <td width="1" class="bordercolor" valign="top"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></td>
                <td width="18" valign="top"><img src="{template_url}/images/spacer.gif" alt="" width="18" height="18" /></td>

In templates/default/layout/ste_layout_right.html file (if have), paste your right content in that file.

In templates/default/layout/ste_layout_below.html file,

paste:

Code: [Select]
<p>&nbsp;</p>
                </td>
                <td width="19" valign="top"><img src="{template_url}/images/spacer.gif" alt="" width="19" height="19" /></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table width="640" border="0" cellspacing="0" cellpadding="0" class="tablebottom">
        <tr>
          <td width="6"><img src="{template_url}/images/footer_left.gif" width="6" height="19" alt="" /></td>
          <td width="405">&nbsp;</td>
          <td width="225">&nbsp;</td>
          <td width="6"><img src="{template_url}/images/footer_right.gif" width="6" height="19" alt="" /></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

// Stats - filesize home.html file.

Ok so if I filesize home.html file,

original: 7.364 bytes
my copy is now: 3.056 bytes for same thing (and faster load foreach HTML template files). ;).

All done  :!:  8)
Do same for all HTML files - have {header} to {footer}. Is all same. ;)

// Move header.html and footer.html file to layout folder too.

@Kai:

For next version of 4images ?
Logged
8 steps need when ask question -

- PHP version (ACP - > phpinfo())
- mySQL version (ACP - > phpinfo())
- 4images version
- Post screenshot / URL
- Post code in BB Code (no need full file for code) or post attach file
- It doesn't work. What is say - what is do for no work
- Install MOD ? If so - please say (troubleshooting)
- Read FAQ ? Install Bug fixes ?

Offline skidpics

  • Jr. Member
  • **
  • Posts: 61
    • View Profile
Re: [TWEAK] Universal layout - HTML template tags
« Reply #1 on: October 03, 2007, 04:46:39 AM »
So, is this for any mod you want to add to 4images, or just headers, footers and sides?
Logged

Offline thunderstrike

  • 4images Guru
  • *******
  • Posts: 2.327
    • View Profile
Re: [TWEAK] Universal layout - HTML template tags
« Reply #2 on: October 03, 2007, 04:50:34 AM »
Quote
or just headers, footers and sides?

This is first but after for MODs for all HTML designer and editor. Is faster and is work for MOD if need. ;)
Logged
8 steps need when ask question -

- PHP version (ACP - > phpinfo())
- mySQL version (ACP - > phpinfo())
- 4images version
- Post screenshot / URL
- Post code in BB Code (no need full file for code) or post attach file
- It doesn't work. What is say - what is do for no work
- Install MOD ? If so - please say (troubleshooting)
- Read FAQ ? Install Bug fixes ?

Offline Nicky

  • Administrator
  • 4images Guru
  • *****
  • Posts: 3.195
    • View Profile
Re: [TWEAK] Universal layout - HTML template tags
« Reply #3 on: November 06, 2007, 12:55:42 PM »
i just wanted to test this tweak..

but, things under "Quote" can't be found.. please use instead of [ quote ] and [ /quote ]
codes > [ code ] and [ /code ] without space.
Logged
cheers
Nicky
Your first three "must do" before you ask a question ! (© by V@no)
- please read the Forum Rules ...
- please study the FAQ ...
- please try to Search for your answer ...
nicky.net 4 4images
Signature stolen from mawenzi

Offline Nicky

  • Administrator
  • 4images Guru
  • *****
  • Posts: 3.195
    • View Profile
Re: [TWEAK] Universal layout - HTML template tags
« Reply #4 on: November 06, 2007, 01:13:08 PM »
okay.. tested...
searched manual ;)

working fine with home.html
file size 2071 bytes... maybe i deleted to much  :twisted:
Logged
cheers
Nicky
Your first three "must do" before you ask a question ! (© by V@no)
- please read the Forum Rules ...
- please study the FAQ ...
- please try to Search for your answer ...
nicky.net 4 4images
Signature stolen from mawenzi

Offline thunderstrike

  • 4images Guru
  • *******
  • Posts: 2.327
    • View Profile
Re: [TWEAK] Universal layout - HTML template tags
« Reply #5 on: November 06, 2007, 01:34:17 PM »
Thank for posting and dream for 4images v1.75 integrate.
Logged
8 steps need when ask question -

- PHP version (ACP - > phpinfo())
- mySQL version (ACP - > phpinfo())
- 4images version
- Post screenshot / URL
- Post code in BB Code (no need full file for code) or post attach file
- It doesn't work. What is say - what is do for no work
- Install MOD ? If so - please say (troubleshooting)
- Read FAQ ? Install Bug fixes ?

rinaldos

  • Guest
Re: [TWEAK] Universal layout - HTML template tags
« Reply #6 on: November 06, 2007, 02:02:12 PM »
Hi,
this TWEAK works wonderfull. Its now Easy to change in the whole Site the layout........
Thanks for it......


Gruß
Ingo
Logged

Offline bergblume

  • Sr. Member
  • ****
  • Posts: 463
  • on to the top!
    • View Profile
Re: [TWEAK] Universal layout - HTML template tags
« Reply #7 on: February 21, 2009, 06:41:51 PM »
this is exactly what I looked for!!

thanx a lot!!  :D
Logged

Offline Bommel

  • Full Member
  • ***
  • Posts: 114
    • View Profile
Re: [TWEAK] Universal layout - HTML template tags
« Reply #8 on: January 27, 2010, 05:22:30 AM »
Vielen Dank für diese Erweiterung. :thumbup:

Damit steht einer späteren einfachen Erweiterung meines verwendeten Templates "Iceberg" um eine rechte und untere Spalte nichts mehr im Wege.

Freundliche Grüße, Bommel
Logged
Freundliche Grüße, Bommel

Nicht die Geduld mit mir verlieren, ich bin noch am Lernen./ Do not lose the patience with me, I am still in the learning. ;)
Pages: [1]
« previous next »