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

LEO Mobile App Builder updated their profile
Tuesday
Aase Lillian replied to Aase Lillian's discussion
Community - activity page
"Ok, thank you. Please send me details as I have no idea on how to do it. "
Mar 19
Aase Lillian and ⚡JFarrow⌁ are now friends
NC for Hire
Mar 19
⚡JFarrow⌁ updated their profile photo
Mar 18
⚡JFarrow⌁ replied to Aase Lillian's discussion
Community - activity page
"Yes you can add emojis to your community pretty much anywhere you like.
If you need some help…"
Mar 18
Aase Lillian updated their profile
Mar 18
Aase Lillian posted a discussion
Hi all. Is it possible to add emojis to the community? I also wish the activity page to include…
Mar 18
Donna MacShoe updated their profile photo
Mar 6
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
More…

Meanwhile, you can check our social media channels