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.
And when the +Media button is clicked it show this
So 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
So 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 :-)
Replies
Wow... very innovative!
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 :-)
Bizz sorry I can't figure out which box to add ... all the others under the photo box?
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 :-)