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

Rosas † Negras replied to Bizz's discussion
NING ISSUE WITH SIGN UP FORM
"I'm not sure if it has been fixed ... I have yet to try ... can I add the codes now my dear friend?"
6 hours ago
Rosas † Negras replied to Bizz's discussion
Playing Videos In Activity Feed Tip
"Thanks Bizz!"
6 hours ago
Anam replied to Anastasia_Ning_Support's discussion
Recommended DNS settings notice
"When I go to Godaddy where I have bought a site name the DNS settings for registrar do not look lik…"
14 hours ago
Cindy Dean Mccoy replied to Anastasia_Ning_Support's discussion
Recommended DNS settings notice
"I do not think so.  That is getting beyond my techy abilities.  The way I read the email, it would…"
17 hours ago
Nat updated their profile
18 hours ago
Anam replied to Anastasia_Ning_Support's discussion
Recommended DNS settings notice
"Thank you. 
Is Ning saying they or we are vulberable to DOS attacks if we stay with Ning in site na…"
19 hours ago
Cindy Dean Mccoy replied to Anastasia_Ning_Support's discussion
Recommended DNS settings notice
"It has to do with using a URL for your social network that is not the same as the URL of your netwo…"
yesterday
Anam replied to Anastasia_Ning_Support's discussion
Recommended DNS settings notice
"I honestly do not know what this post means."
yesterday
Rosas † Negras updated their profile
yesterday
⚡JFarrow⌁ replied to Jan Homan's discussion
Creating videoheader?
"I have a few things i can do or you can do... here are a couple of examples
Example 1
Example 2
Exa…"
Sunday
Jan Homan replied to Jan Homan's discussion
Creating videoheader?
"Yes, I want to use a youtube video!"
Friday
Rosas † Negras replied to ⚡JFarrow⌁'s discussion
Simple Tip N3: How to Move your Group Description/Follow Box
"thank you very much you have been very kind"
Friday
More…

Meanwhile, you can check our social media channels