4images Forum & Community
Welcome, Guest. Please login or register.
Did you miss your activation email?
October 17, 2018, 11:56:23 AM

Login with username, password and session length
Search:     Advanced search
Togle to toolbar
Translate this page with =>
Translate this page >
* Home Help Search Login Register
 
+  4images Forum & Community
|-+  4images Issues / Ausgaben
| |-+  Installation, Update & Configuration (Moderators: Acidgod, ivan, Rembrandt)
| | |-+  [TWEAK] Universal layout - HTML template tags
0 Members and 1 Guest are viewing this topic. « previous next »
Pages: [1] Print
Author Topic: [TWEAK] Universal layout - HTML template tags  (Read 13848 times)
thunderstrike
4images Guru
*******
Offline Offline

Posts: 2327

Thank You
-Given: 0
-Receive: 10


View Profile
« 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. Wink

// Step 1

In includes/template.php file,

find:

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

replace:

1
if ($name == 'header' || $name == 'ste_layout_top' || $name == 'ste_layout_left' || $name == 'ste_layout_right' || $name == 'ste_layout_below' || $name == 'footer') {

Find:

Quote  [Expand]
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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. Wink

In templates/default/home.html file,

find:

Quote  [Expand]
<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:

1
{ste_layout_top}

(for top side)

(Note: ste = Site in word).

Find:

Quote  [Expand]
<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:

1
{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:

1
{ste_layout_right}

(for right side)

Ok - last one - find:

Quote  [Expand]
<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:

1
{ste_layout_below}

(for below side)

// Step 4

Ok, good step.

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

paste:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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). Wink.

All done  Exclamation  Cool
Do same for all HTML files - have {header} to {footer}. Is all same. Wink

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

@Kai:

For next version of 4images ?

Follow members gave a thank to your post:
Bommel

For this post, 1 member gave a thank you!
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 ?
skidpics
Jr. Member
**
Offline Offline

Posts: 61

Thank You
-Given: 0
-Receive: 0


View Profile
« 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
thunderstrike
4images Guru
*******
Offline Offline

Posts: 2327

Thank You
-Given: 0
-Receive: 10


View Profile
« Reply #2 on: October 03, 2007, 04:50:34 AM »

Quote  [Expand]
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. Wink
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 ?
Nicky
Administrator
4images Guru
*****
Offline Offline

Posts: 3195

Thank You
-Given: 26
-Receive: 57


View Profile
« 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
Nicky
Administrator
4images Guru
*****
Offline Offline

Posts: 3195

Thank You
-Given: 26
-Receive: 57


View Profile
« Reply #4 on: November 06, 2007, 01:13:08 PM »

okay.. tested...
searched manual Wink

working fine with home.html
file size 2071 bytes... maybe i deleted to much  Twisted Evil
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
thunderstrike
4images Guru
*******
Offline Offline

Posts: 2327

Thank You
-Given: 0
-Receive: 10


View Profile
« 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
« 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
bergblume
Sr. Member
****
Offline Offline

Posts: 463

Thank You
-Given: 37
-Receive: 11

on to the top!


View Profile
« Reply #7 on: February 21, 2009, 06:41:51 PM »

this is exactly what I looked for!!

thanx a lot!!  Very Happy
Logged
Bommel
Full Member
***
Offline Offline

Posts: 114

Thank You
-Given: 15
-Receive: 3


View Profile
« Reply #8 on: January 27, 2010, 05:22:30 AM »

Vielen Dank für diese Erweiterung. Good

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. Wink
Pages: [1] Print 
« previous next »
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2015, Simple Machines Valid XHTML 1.0! Valid CSS!
Page created in 0.077 seconds with 22 queries.