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

The other day I posted a tip for adding some buttons for adding content in the activity feed, the photo and video buttons was using one of each of the modules add buttons so was a bit restrictive if you had more than one instance of them so here is another way so if you have more than one photo page and video page you can have the member choose which to add the content to.

Below is and example of the new add media button and also showing once clicked the modules which show up. I added a few pages of each so you can see how it looks when you add a few of the modules.

4342119118?profile=RESIZE_710xAnd when the +Media button is clicked it show this

4342128843?profile=RESIZE_710xSo now the member can choose which page they want to add them too.

How this works is we use the add content feature to add the pages we want making use of the new Add Photo / Video buttons ning have added, we are just keeping the top part and hiding the image below it. As you can see in the picture we can still add content into the other columns as normal.

How we set this up is we go to our sites and pages and use the add content to add the modules we want and place them above the activity so we can see which we have added, make sure the box for hiding the add button is un-checked. You can see below I have added an image to show how I added mine for the above demo pics.

PLEASE NOTE: The code will add the photo and video bundles you add to the column you have chosen to use the code for. Below is two sets of code, one for if you have your activity in the wide column and the other if you have your activity in the side narrow columns. Please choose the code you want for your column.

Here is an image of how mine is set up

4342185857?profile=RESIZE_710x4296473386?profile=RESIZE_710xSo here is the codes

WIDE COLUMN CODE

CSS which goes in your design studio custom css

.js-statusForm > .pullright-photo{
float: none!important;
width: 100%;
clear: both;
text-align: right;
margin-bottom: 10px;
}
.isActivityPage .column-wide .section-photoBundle, .isActivityPage .column-wide .section-videoBundle{ display:none }
.photoChoice .grid-frame{ width:50%; display:inline-block!important;}
.photoChoice .module-body, .photoChoice .module-footer{ display:none }


a.OpenStatusAddPhoto-more{
margin-right: 10px;
background-color: #f2eeee;
padding: 7px;
}
a.OpenStatusAddPhoto-more:hover{
background-color:royalblue;
color:white;
cursor:pointer;
}

CUSTOM CODE which goes in your Social Site Builder > Custom Code > End Of Page

<script>
x$('<a class="OpenStatusAddPhoto-more" title="Add Media">+ Media</a>').insertBefore('.js-statusForm .pull-right .button.button-primary');
</script>

<script>
x$(document).ready(function() {
x$('.section-activity, .section-member-activity').closest('body').addClass('isActivityPage');
});
</script>

<script>
x$(document).ready(function() {
x$('<div/>',{ class : 'photoChoice'}).appendTo('.js-statusForm.statusForm').hide();
x$('.isActivityPage .column-wide .section-photoBundle,.isActivityPage .column-wide .section-videoBundle').hide();
x$('.isActivityPage .column-wide .section-photoBundle').appendTo('.photoChoice');
x$('.isActivityPage .column-wide .section-videoBundle').appendTo('.photoChoice');
});
</script>

<script>
x$("a.OpenStatusAddPhoto-more").toggle(
function(){
x$('.js-statusForm .pull-right').addClass('pullright-photo');
x$('.isActivityPage .column-wide .section-photoBundle').show();
x$('.isActivityPage .column-wide .section-videoBundle').show();
x$('.isActivityPage .column-wide .photoChoice').slideDown(500);
},
function(){
x$('.photoChoice').slideUp(500);
x$('.isActivityPage .column-wide .section-photoBundle').hide();
x$('.isActivityPage .column-wide .section-videoBundle').hide();
});
</script>

 

NARROW COLUMNS ie Side Columns

CSS into your design studio custom css

.js-statusForm > .pullright-photo{
float: none!important;
width: 100%;
clear: both;
text-align: right;
margin-bottom: 10px;
}
.isActivityPage .column-narrow .section-photoBundle, .isActivityPage .column-narrow .section-videoBundle{ display:none }
.photoChoice .grid-frame{ width:50%; display:inline-block!important;}
.photoChoice .module-body, .photoChoice .module-footer{ display:none }
.isActivityPage .column-narrow .photoChoice .grid-frame { width:100%; display:block!important;}


a.OpenStatusAddPhoto-more{
margin-right: 10px;
background-color: #f2eeee;
padding: 7px;
}
a.OpenStatusAddPhoto-more:hover{
background-color:royalblue;
color:white;
cursor:pointer;
}

 

CUSTOM CODE which goes in your Social Site Builder > Custom Code > End Of Page

<script>
x$('<a class="OpenStatusAddPhoto-more" title="Add Media">+ Media</a>').insertBefore('.js-statusForm .pull-right .button.button-primary');
</script>

<script>
x$(document).ready(function() {
x$('.section-activity, .section-member-activity').closest('body').addClass('isActivityPage');
});
</script>

<script>
x$(document).ready(function() {
x$('<div/>',{ class : 'photoChoice'}).appendTo('.js-statusForm.statusForm').hide();
x$('.isActivityPage .column-narrow .section-photoBundle,.isActivityPage .column-narrow .section-videoBundle').hide();
x$('.isActivityPage .column-narrow .section-photoBundle').appendTo('.photoChoice');
x$('.isActivityPage .column-narrow .section-videoBundle').appendTo('.photoChoice');
});
</script>

<script>
x$("a.OpenStatusAddPhoto-more").toggle(
function(){
x$('.js-statusForm .pull-right').addClass('pullright-photo');
x$('.isActivityPage .column-narrow .section-photoBundle').show();
x$('.isActivityPage .column-narrow .section-videoBundle').show();
x$('.isActivityPage .column-narrow .photoChoice').slideDown(500);
},
function(){
x$('.photoChoice').slideUp(500);
x$('.isActivityPage .column-narrow .section-photoBundle').hide();
x$('.isActivityPage .column-narrow .section-videoBundle').hide();
});
</script>

 

That's it, hope you find it useful

Bizz :-)

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

  • NC for Hire

    Wow... very innovative!

  • Very cool. Maybe we can now figure out how to add music (music page) like this or even emoji (I do it from Opera Extension), or post to (from the activity feed) facebook/pinterest/etc

    • Will see what I can come up with, it's a little more difficult as the music page doesn't have and add content module option. It is easy enough though to add a button in the add media  that will simply go to the music page for the member to add music though.

      Bizz :-)

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

Tavolo Ornitologico replied to George H. Compton IV's discussion
( 11 themes N3 N2 ) Customizable CSS winter/holiday themes
"Very cool  codes George."
13 hours ago
Traddie replied to Anastasia_Ning_Support's discussion
Migration FAQ
"Hi. Does 3.0 have events?"
14 hours ago
Ahkam Nasution updated their profile
16 hours ago
Traddie replied to Traddie's discussion
Can someone summarise where we are on Ning 3.0 and Ning 4.0
"Can someone also explain what the Ning Builder is?"
17 hours ago
Traddie posted a discussion
I am back looking at creators after over a year and a half. Can someone ( maybe even from ning) sum…
17 hours ago
Tavolo Ornitologico replied to Traddie's discussion
Please show your networks
" "
20 hours ago
Tavolo Ornitologico replied to Traddie's discussion
Please show your networks
"tavoloornitologico.ning.com"
20 hours ago
J.Ayvar replied to J.Ayvar's discussion
why Ning videos thumbnails not appearing ?
"Great Job !! Now my Network are showing thumbnails. "
yesterday
This Is bully replied to Traddie's discussion
Please show your networks
yesterday
Rick Bradford replied to Rick Bradford's discussion
How to set up SSL?
"All seems to be working, thanks very much!
 "
yesterday
⚡JFarrow⌁ replied to Traddie's discussion
Please show your networks
"You can check this one out   it double performs over my old 2.0  hope this helps  "
yesterday
Traddie posted a discussion
Hi AllI am struggling to find well designed networks on Ning 3.0 to help me with my decision to upg…
yesterday
More…

Meanwhile, you can check our social media channels