Does anyone have the code to do a grid layout of videos-images-etc?

@derrickhand300
10 years ago
1,353 posts

I am using Slate Skin and I am looking for the code to do a grid layout of combined videos ( youtube-vimeo and site videos)
Attached is a screenshot of how i would like the videos to look

updated by @derrickhand300: 08/01/15 11:28:06PM

Strumelia
@strumelia
10 years ago
3,605 posts

Curtis, here is a screenshot of my site's "mysite/video" page, which combines all vids together (uploaded/vimeo/youtube). (currently fixing an issue with youtube vids showing an incorrect comment count of zero, but that will be fixed soon). You get the idea.
If you like how mine is set up, I'd be happy to let you use what you need from my code. Michael helped me a few months ago with setting up this combined grid layout, and I would be fine with him sharing my code for that with you. Then you could tweak it to your needs. Let me know if this is what you are looking for.

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
updated by @strumelia: 06/23/15 10:03:02AM

@derrickhand300
10 years ago
1,353 posts

Yes-THANK YOU
Thats exactlly what I am after

Strumelia
@strumelia
10 years ago
3,605 posts

Just don't use my site design & colors....lol!

Since Michael helped me set it up, im not sure where/which code exactly you need. But if you contact Michael, show him this thread and maybe he can pull the code you need from my /video page or whatever module/skin it needs to be pulled from? I mean the code to produce the combined /video page grid in my screenshot above...not all my skin or site code obviously... ;D
The code producing my /video page might be scattered in more than one place... for example I notice you have 'like' stars and I have comments instead, so there will be conflicts and adjustments to make, but maybe it can help you and I'm willing, just not exactly sure on how to share it.

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

@michael
10 years ago
7,799 posts

This is the basic code for a 3 column layout like that one made off of a item list loop:

    <div class="container">
    {foreach $_items as $item}

        {if $item@first || ($item@iteration % 3) == 1}
            <div class="row">
        {/if}
        <div class="col4">
            WHAT EVER YOU WANT IN HERE
        </div>
        {if $item@last || ($item@iteration % 3) == 0}
            </div>
        {/if}

    {/foreach}
    </div>

The resulting set you will get when it is output will look like this

<div class="container">
    <div class="row">
        <div class="col4">
            WHAT EVER YOU WANT IN HERE
        </div>
        <div class="col4">
            WHAT EVER YOU WANT IN HERE
        </div>
        <div class="col4">
            WHAT EVER YOU WANT IN HERE
        </div>
    </div>
    <div class="row">
        <div class="col4">
            WHAT EVER YOU WANT IN HERE
        </div>
        <div class="col4">
            WHAT EVER YOU WANT IN HERE
        </div>
        <div class="col4">
            WHAT EVER YOU WANT IN HERE
        </div>
    </div>    
</div>

If you want the full .tpl file that strumelia is using, its attached in the .zip file. (without the design and colors, just the structure code.) I'll try to get this structure worked into Site Builder soon.

updated by @michael: 06/23/15 11:45:43PM

@michael
10 years ago
7,799 posts

And the code to call that template is:

{jrSeamless_list modules="jrAudio,jrSoundCloud" order_by="_created numerical_desc" pagebreak=60 page=$_post.p pager=true template="combined_audio_list.tpl"}

@derrickhand300
10 years ago
1,353 posts

Thank you both
is there some sort of cSS required with this to make it layout in a grid?

Strumelia
@strumelia
10 years ago
3,605 posts

Great! I had asked for this specific combined layout and requested the stuff included in the grid items, and sizing, ...and Michael then kindly pulled the code together for me. Glad to hear the code will be made available to other ning and site builder users for the future!
I think the result is really uncluttered, useful, and elegant.

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

@michael
10 years ago
7,799 posts

derrickhand300:
Thank you both
is there some sort of cSS required with this to make it layout in a grid?

Try it first, see what it looks like, if it doesn't look right, ask the question again. It should work with any of the jamroom skins without additional CSS.

@derrickhand300
10 years ago
1,353 posts

Here is what I have put together but still getting a single column
Here is what I have put together- but still getting a single column layout

   <div class="container">
    {foreach $_items as $item}

        {if $item@first || ($item@iteration % 3) == 1}
            <div class="row">
        {/if}
        <div class="col4">
                                <div class="img-profile">
                            {if $item.seamless_module_name == "jrYouTube"}
                            <a href="{$jamroom_url}/{$item.profile_url}/youtube/{$item._item_id}/{$item.video_title_url}"> <img src="{$item.youtube_artwork_url}" class="rank_image"width=240 height=180 /></a>
                            {elseif $item.seamless_module_name == "jrVimeo"} <a href="{$jamroom_url}/{$item.profile_url}/vimeo/{$item._item_id}/{$item.video_title_url}"> <img src="{$item.vimeo_artwork_url}" class="rank_image"width=240 height=180 /></a>
                            <a href="{$jamroom_url}/{$item.profile_url}/video/{$item._item_id}/{$item.video_title_url}">{jrCore_module_function function="jrImage_display" module="jrVideo" type="video_image" _id=$item._item_id size="large" crop="auto" alt=$item.video_title title=
$item.video_title class="top_rank" width=240 height=180}</a>
                            {/if}
                        </div>
                        <div class="center mb10">
                            {if $item.seamless_module_name == "jrYouTube"}
                            <a href="{$jamroom_url}/{$item.profile_url}/youtube/{$item._item_id}/{$item.youtube_title}">{$item.youtube_title|truncate:24}</a>
                            <a href="{$jamroom_url}/{$item.profile_url}/{$_params.module_url}/{$item._item_id}/{$item.vimeo_title}">{$item.vimeo_title|truncate:24}</a>
                            {elseif $item.seamless_module_name == "jrVimeo"}
                            <a href="{$jamroom_url}/{$item.profile_url}/vimeo/{$item._item_id}/{$item.vimeo_title}">{$item.vimeo_title|truncate:24} {elseif $item.seamless_module_name == "jrVideo"}<a href="{$jamroom_url}/{$item.profile_url}/video/{$item._item_id}/{$item.video_title_url}">{$item.video_title|truncate:24}</a>
                                {/if}
                                <br>
                                {if $item.seamless_module_name == "jrYouTube"}
                                {jrCore_module_function function="jrRating_form" type="star" module="jrYouTube" index="1" item_id=$item._item_id current=$item.youtube_rating_1_average_count|default:0 votes=$item.youtube_rating_1_count|default:0}
                                {elseif $item.seamless_module_name == "jrVimeo"}
                                {jrCore_module_function function="jrRating_form" type="star" module="jrVimeo" index="1" item_id=$item._item_id current=$item.vimeo_rating_1_average_count|default:0 votes=$item.vimeo_rating_1_count|default:0}
                                {elseif $item.seamless_module_name == "jrVideo"}
                                {jrCore_module_function function="jrRating_form" type="star" module="jrVideo" index="1" item_id=$item._item_id current=$item.video_rating_1_average_count|default:0 votes=$item.video_rating_1_count|default:0}
                                {/if}
                        </div>
                    </div>
        </div>
        {if $item@last || ($item@iteration % 3) == 0}
            </div>
        {/if}

    {/foreach}
    </div>
 {jrSeamless_list modules="jrVideo,jrVimeo,jrYouTube" order_by="_created numerical_desc"  pagebreak=28 page=$_post.p pager=true template=$tpl}

@michael
10 years ago
7,799 posts

Your missing the Capture if you want to put both parts in the same .tpl file.

Eg: if you put this in a file called 'junk.tpl', then go to your-site.com/junk It will show as a grid:

{jrCore_include template="header.tpl"}

{capture name="template" assign="tpl"}
{literal}
    <div class="container">
        {foreach $_items as $item}
        {if $item@first || ($item@iteration % 3) == 1}
        <div class="row">
            {/if}
            <div class="col4">
                <div class="img-profile">
                    {if $item.seamless_module_name == "jrYouTube"}
                    <a href="{$jamroom_url}/{$item.profile_url}/youtube/{$item._item_id}/{$item.video_title_url}">
                        <img src="{$item.youtube_artwork_url}" class="rank_image" width=240 height=180/></a>
                    {elseif $item.seamless_module_name == "jrVimeo"}
                    <a href="{$jamroom_url}/{$item.profile_url}/vimeo/{$item._item_id}/{$item.video_title_url}">
                        <img src="{$item.vimeo_artwork_url}" class="rank_image" width=240 height=180/></a>
                    <a href="{$jamroom_url}/{$item.profile_url}/video/{$item._item_id}/{$item.video_title_url}">{jrCore_module_function function="jrImage_display" module="jrVideo" type="video_image" _id=$item._item_id size="large" crop="auto" alt=$item.video_title title=
                        $item.video_title class="top_rank" width=240 height=180}</a>
                    {/if}
                </div>
                <div class="center mb10">
                    {if $item.seamless_module_name == "jrYouTube"}
                    <a href="{$jamroom_url}/{$item.profile_url}/youtube/{$item._item_id}/{$item.youtube_title}">{$item.youtube_title|truncate:24}</a>
                    <a href="{$jamroom_url}/{$item.profile_url}/{$_params.module_url}/{$item._item_id}/{$item.vimeo_title}">{$item.vimeo_title|truncate:24}</a>
                    {elseif $item.seamless_module_name == "jrVimeo"}
                    <a href="{$jamroom_url}/{$item.profile_url}/vimeo/{$item._item_id}/{$item.vimeo_title}">{$item.vimeo_title|truncate:24} {elseif $item.seamless_module_name == "jrVideo"}
                        <a href="{$jamroom_url}/{$item.profile_url}/video/{$item._item_id}/{$item.video_title_url}">{$item.video_title|truncate:24}</a>
                        {/if}
                        <br>
                        {if $item.seamless_module_name == "jrYouTube"}
                        {jrCore_module_function function="jrRating_form" type="star" module="jrYouTube" index="1" item_id=$item._item_id current=$item.youtube_rating_1_average_count|default:0 votes=$item.youtube_rating_1_count|default:0}
                        {elseif $item.seamless_module_name == "jrVimeo"}
                        {jrCore_module_function function="jrRating_form" type="star" module="jrVimeo" index="1" item_id=$item._item_id current=$item.vimeo_rating_1_average_count|default:0 votes=$item.vimeo_rating_1_count|default:0}
                        {elseif $item.seamless_module_name == "jrVideo"}
                        {jrCore_module_function function="jrRating_form" type="star" module="jrVideo" index="1" item_id=$item._item_id current=$item.video_rating_1_average_count|default:0 votes=$item.video_rating_1_count|default:0}
                        {/if}
                </div>
            </div>
            {if $item@last || ($item@iteration % 3) == 0}
        </div>
        {/if}
        {/foreach}
    </div>
{/literal}
{/capture}

{jrSeamless_list modules="jrVideo,jrVimeo,jrYouTube" order_by="_created numerical_desc"  pagebreak=28 page=$_post.p pager=true template=$tpl}

{jrCore_include template="footer.tpl"}

solved Does anyone have the code to do a grid layout of videos-images-etc?

Tags