Thread

Hi everyone,

Second thread for me so far on the forum, haha.  So I’ve been using EE for about two months now developing a site for a client and everything has gone pretty smooth so far.  I’m very comfortable with XHTML/CSS and only know a little bit of JavaScript & PHP for some background.  Here’s a few quick details for what I’m using:

EE Version 2.1.3
Build 20101220
PHP Version 5.3.6

To help me learn EE I’ve been reading / following along with Expression Engine 2 - A Quick-Start Guide by Ryan Irelan, this has been extremely helpful.

At this point I’m nearing completion of this 7 page site.  The blog has been fully set up and is working great, I’ve also added multiple other spots on the site that are pulling in content from custom fields from different channels.

What I have left is a videos page.  I have already made a template group for this that has 1 index template and 1 css template.

The layout is fairly simple.  On the left I have a div where the video will be playing.  On the right I have 3 divs in a vertical column that will contain links for the following:

1. Most Popular Videos
2. Video Channels
3. Recently Added Videos

I’d like for users to be able to click within any of these 3 lists and have the embedded video get swapped for whatever their choice was.

In addition, I’d like to have a small scrolling (horizontal) slideshow under the main video that will be displaying video thumbnails from whatever channel you are currently on.

I’ll also be setting up a YouTube account for my client so they will be able to add their own videos or pull in stuff from their favorites.

For an example, this page here is what gave me some direction.  I’m thinking something like this but a lot more simplified: http://www.clifbar.com/clif_bar_TV#meet_the_moment

I have been trying to figure out where to start or what to use.  I did come across the Video Player Add-On: http://duktee.com/addons/video-player

^Would this be something that could fit the bill for what I’m trying to do?  If so, does that mean that I would be able to pull in videos dynamically if they are entered in custom fields?

If anyone has some other sites that would be good examples of this let me know.  If not, any insight to where I should start would be great since I’ve never built a page like this before.

Thanks in advance,

-Jeff

Hi Jeff

Could we see a mockup of your layout? Can you outline how your content is divided into channels and categories?

I’ve been using Channel Videos from Devdemon recently: http://www.devdemon.com/channel_videos/

Matt

Yea sure.  I’m going to be out most of the day but I’ll try to get a simple wireframe of the layout posted up in the late afternoon.

Thanks for the suggestion for Devdemon, I’ll have to look into that too.

-Jeff

Ok so here is a sample image of what my template looks like, I can’t show the real template due to nda of course… but this is how its structured.

As far as channels and categories for the videos page, I haven’t set that up yet because I’m still not sure if I should just create multiple channels for the different videos or just create 1 videos channel and then add multiple categories to that.

To start, my client only needs to have 3 categories of videos (or channels if thats what I need) called Community, Planning, and On the Lighter Side.

Hopefully this generic image of my template will help.

So I installed the Channel Videos module from DevDemon last night.

I’ll try getting it working today and see how it goes.

Hi Jeff

I would create a single ‘video’ channel and categories within that.

Then you can render thumbnails from the same category using the Channel Categories Tag.

Personally I like to think of Channels as containers for a ‘type of content’, which helps a client to publish logically from the menu: Content > Publish > Video.

From your mockup I assume that other thumbnails would also appear in the right hand side margin (not just video (entry) titles)... which leads me to question how much the thumbnails beneath the main video are needed?

Objectively, if the ‘static text’ in your mockup relates to the video being watched, then (to me) the little thumbnails feel like a potential distraction?

(just throwing that out there…)

Hi Jeff

Just to add, we’ve used DevDemon’s Channel Videos on: http://www.mippr.co/mipeople (profile pages) and a site which we’re just about to publish for a church in the UK: http://nclc.bythepeople.co.uk (if not available, let me know)

For NCLC, the Channel Video is a custom field within an event. (event promo video)
for Mippr.co the Channel video custom field is part of the Profile Management profile pages (http://www.mippr.co/mipeople/alex-deane)

Hope it helps to see an example…

Hi Matt,

Thanks for your help and suggestions so far.

Luckily I did get channel videos working yesterday.  I created a video channel and added 3 categories to that, then made 1 field group with 1 custom field for channel videos.  In addition I have 1 custom status group for the video channel where I added the status of Featured Video.  This will be for when a user first hits the video page they will see whatever video my client wants them to.  All other videos will just have a status of open.

Not to forget, I ended up using 3 templates for this page (which look pretty much identical). 1 for when you first hit the “video” page from the main nav, 1 for when you are selecting what channel you want (using permalinks), and lastly 1 for when you click on recent videos or videos from a category (using permalinks).

Through trial and error, I did find out that the example code from DevDemon did not work which was this:

{exp:channel:entries channel="default_site"}
<h1>{title}</h1>    
{exp:channel_videos:videos entry_id="{entry_id}"}
<h3>{video:title}</h3>
<p>{video:embed_code}<br />
{/exp:channel_videos:videos}<br />
{/exp:channel:entries}

In the end, I used this code here for the Featured video and it works great. The h1 and h3 are removed because I don’t need them for what I’m doing.

{exp:channel:entries channel="videos" limit="1" status="Featured Video"}
{exp:channel_videos:videos entry_id="{entry_id}" embed_width="530" embed_height="323" prefix="cv"}
{cv:embed_code}
{/exp:channel_videos:videos}
{/exp:channel:entries}

Btw, the ‘static text’ (in my mockup) on the page is actually not related to the videos.  That is just an update that my client will revise that will appear on all 3 templates of my video template group.

I did change the layout a bit on the right. At the moment I have it set up so you can select what channel you want (technically categories I just have my h1 say Channels) and the list underneath will display all videos from that category.  When you click on a video title (entry title technically) it will reload the video to your choice.  Upon first hitting the video page you see a list of 6 of the most recent videos uploaded.  I haven’t tried doing the section displaying the most popular videos yet, I guess you would just base that upon the number of views?

My client still wants the video thumbnails (from each entry) to appear in a little slider underneath the video.  I see you mentioned that you can use the channel categories tag to do this.  Still need to give this a try.  Any possibility you could post up a snippet of your working code that displays the video thumbnails?

Even though development is nearly done, still looks like it will be another month until launch since I’m waiting on content from my client.  I’ll make sure to post up a link after the site is deployed.

Ok since there wasn’t much documentation on DevDemon about how to pull up the thumbnail for each video I had to figure it out myself.

Here is what I used for listing videos from each category.  This is a simple version, in mine I added the video title and duration to the bottom list item.

Make sure you put the {video:img_url} in the img src attribute like this src=”{video:img_url}”

{exp:channel:entries channel="videos" style="Nested" related_categories_mode="yes" disable="pagination" status="Open" custom_fields="yes" dynamic="no"}
{exp:channel_videos:videos entry_id="{entry_id}"}

<ul>
   
   {if no_results}<li>There are no related videos.</li>{/if}
   
   <li><a href="http://{title_permalink=">{video:img_url}</a></li>
   
</ul>

{/exp:channel_videos:videos}
{/exp:channel:entries}

Hope this will be helpful to others.

Well done mate, sorry for not getting back to you sooner.

Just on a side note. I noticed you mentioned “h1 say Channels” above… Try and keep the page topic in your <h1> tags. From an SEO point of view, it helps the engines know what each page is about. (but that’s a whole other thread)

Can’t wait to see your new site when it’s live!

Best

No worries Matt, appreciate all the help you’ve offered.

Still forging ahead.  Finally got a horizontal scrollbar set up underneath the video today that displays the video thumbnails as permalinks.

Hi Matt,

So the site relating to this thread was finally launch last month.

Just wanted to say thanks again for your help and give you a chance to see the finished product.

Its a community-based site for disaster preparation, response and training services in the S.F. Bay Area.

I’ll post an actual announcement thread on here shortly but for now here is the urls:

http://www.disasterguru.com/

And here is the videos page:

http://disasterguru.com/video

Well done Jeff, awesome stuff!