View Single Post
Old 10-05-2015, 05:33 AM  
Zug
So Fucking Banned
 
Industry Role:
Join Date: Jun 2004
Location: America
Posts: 109
TGPX Thumb Template Converted to Bootstrap Grid CSS

Hello. I am dumb with the {insert} and {foreach} commands when trying to get TGPX to display thumbs in 3 rows by 6 columns when using with bootstrap grid system.

Can anyone help?

This is the original TGPX code that is generated by the script:
PHP Code:
<!-- START TGPX MIXED PICTURE Gallery Codes -->
<
table align="center" cellpadding="2" border="0">
<
tr>
{* 
Load 18 galleries *}
{
galleries
var=$galleries
preview
=true
type
=any
category
=MIXED
format
=pictures
amount
=18
globaldupes
=true
getnew
=true
allowused
=true
order
=date_approved DESC
reorder
=date_approved DESC}

{* 
Display loaded galleries as thumbnails in a 6 per row format *}
{foreach 
from=$galleries var=$gallery counter=$counter}
<
td><a href="/gallery/click.php?id={$gallery.gallery_id|urlencode}&l=pic-gal-1&u={$gallery.gallery_url|urlencode}title="{$gallery.description|htmlspecialchars} Pictures" target="_blank"><img src="{$gallery.preview_url|htmlspecialchars}alt="{$gallery.description|htmlspecialchars}style="border:1px solid #0000c4;" width="160" height="210" /></a>
<
br /><span class="smallest">({$gallery.thumbnails|htmlspecialchars}) <a href="/gallery/click.php?id={$gallery.gallery_id|urlencode}&l=pic-gal-1&u={$gallery.gallery_url|urlencode}target="_blank" title="Teen Picture Gallery.. {$gallery.clicks|htmlspecialchars} Views">Pictures of {$gallery.tour_title|htmlspecialchars}</a>...<br /></span>
</
td>
{
insert location=+6 counter=$counter max=18}
</
tr><tr>
{/
insert}
{/foreach}
</
tr>
<
tr>
<
td><div style="position: absolute; left: 16px; top: 5px;" class="smallest"><a href="../galleries/" title="Newest Galleries">Galleries Home</aPosted Teen Picture Galleries <b>Page 1</b> | <a href="pictures_page2.php" title="Picture Gallery Page 2">Page 2</a> | <a href="pictures_page3.php" title="Picture Gallery Page 3">Page 3</a> | <a href="pictures_page4.php" title="Picture Gallery Page 4">Page 4</a></div></td>
<
td><br /><div style="position: absolute; right: 16px; bottom: 5px;" class="smallest"><a href="../galleries/" title="Newest Galleries">Galleries Home</aPosted Teen Picture Galleries <b>Page 1</b> | <a href="pictures_page2.php" title="Picture Gallery Page 2">Page 2</a> | <a href="pictures_page3.php" title="Picture Gallery Page 3">Page 3</a> | <a href="pictures_page4.php" title="Picture Gallery Page 4">Page 4</a></div></td>
</
tr>
</
table>
<!-- 
END TGPX MIXED PICTURE Gallery Codes END --> 
This is the code I have that almost works but shows slight indentations on each row:
PHP Code:
<!-- START TGPX MIXED PICTURE Gallery Codes -->
        
<
div class="row">

{* 
Load 18 galleries *}
{
galleries
var=$galleries
preview
=true
type
=any
category
=MIXED
format
=pictures
amount
=18
globaldupes
=true
getnew
=true
allowused
=true
order
=date_approved DESC
reorder
=date_approved DESC}

{* 
Display loaded galleries as thumbnails in a 6 per row format *}
{foreach 
from=$galleries var=$gallery counter=$counter}

<
div class="col-sm-2">
     <
a href="/gallery/click.php?id={$gallery.gallery_id|urlencode}&l=pic-gal-1&u={$gallery.gallery_url|urlencode}title="{$gallery.description|htmlspecialchars} Photos" class="thumbnail home-thumb">
         <
img src="{$gallery.preview_url|htmlspecialchars}alt="{$gallery.description|htmlspecialchars}">
     </
a>
</
div>

{
insert location=+6 counter=$counter max=18}
</
div>
<
div class="row">
{/
insert}
{/foreach}

<!-- 
END TGPX MIXED PICTURE Gallery Codes END --> 
This is the bootstrap code to show thumbs that I am trying to convert to the TGPX code:
PHP Code:
<div class="row">
            <
div class="col-sm-2">
                <
a href="#" class="thumbnail home-thumb">
                    <
img src="images/pic1.jpg" alt="title">
                </
a>
            </
div>
            <
div class="col-sm-2">
                <
a href="#" class="thumbnail home-thumb">
                    <
img src="images/pic2.jpg" alt="title">
                </
a>
            </
div>
            <
div class="col-sm-2">
                <
a href="#" class="thumbnail home-thumb">
                    <
img src="images/pic3.jpg" alt="title">
                </
a>
            </
div>
            <
div class="col-sm-2">
                <
a href="#" class="thumbnail home-thumb">
                    <
img src="images/pic4.jpg" alt="title">
                </
a>
            </
div>
            <
div class="col-sm-2">
                <
a href="#" class="thumbnail home-thumb">
                    <
img src="images/pic5.jpg" alt="title">
                </
a>
            </
div>
            <
div class="col-sm-2">
                <
a href="#" class="thumbnail home-thumb">
                    <
img src="images/pic6.jpg" alt="title">
                </
a>
            </
div>
        </
div>
        <
div class="row">
            <
div class="col-sm-2">
                <
a href="#" class="thumbnail home-thumb">
                    <
img src="images/pic1.jpg" alt="title">
                </
a>
            </
div>
            <
div class="col-sm-2">
                <
a href="#" class="thumbnail home-thumb">
                    <
img src="images/pic2.jpg" alt="title">
                </
a>
            </
div>
            <
div class="col-sm-2">
                <
a href="#" class="thumbnail home-thumb">
                    <
img src="images/pic3.jpg" alt="title">
                </
a>
            </
div>
            <
div class="col-sm-2">
                <
a href="#" class="thumbnail home-thumb">
                    <
img src="images/pic4.jpg" alt="title">
                </
a>
            </
div>
            <
div class="col-sm-2">
                <
a href="#" class="thumbnail home-thumb">
                    <
img src="images/pic5.jpg" alt="title">
                </
a>
            </
div>
            <
div class="col-sm-2">
                <
a href="#" class="thumbnail home-thumb">
                    <
img src="images/pic6.jpg" alt="title">
                </
a>
            </
div>
        </
div>
        <
div class="row">
            <
div class="col-sm-2">
                <
a href="#" class="thumbnail home-thumb">
                    <
img src="images/pic1.jpg" alt="title">
                </
a>
            </
div>
            <
div class="col-sm-2">
                <
a href="#" class="thumbnail home-thumb">
                    <
img src="images/pic2.jpg" alt="title">
                </
a>
            </
div>
            <
div class="col-sm-2">
                <
a href="#" class="thumbnail home-thumb">
                    <
img src="images/pic3.jpg" alt="title">
                </
a>
            </
div>
            <
div class="col-sm-2">
                <
a href="#" class="thumbnail home-thumb">
                    <
img src="images/pic4.jpg" alt="title">
                </
a>
            </
div>
            <
div class="col-sm-2">
                <
a href="#" class="thumbnail home-thumb">
                    <
img src="images/pic5.jpg" alt="title">
                </
a>
            </
div>
            <
div class="col-sm-2">
                <
a href="info_new.php" class="thumbnail home-thumb">
                    <
img src="images/pic6.jpg" alt="title">
                </
a>
            </
div>
        </
div
A BIG thank you to anyone that can get the code to work. ANY help is appreciated.
Zug is offline   Share thread on Digg Share thread on Twitter Share thread on Reddit Share thread on Facebook