blog documentation FAQ followers forum marketplace services youtube

solved Putting videos and members into grid (site builder - combined video)

The Jamroom Network » Forum » Ning To Jamroom » Page » Putting videos and members into grid (site builder - combined video)
Deb W.
Deb W.
@deb-w
8 years ago
136 posts
Does anyone have the custom code for putting my videos into a grid with the title of each, rather than a long, long list of them? Strumelia, it looks like you did this on your site...

I'd appreciate the coding for using with site builder for that page or at least some tips.

Thanks!
Deb

PS this discussion thread also includes a discussion about changing the coding for the member page as well.... so I updated the title of the thread.
updated by @deb-w: 01/24/17 03:45:43PM
Deb W.
Deb W.
@deb-w
8 years ago
136 posts
Same question, Strumelia, for your members page....
alt=
LesRinchen
@lesrinchen
8 years ago
109 posts
If I correctly understand what you're asking, Deb, you don't need any custom code. When you add an Item List widget with Site Builder, you select the list module (Videos or Profiles for your question). Then under List Options, click on Template to get your layout options. You can choose grids with various numbers of columns as you like. Hope this helps!
Deb W.
Deb W.
@deb-w
8 years ago
136 posts
LesRinchen:
If I correctly understand what you're asking, Deb, you don't need any custom code. When you add an Item List widget with Site Builder, you select the list module (Videos or Profiles for your question). Then under List Options, click on Template to get your layout options. You can choose grids with various numbers of columns as you like. Hope this helps!

I don't get the options I want if I am doing a combined list (vimeo and youtube). I only get a choice between default and custom. Thanks!
michael
@michael
8 years ago
7,746 posts
What do you have selected in the TEMPLATE field of the widget you are using?

--edit--
Try this in the TEMPLATE section after you select CUSTOM for the "Item List (combined)" with YOUTUBE, VIDEO, VIMEO selected as options.

{if isset($_items)}
    {jrCore_module_url module="jrVideo" assign="murl"}
    {jrCore_module_url module="jrVimeo" assign="vmurl"}
    {jrCore_module_url module="jrYouTube" assign="ymurl"}
    <div class="container">
        {foreach $_items as $item}

            {if $item@first || ($item@iteration % 3) == 1}
                <div class="row" style="margin: 20px 0">
            {/if}
            <div class="col4">
                {if $item.seamless_module_name == "jrVideo"}
                    <div class="container">
                        <div class="row">
                            <div class="col4">
                                <div class="block_image">
                                    <a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.video_title|jrCore_url_string}">{jrCore_module_function function="jrImage_display" module="jrVideo" type="video_image" item_id=$item._item_id size="large" crop="auto" class="iloutline img_scale" alt=$item.video_title width=false height=false}</a>
                                </div>
                            </div>
                            <div class="col8">
                                <div class="p5">
                                    <h3><a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.video_title|jrCore_url_string}">{$item.video_title}</a></h3><br>
                                    <span class="info"><a href="{$jamroom_url}/{$item.profile_url}">@{$item.profile_name}</a></span>
                                    <br>
                                    <small>{$item._created|jrCore_format_time:false:"relative"} - Comments: {$item.video_comment_count|default:0}</small>
                                    {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}
                                </div>
                            </div>
                        </div>
                    </div>
                {elseif $item.seamless_module_name == "jrVimeo"}
                    <div class="container">
                        <div class="row">
                            <div class="col4">
                                <div class="block_image">
                                    <a href="{$jamroom_url}/{$item.profile_url}/{$vmurl}/{$item._item_id}/{$item.vimeo_title_url}"><img src="{$item.vimeo_artwork_url}" class="iloutline img_scale"></a>
                                </div>
                            </div>
                            <div class="col6">
                                <div class="p5">
                                    <h3><a href="{$jamroom_url}/{$item.profile_url}/{$vmurl}/{$item._item_id}/{$item.vimeo_title_url}">{$item.vimeo_title}</a></h3><br>
                                    <span class="info"><a href="{$jamroom_url}/{$item.profile_url}">@{$item.profile_name}</a><br></span>
                                    <small>{$item._created|jrCore_format_time:false:"relative"} - Comments: {$item.vimeo_comment_count|default:0}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                {elseif $item.seamless_module_name == "jrYouTube"}
                    <div class="container">
                        <div class="row">
                            <div class="col4">
                                <div class="block_image">
                                    <a href="{$jamroom_url}/{$item.profile_url}/{$ymurl}/{$item._item_id}/{$item.youtube_title_url}"><img src="{$item.youtube_artwork_url}" alt="{$item.youtube_title|jrCore_entity_string}" class="iloutline img_scale"></a>
                                </div>
                            </div>
                            <div class="col8">
                                <div class="p5">
                                    <h3><a href="{$jamroom_url}/{$item.profile_url}/{$ymurl}/{$item._item_id}/{$item.youtube_title_url}">{$item.youtube_title}</a></h3><br>
                                    <span class="info"><a href="{$jamroom_url}/{$item.profile_url}">@{$item.profile_name}</a><br></span>
                                    <small>{$item._created|jrCore_format_time:false:"relative"} - Comments: {$item.youtube_comment_count|default:0}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                {/if}
            </div>
            {if $item@last || ($item@iteration % 3) == 0}
                </div>
            {/if}

        {/foreach}
    </div>
{/if}

That will put 3 per row. adjust the ($item@iteration % 3) parts to a different number if you want a different amount.
updated by @michael: 10/25/16 07:18:23PM
Deb W.
Deb W.
@deb-w
8 years ago
136 posts
That was just perfect! Thank you so much, Michael!
Deb W.
Deb W.
@deb-w
8 years ago
136 posts
So is there magic code for the Members page that would do something similar? I want to have the member photos with their names under the photos in a grid of six across. If I use the standard options in the Sage skin, I can have either a long list with names, or a grid with no names... neither of which is what I want.
Deb W.
Deb W.
@deb-w
8 years ago
136 posts
So Derrick, I'm not clear where I put the long string of coding you posted.... Is that on the Members page (assuming that I'm using Site Builder and I'm on my Member page, where I open the widget I added to the page and click on Custom template.)

Or do I put that somewhere else and just add that last bit you gave me on the actual page using Site builder? ("using this to add it to the page in the template code editor").
Deb W.
Deb W.
@deb-w
8 years ago
136 posts
I'll keep messing around with it... I tried just putting that code into site builder and got huge profile photos - our members look too scary that large LOL.
Deb W.
Deb W.
@deb-w
8 years ago
136 posts
This isn't working for me... probably user error since I have absolutely no training in coding.

What I want to do is use site builder to add a widget that uses the template Widget List Grid 6 with just one change - the names of the members show up under their profile pictures. I've tried messing around with widget_list_grid_6.tpl in the template for profiles, but since I have really no idea what I'm doing....

Thanks Derrick for trying to help me out.... Any other ideas for me?
Deb W.
Deb W.
@deb-w
8 years ago
136 posts
Oh so close!!! you're going to think I'm so picky. It did add the names but they are above the profile photos, not below. Any tweaks you suggest to move them below the photos?

Deb
PS you are fabulous!
Deb W.
Deb W.
@deb-w
8 years ago
136 posts
:-) Thanks Derrick - centering it is good too... but still would be nice to have it under the photo. Anyone else out there who can rescue me and Derrick?

(By the way, Derrick, the last directions you gave me to add the names worked great - easy for someone like me to figure out how to do!)
Deb W.
Deb W.
@deb-w
8 years ago
136 posts
This may sound wimpy, but can you highlight where it should be, like you did last time?
Deb W.
Deb W.
@deb-w
8 years ago
136 posts
I am doing a happy dance!!! Yay for you, my new best friend. It looks beautiful. Remind me to buy you a beer if we are ever in the same place at the same time. :-)
Deb W.
Deb W.
@deb-w
8 years ago
136 posts
derrickhand300:
Are you noticing that some member photos are not conforming to the proper size? Maybe someone can tell us how to fix that...I have never been able to
I will add a screenshot that shows my problem

I'm not having that problem. But our members aren't very creative with their photos...
Strumelia
Strumelia
@strumelia
8 years ago
3,603 posts
I have this in my SKIN's : jrProfile_item_list.tpl (hoping I have the right template you guys are wanting...I don't use SiteBuilder) :
<div class="item">
    <div class="container">
        {if isset($_items)}
        {foreach from=$_items item="item"}

            {if $item@first || ($item@iteration % 6) == 1}
            <div class="row">
            {/if}
                <div class="col2{if $item@last || ($item@iteration % 6) == 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 % 6) == 0}
            </div>
            {/if}

        {/foreach}
        {/if}
    </div>
</div>

That gives me this: http://fotmd.com/profile

Curtis- notice the code has 'size' and 'crop' for the images. Also that 'name' is centered, and comes after the image.



--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
updated by @strumelia: 10/26/16 02:04:01PM
Strumelia
Strumelia
@strumelia
8 years ago
3,603 posts
When people are using SiteBuilder, I never know whether my posts might actually be helpful, or maybe they'd just confuse things even more. I never tried SB (it was still in beta for a long time while I was making my site).. and at this stage of the game SB might change up my site and mean a whole new learning curve for me.


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
Deb W.
Deb W.
@deb-w
8 years ago
136 posts
Strumelia:
When people are using SiteBuilder, I never know whether my posts might actually be helpful, or maybe they'd just confuse things even more. I never tried SB (it was still in beta for a long time while I was making my site).. and at this stage of the game SB might change up my site and mean a whole new learning curve for me.

This is great - it worked like a charm with Site builder. I just changed the Profile list template in the Profile module, then went to the page, used site builder and chose the profile list there.

Derrick, I think this help with the spacing between the photos.
Strumelia
Strumelia
@strumelia
8 years ago
3,603 posts
Oh, and here I was not posting on this thread 'cause I thought my suggestion would not work for anyone using SiteBuilder. So it worked fine, Deb?

Do you have your (combined) /video page grid the way you want it as well?


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
Deb W.
Deb W.
@deb-w
8 years ago
136 posts
Strumelia:
Oh, and here I was not posting on this thread 'cause I thought my suggestion would not work for anyone using SiteBuilder. So it worked fine, Deb?
Do you have your (combined) /video page grid the way you want it as well?

I got the video page working beautifully thanks to Michael. And your ideas are ALWAYS helpful!!!