ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

How to have large main video and smaller sub videos

November 15, 2012 10:18am

Subscribe [3]
  • #1 / Nov 15, 2012 10:18am

    Hi,
    Some of you know that I am working on a video tutorial site. This is also my first expression engine site and I need a little assistance in getting my videos to size. Currently I have channels set up for various content videos like AE, C4D, PS etc. (after effects, cinema 4d, and photoshop). I have all of the videos going to a main page and then pages for each video kind (such as an after effects page for just after effects videos).

    I have been using the embed code from vimeo to add some place holder videos. Right now my goal is to have a larger video which would be the most recent posted video and all of the other videos would be smaller below it. So I need some help in creating code for my videos to be large when they are first posted but then when I post a new tutorial the new video would be large and the previous video would be smaller. Would I create a tag for new videos and style that with CSS? Any help is appreciated, thanks a lot everyone!
    Chris

  • #2 / Nov 15, 2012 11:59am

    Boyink!

    5011 posts

    All the styling would be done with HTML and CSS.  The logic will be handled by EE.

    One way would be to use the count variable and a conditional inside the channel entries loop, and when count ==1 apply different HTML/CSS than when the count is not 1.

  • #3 / Nov 15, 2012 12:25pm

    When you post a new item in EE it gets a new number and that number is higher than previous posted content. So would I use the count variable to set up a formula that each changes the code to recognize a new video has been posted and update that number by one or is there a way to reverse the numbering system in EE so my most recent content is always the number 1?

  • #4 / Nov 15, 2012 12:26pm

    Boyink!

    5011 posts

    Disregard entry ids.

    The channel:entries tag still wears blogging underwear.  It’s default sort is newest entry is at the top. Unless you change the sort order the newest entry will always be #1 when using the count variable.

  • #5 / Nov 15, 2012 12:31pm

    Thank you so much for your help. So I should look into count variables and set that to a 1. Then I can create html/css formatting for anything that has a count of 1 and if it doesn’t it will default to the smaller videos I talked about. I guess my last question would be since on my main page I have all of the videos going into that will it recognize the newest post from all of those other areas as a 1 and then within each group it will recognize it as a 1 as well. So if I post an AE video it will appear as the main video on the main page. Then if I upload a C4D video on the main page the C4D video will be the main but if I go to the AE page the previous AE video is the main video b/c C4D is not set up to be on that page. Right?

  • #6 / Nov 15, 2012 12:39pm

    Boyink!

    5011 posts

    Sorry, you lost me.

    You don’t “set” the count variable. EE does as it’s iterating through the channel:entry loops.

    If you have category pages then EE will filter by category first and still have a count variable where 1 is the the most recent entry (unless you change the sort order).

  • #7 / Nov 15, 2012 1:02pm

    Ok I think you answered what I attempted to ask haha. This gives me a great starting point, so I will work with it for a while and see if I can get it to do what I need it to do. Thank you for your time and help, I appreciate it a lot!

  • #8 / Nov 16, 2012 11:29am

    I did some research last night on the {count} and also the {if count} content {/if}. Unfortunately they didn’t mention too much as to where I would put these at. Would they go between the channels tags? And if so, what kind of code would go between the {if count} tags. Would it matter if I created a new content using the embed code from vimeo and that has size restrictions in it?

  • #9 / Nov 16, 2012 11:32am

    Boyink!

    5011 posts

    Yes - the {count} variable does need to go in a channel:entries loop. That’s how it knows what to count. If you looked at the docs it appears in a list of many variables are all channel:entries variables. There are global variables as well that don’t need to go in a loop - but they are in a different area of the docs.

    What goes in the conditional is the markup you need.

    You basically don’t want to get vimeo markup that has sizing in it -  you want your EE template to decide that.

  • #10 / Nov 16, 2012 1:15pm

    Shane Eckert

    7174 posts

    Hey there reanimatedfallout,

    Is there anything else we can help you with?

    Cheers,

  • #11 / Nov 20, 2012 12:17pm

    Ok here is what I have done on my site. First off I added a {count} between the {exp:channels:entries} tags and above my tutorial tags as well. This is all done on the home pages index file/html.

    Then I went back into all of the entries and removed the width and height from the code I cut and pasted from vimeo.

    Then I went into my CSS doc and added

    .main_feature
    {if count ="1"}
    height: 400px;
    width: 740px;
    {/if)

    main _feature is the name of the div class that I have my {exp:channel:entires} in. So far the first or most recent post doesn’t have any size change, in fact all of the videos appear smaller now, which I am not worried about. Not sure what I am mixing up. Do I need to add a {count} to all of the specific channel tags I have within the
    {exp:channels:entries}? Thank you all so much for your assistance, you have no idea how much it means to me 😊

  • #12 / Nov 20, 2012 1:02pm

    Boyink!

    5011 posts

    I was thinking more along the lines of:

    - define two sizes in CSS:

    .video_large {}
    .video_small{}

    Etc- with all the properties set as needed.

    Then in your template do something of this nature:

    {exp:channel:entries channel="video" limit="10"}
    
    {if count==1}
    <div class="video_large">
    {/if}
    
    {if count !=1}
    <div class="video_small">
    {/if}
    
    {video_code}
    
    </div>
    {/exp:channel:entries}
  • #13 / Nov 20, 2012 2:22pm

    I made those edits and the videos are still the same size. However, I notice that if I adjust the code of the small and large video classes the spacing between the videos starts to change. So here is a copy of the embed link I have added in for posting videos. I removed the size parameters but is there something else that needs to be taken out?

    <iframe src=“http://player.vimeo.com/video/9200600?badge=0” frameborder=“0” webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

  • #14 / Nov 20, 2012 3:51pm

    Boyink!

    5011 posts

    Another thought -

    Store just the vimeo video numbers in your channel entry. Store the rest of the embed code in your template.

    Then you can use the conditional and count variables, and two sets of Vimeo embed code, and just replace the hardcoded video ids with your EE channel variables.

  • #15 / Nov 20, 2012 4:46pm

    Let me see if I understand this. So in the area when I create a new video use just the number of the video, in the link above it would be the 9200600. Then in the CSS doc where I have my div classes for large and small videos use the entire code and add in the width and height code as well? Does that sound right?

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases