Current status of the Ning Platform is always available on the Ning Status Blog.

This was mentioned by Anam in the 2017 plan post so thought I would write this up as a temp fix until Ning adds this option.

Ok so when we add items to a page like say Latest Photos or Latest Discussions etc we have the chance to select how many we want to display in the module, now for videos we do not get this option so here is a little bit off CSS to limit those videos to how many you want to display.

By default it only lists 8 anyway but if you just want to show less you can do.

First a little about the code as it may look a bit odd, we are going to use the n+ in css which is the nth-child formula. So let's say we want to only display 2 videos and in this case we would write .section-videoBundle li.matrix-itemFluid.photoListPage-entry:nth-child(n+3){ display:none } . Now look and you will see it says n+3 not n+2, this is because the bundle itself is part of this so that would count as one, so that plus the two video equals 3. Now anything after 3 is set to display none.

So let's say you want only four to show you would then add n+5. So the easy way to work it out is just add 1 to how many you want to display.

DEMO HERE: http://bizzssite.ning.com/demo-page

So here is a few options of how to add it to your site. This is all just css so add it to your design studio css.

Set a default value site wide to only show two videos ( just edit the amount for what you want to display )

.section-videoBundle li.matrix-itemFluid.photoListPage-entry:nth-child(n+3){ display:none }

Set a value by a particular page. We just need to add a page name before the code so you could have many of these lines set with different amount on different pages.

I have a demo page to show this so I am going to use that and it's just called demo page, so you can see I just added the page name to it

.page-demo-page .section-videoBundle li.matrix-itemFluid.photoListPage-entry:nth-child(n+3){ display:none }

So if I wanted a different amount on let's say a photo page and it was called photos I could write this

.page-photos .section-videoBundle li.matrix-itemFluid.photoListPage-entry:nth-child(n+5){ display:none }

You can also use the columns to set the amounts so let's say you want to limit the videos to only show two videos in the small column on the side of a page. We would just write this

.column-narrow .section-videoBundle li.matrix-itemFluid.photoListPage-entry:nth-child(n+3){ display:none }

Or for the wide column

.column-wide .section-videoBundle li.matrix-itemFluid.photoListPage-entry:nth-child(n+3){ display:none }

Or the single full width page ( no columns )

.span16 .section-videoBundle li.matrix-itemFluid.photoListPage-entry:nth-child(n+3){ display:none }

Again we can add page names before these lines of code to only use the code for that page.

So let's take my demo page as an example http://bizzssite.ning.com/demo-page

In the big column I have two videos showing and here is the line of code for that

.page-demo-page .column-wide .section-videoBundle li.matrix-itemFluid.photoListPage-entry:nth-child(n+3){ display:none }

And in the small column to the right I have four videos showing from a category of Star Wars and here is the code for that

.page-demo-page .column-narrow .section-videoBundle li.matrix-itemFluid.photoListPage-entry:nth-child(n+5){ display:none }

So I hope that has helped in some way

John :-)

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

  • Wow. You really know your stuff. I went back as a mature student to do a degree in media studies over the past few years and one of our modules was coding Apps. It was (and remains for me)  ''a riddle, wrapped in a mystery, inside an enigma''..... Thanks a million John, for this and all your tips and help.

    • Your most welcome and glad to be of help. Well I have a good library of books for research, rather than try to read everything and learn it all at once I complete what I know then when there is something to figure out I research, then a bit of trial an error until I get it right, now I would know how to do that next time and so on, then the knowledge all builds up gradually. I am quite tenacious and will keep at something until I figure it out which can lead to some very late nights LOL. I never knew anything about CSS or Jquery when I first started using Ning, I can remember putting out a post about how can I move the chat up 20px from the bottom of the page! Come a long way since then though. Everything I learnt has been self taught and also with the help of other Creators on here. That's what I love about this site is everyone is willing to take some time out of their day to help others.

      I did have knowledge of other coding as used to create Database applications and I think that helped me pick up the other coding a bit more easily and a logical way of thinking.

      Code is just a language like a spoken language, looks a bit weird to start with but then you get to be able to read it the more you do it, so if you wanted to learn say a language like Spanish you would not be able to read it straight away but over time you would and it would become easier as you go along because you have learnt words and then you build up the knowledge of that language.

      The key is patience and when things don't work that is a good thing as it makes you figure out how to make it work and so your understanding grows and along the way you might come accross something unexpected that would work for something else.

      Anyway enough of my rambling lol and hope the codes work out for you, if you get stuck feel free to let me know so I can help you out.

      John :-)

      • Thanks again. Coding is a huge area from what I can make out; to be honest I just learned exactly what I needed to complete my module and I'm sure I have forgotten it all now. But when something works, it does feel really good :) a real buzz. Even to change colours the first time feels great. I can see how people can get really into it. Nerve-wracking too, as I am always afraid to explode the internet if i do something wrong! It is really a great thing about this site that people are so willing to give some of their time and help others out. It always feels kind of awesome that invisible strangers can be so kind. The excellent side of the internet. :)

  • Hi John does it take time to work i tried the code but the video width stays the same.

    http://brainwavefusion.com/VIDEO/aramide-why-so-serious-official-vi...

    Love how it looks on your page with the wide look. http://bizzssite.ning.com/videos-page/distinguished-gentlemans-ride...

    Aramide - Why So Serious (Official Video) starring Lota Chukwu & Minjin
    Aramide has delighted her fans with the release of a new video for her single, Why So Serious, a song off her debut album "SUITCASE" The video was sh…
    • Hi Dan

      The above code is for not changing the size of the videos, it's to be able to limit the amount of videos displayed when using the add content option.

      To make the videos bigger and responsive you need to use this code

      Make your videos responsive

      And then use some css to adjust the columns of the page found here

      Adjust the columns widths of video page

      Thanks by the way thanks for the comment of my site

      John :-)

      Make Your Videos In The New Video Feature Responsive ( updated: 30-03-17 )
      UPDATED Note this is now the new code as the uploaded videos are not in an iframe the first part was affecting the layout slightly for the uploaded v…
This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

LEO Mobile App Builder updated their profile
Tuesday
Aase Lillian replied to Aase Lillian's discussion
Community - activity page
"Ok, thank you. Please send me details as I have no idea on how to do it. "
Mar 19
Aase Lillian and ⚡JFarrow⌁ are now friends
NC for Hire
Mar 19
⚡JFarrow⌁ updated their profile photo
Mar 18
⚡JFarrow⌁ replied to Aase Lillian's discussion
Community - activity page
"Yes you can add emojis to your community pretty much anywhere you like.
If you need some help…"
Mar 18
Aase Lillian updated their profile
Mar 18
Aase Lillian posted a discussion
Hi all. Is it possible to add emojis to the community? I also wish the activity page to include…
Mar 18
Donna MacShoe updated their profile photo
Mar 6
Adul Rodri is now friends with ANGE.L LUAR and Margarida Maria Madruga
Feb 14
Shweta Sharma updated their profile
Jan 26
catherine martin updated their profile
Jan 16
Donna MacShoe updated their profile photo
Jan 15
More…

Meanwhile, you can check our social media channels