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

This tip will allow you to add some add content links below your status box on the activity feed to make it easier for members to add stuff. Seeing as now Ning haved added a new button on the photos modules we can also use this to our advantage as we can trigger the add photo button they have now. Here is an image of the links and below that is a description and code of how to add them.

4296448724?profile=RESIZE_710xOk so let's talk about the +Photo button and how we need to set that up as this it what fires the add photo, the others are just simply opening the relevent page to add the content. So how the add photo one works is we are going to use the new Add Photo button that is now there when we add photo content to the page, ie latest photos etc.

4296473386?profile=RESIZE_710xAs you can see in the above image I have added two photo blocks for demostration, you don't have to add two but it is easier to explain how this works by doing so. So we add the content to the add as normal making sure the Hide 'Add Content' button is not ticked as we need that button. We can add more than one photo instance as the code will look for the first one to use so always make sure this main one is above any others.

The code will alos add the links to the members profile page.

So what is going to happen is the code will hide the add photo button on the first module, you can still keep the button if you want by not adding the css which hides it there is also a line of code to hide the module completly if you want. When a member clicks on the new add photo button in the links we have added it will fire the add photo button so the process of adding a new photo begins.

I will be add a further option at a later stage so if you have multiple photo pages you can select which one you want to add photos to.

Ok so first we need to add some custom code and this goes in your Social Site Builder > Custom Code > End of page section.

PLEASE NOTE: the links in the code will need to be altered if you have named your blog, forum, videos something else, so for instance if you have named your video page media then you would alter this line with the new name

default:  x$('<a href="/videos/video/new"


new: x$('<a href="/media/video/new"

Ok so copy this code below and add it to your custom code

// Holding div for the link
x$('<div/>',{ class : 'OpenStatus-Links'}).appendTo('.js-statusForm.statusForm, .profileCoverArea-actions');
//LINKs TO OPEN THE ADD PHOTO blogs discussions etc
x$('<a class="OpenStatusAddPhoto" title="Add Photo/s">+ Photo</a>').appendTo('.OpenStatus-Links');
x$('<a href="/videos/video/new" class="OpenStatusAddVideo" title="Add Video">+ Video</a>').appendTo('.OpenStatus-Links');
x$('<a href="/blog/blogpost/new" class="OpenStatusAddBlog" title="Add Blog">+ Blog</a>').appendTo('.OpenStatus-Links');
x$('<a href="/forum/discussion/new" class="OpenStatusAddDiscussion" title="Add Discussion">+ Discussion</a>').appendTo('.OpenStatus-Links');

//Add a class for the photo bundle to be used
x$(document).ready(function() {
x$('.section-activity, .section-member-activity').closest('body').addClass('isActivityPage');

// Opens the add photo container
x$(document).ready(function() {
x$('.section-photoBundle.photoBundle-one .section_header .pull-right').contents().find('.transparentFileInputButton-fileInput').trigger( "click" );

NEXT IS CSS. So now we need to add a little css to your design studio custom css, depending on your colour scheme you may have to adjust the css colours in the .OpenStatus-Links a{ section

The options for hidng the button and module is at the bottom so you either add them or not as it's upto you how you want that.

/* Add photo blog discussion video link buttons*/
@media only screen and (max-width:771px){
float:left; clear:both;
margin-top:10px }

a.OpenStatusAddPhoto:hover, a.AddPhotoContainer-Closer:hover{ cursor: pointer}
.OpenStatus-Links a{
padding:4px 6px; border-radius:3px; }
.OpenStatus-Links a:hover{
background-color: #7690EA;
color: white;
text-decoration: none;

/** This hides just the add photo button the module **/
.isActivityPage .section-photoBundle.photoBundle-one .section_header .pull-right{ display:none }

/*** This hides the bundle all together **/
.isActivityPage .photoBundle-one{ display:none }


Hope you find this 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 –


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
15 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?"
16 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
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. "
This Is bully replied to Traddie's discussion
Please show your networks
Rick Bradford replied to Rick Bradford's discussion
How to set up SSL?
"All seems to be working, thanks very much!
⚡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  "
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…

Meanwhile, you can check our social media channels