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 :-)

  • Bizz sorry I can't figure out which box to add ... all the others under the photo box?

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

Lea Bouillet updated their profile
yesterday
Rosas † Negras replied to Rosas † Negras's discussion
Style your View all buttons by touch by changing two colors
"Bizz 
these are the points impossible to reach without these codes"
Saturday
Rosas † Negras replied to Rosas † Negras's discussion
Style your View all buttons by touch by changing two colors
""
Saturday
Rosas † Negras replied to Rosas † Negras's discussion
Style your View all buttons by touch by changing two colors
"Bizz 
tell me without codes how you can get here my bro"
Saturday
Rosas † Negras replied to Rosas † Negras's discussion
Style your View all buttons by touch by changing two colors
""
Saturday
Rosas † Negras replied to Rosas † Negras's discussion
Style your View all buttons by touch by changing two colors
"my aim is to get perfect CSS without touching the study design"
Saturday
Rosas † Negras replied to Rosas † Negras's discussion
Style your View all buttons by touch by changing two colors
"does not play the usual game does not change color to the touch and does not go where a creator…"
Saturday
Bizz replied to Rosas † Negras's discussion
Style your View all buttons by touch by changing two colors
"You don't need to add any css as this can be done in your design studio"
Saturday
Rosas † Negras replied to Rosas † Negras's discussion
Style your View all buttons by touch by changing two colors
"these buttons will go all over your site"
Saturday
Rosas † Negras posted a discussion
 Design StudioGlobal Css/*Buttons*/a.button, button, input.button {color:#fff!important;background:…
Saturday
Rosas † Negras replied to Bizz's discussion
NING ISSUE WITH SIGN UP FORM
"Max Ning Support hi dear friend ... I need to ask something ... I am writing to you in private"
Friday
Kinga Incze replied to Kinga Incze's discussion
Monetization - fee questions
"That's clear, thanks, one last question on fees: so if a subscriber pays 100 dollars, first Stripes…"
Friday
More…

Meanwhile, you can check our social media channels