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"

to

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

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

<script>
// 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');
</script>

<script>
//Add a class for the photo bundle to be used
x$(document).ready(function() {
x$('.section-activity, .section-member-activity').closest('body').addClass('isActivityPage');
x$('.section-photoBundle:first-of-type').addClass('photoBundle-one');
});
</script>

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

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){
.OpenStatus-Links{
float:left; clear:both;
width:100%;
margin-top:10px }
}

a.OpenStatusAddPhoto:hover, a.AddPhotoContainer-Closer:hover{ cursor: pointer}
.OpenStatus-Links{
margin-top:5px;
margin-bottom:10px;
text-align:right;
}
.OpenStatus-Links a{
display:inline-block;
margin-right:10px;
margin-bottom:10px;
background-color:#f4f4f4;
color:darkgrey;
padding:4px 6px; border-radius:3px; }
.OpenStatus-Links a:hover{
cursor:pointer;
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 –

Replies

  • NC for Hire

    wow... that is looking very useful... ill try it out tonight!

  • Bizz !! .. some code for a larger group cover ???? 4308287065?profile=RESIZE_930x

    • Same size for all groups or just for one particular group ? What size are you wanting ?

      • Bizz !! .. for all its groups ... thanks !!

        • This tip here https://creators.ning.com/forum/topics/tip-remove-crop-of-group-cov...

          Should do the trick for you.

          Tip: Remove crop of group cover photo and set a bigger height while making them responsive
          As you may or may not be aware the cover photos for the groups headers are cropped to a height of 160px so here is a bit of code to remove the crop s…
          • hi Bizz !!  not working .....

            • Hmm it should all be working ok as I have added the code to my site to test, here is a link to two groups one has the header adjustment and the other does not. Demo Groups

              Do you have a link to your groups so i can check it out ?

              Have you copied the code and placed in the correct areas making sure you did not copy of the explanation text above the codes ?

              Groups
              jr-images is a social network
              • hi Bizz !!  not working .....

                Custom Code

                ===========

                <script>
                // Remove group header crop
                x$(document).ready(function() {
                x$('.groupHeader.groupHeader-coverPhoto').each(function() {
                var removegroupHeaderCrop = x$(this).css('background-image');
                x$(this).css('background-image', removegroupHeaderCrop.replace(/\&height=\d+\&crop=\d+\%\d+\A\d+/, ''));
                });
                });
                </script>

                ____________________

                Design Studio

                 

                ======================

                 

                .groupHeader-coverPhoto {
                padding-bottom: 35%!important;
                height: 0!important;
                position:relative
                }

                • yes !! works  !!!.. Global .. thank you very much Bizz !!! 

                  • No worries, glad we got there in the end :-)

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

James Slater replied to James Slater's discussion
Event Text
"Hiya thanks for this its very appreciated the links of the page name is below my network name is ht…"
6 hours ago
James Slater and Tavolo Ornitologico are now friends
7 hours ago
Bizz replied to Bizz's discussion
Tip: PROFILE THEMES
"Well the Themes are coming along nicely and just added another Gamer Theme. You will notice that al…"
15 hours ago
kostasgr replied to Anastasia_Ning_Support's discussion
Activity feed update
"hi Anastasia !! cool !!  thanks for the update....!  ...That is what is needed..!!"
15 hours ago
Bizz replied to James Slater's discussion
Event Text
"By the way what is the page name for the castings events ?"
18 hours ago
Bizz replied to James Slater's discussion
Event Text
"Yes can do it but not with CSS, going to take a bit of work so give me a while to sort it out as a…"
19 hours ago
⚡JFarrow⌁ and Tavolo Ornitologico are now friends
21 hours ago
kostasgr posted a discussion
RSS does not work ??someone else has a problem  RSS ??????and the speed has dropped a lot  ???
yesterday
James Slater replied to James Slater's discussion
Event Text
"Hi thanks for replying back I have 2 event pages on my network page one I need keeping same as it i…"
yesterday
Stark and Tavolo Ornitologico are now friends
yesterday
Bizz replied to James Slater's discussion
Event Text
"Which part do you want to change ?"
yesterday
James Slater posted a discussion
Hi does anyone know the CSS coding for the event pages? I need to change some text of the CSS codin…
yesterday
More…

Meanwhile, you can check our social media channels