solved Help making a grid layout template

derrickhand300
@derrickhand300
10 years ago
1,353 posts
I have the following template code on one site- I use the code to make the profiles page display profile images in a grid that is 4 images wide and 36 or so on a page

   <!--members_page_photos.tpl -->
   <div class="item">
    <div class="container">
        {if isset($_items)}
        {foreach from=$_items item="item"}
            {if $item@first || ($item@iteration % 4) == 1}
        <div class="row">
        {/if}
            <div class="col-lg-3{if $item@last || ($item@iteration % 4) == 0} last{/if}">
                <div class="img-profile">
                    <a href="{$jamroom_url}/{$item.profile_url}">{jrCore_module_function function="jrImage_display" module="jrProfile" 

type="profile_image" item_id=$item._profile_id size="medium" crop="portrait" class="iloutline img_scale" alt=$item.profile_name title=

$item.profile_name}</a>
                </div>
                <div class="center mb10">
                  <a href="{$jamroom_url}/{$item.profile_url}" class="media_title">@{$item.profile_name}</a>
                </div>
            </div>
            {if $item@last || ($item@iteration % 4) == 0}
        </div>
        {/if}
            {/foreach}
        {/if}
    </div>
</div>
    <!--members_page_photos.tpl -->
When I add this code to a different site I am only getting 1 single column of very large images?

Here is the code I am using to include the template on the page

<div class="block">
    <div class="title">
       <div style="float:right; margin-right: 0px; margin-top: 0px;">{jrSearch_form class="form_text" value="Search Profiles" module="jrProfile" fields="profile_name,profile_url" }</div>
        <h2 style=" margin-left:12px;">Search Our Members</h2>
    </div></div></div>
<br></br>
<br></br>
    <div class="block_content">
        {jrCore_list module="jrProfile" order_by="_item_id desc" search1="profile_active = 1" pagebreak="36" page=$_post.p pager=true template="members_page_photos.tpl"}

    </div>

I was wondering if anyone would suggest to me why I am getting different results and how to correct it?
Thank you!
updated by @derrickhand300: 02/14/16 10:49:37PM
derrickhand300
@derrickhand300
10 years ago
1,353 posts
Here is a link to where the code works and the profile layout I am after- http://drillingahead.com/members
Here is a link to the site where I placed the code hoping for the same layout ( but just a single column)- http://sayreeagles.net/profile
douglas
@douglas
10 years ago
2,802 posts
The class col-lg-3 is not a Jamroom CSS class. Is that something you added?


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
derrickhand300
@derrickhand300
10 years ago
1,353 posts
Thanks Douglas- yes its something I added...I just changed the template code to this
   <!--members_page_photos.tpl -->
    
   <div class="item">
    <div class="container">
        {if isset($_items)}
        {foreach from=$_items item="item"}
            {if $item@first || ($item@iteration % 36) == 1}
        <div class="row">
        {/if}
            <div class="col12"{if $item@last || ($item@iteration % 4) == 0} last{/if}">
                <div class="img-profile">
                    <a href="{$jamroom_url}/{$item.profile_url}">{jrCore_module_function function="jrImage_display" module="jrProfile" type="profile_image" item_id=$item._profile_id size="medium" crop="portrait" class="iloutline img_scale" alt=$item.profile_name title=$item.profile_name}</a>
                </div>
                <div class="center mb10">
                  <a href="{$jamroom_url}/{$item.profile_url}" class="media_title">@{$item.profile_name}</a>
                </div>
            </div>
            {if $item@last || ($item@iteration % 4) == 0}
        </div>
        {/if}
            {/foreach}
        {/if}
    </div>
</div>
    <!--members_page_photos.tpl -->
but its still displaying the same :(
derrickhand300
@derrickhand300
10 years ago
1,353 posts
Actually just changed the 12 column to 3 in the above snippet and it works! Thanks a million man-I would have never got it without you :)
updated by @derrickhand300: 11/12/15 12:29:42PM
douglas
@douglas
10 years ago
2,802 posts
Glad you figured it out. ;)


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

Tags