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.
Ok 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.
As 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 :-)
Replies
wow... that is looking very useful... ill try it out tonight!
Bizz !! .. some code for a larger group cover ????
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.
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 ?
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 :-)
-
1
-
2
of 2 Next