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!

  • This reply was deleted.
    • 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 :-)

  • NC for Hire

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

  • This reply was deleted.
    • If I remember correctly as it's a while since I wrote this then the CSS you need to change the button can be found in the css section here

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

      So if you want it to be a different colour you would change the background-color and the text colour, So let's say I want the button to be black and the text to be white then you would change the first part to this. By the way css is added using the American way of spelling so color is not spelt like this: colour and is spelt like this: color I have to keep remembering this myself and in the UK we spell it with the U : colour.

      a.OpenStatusAddPhoto-more{
      margin-right: 10px;
      background-color: black;
      padding: 7px;

      color: white; /* text color */
      }

      Then if you want to alter the hover state as well then you would change this part, so if you wanted the hover colour to be white then you would change the background colour and then of course the text colour to black so it shows up

      a.OpenStatusAddPhoto-more:hover{
      background-color:white;
      color:black;
      cursor:pointer;
      }

       

      Hope that helps

      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

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
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
For Creators and Admins: Easy Way to Create a Community Status Report
"This is still one of the best posts for RSS feeds"
Jan 8
brahim jounh updated their profile
Dec 28, 2023
Sewerz updated their profile
Dec 20, 2023
guss replied to Alex - Rosas † Negras's discussion
Audio/Video Call - Start Google Meet on each members page ( Browser Popup Window )
"Hello, how do I install Google Meet on each member's page?"
Dec 17, 2023
Eva updated their profile
Dec 16, 2023
⚡JFarrow⌁ updated their profile photo
Dec 14, 2023
Tsaaro Counsulting updated their profile
Dec 12, 2023
Eva updated their profile
Dec 10, 2023
More…

Meanwhile, you can check our social media channels