Here is a feature that will allow you to add pinned posts to your site, you can add them anywhere you want as it will be just like adding any other module you add from the add content option of a page. Only admins will be able to choose and add the pinned posts they want to display.
Here is a page I added to show how they all look : PINNED POST DEMOS
Pinned posts are available for all pages that allow categories. Groups pages can have them as well but you cannot display pinned pages outside of the group on the main site but only within it's group.
You can add the modules at anytime ready for pinned posts as the modules will only show up if they have pinned posts, so you can add them ready to use then it's quick and easy to just add the pinned posts to them.
To setup is easy to do, once all the code is added all you will need to do is add the modules then choose the posts you want to pin.
HOW DO YOU PIN A POST ? : As admins we can edit any post so to add a post we simply got to the post, choose edit then add the pinnedPost category to it.
CAN MEMBERS SEE THIS CATEGORY ? : No only admins are able to add posts the category as they only show for them, also only admins will see the pinned posts category in the link nav bar. The modules with the posts of course are vsible to all.
Ok so let's get started
CUSTOM CODE
First of all we just need to add a little custom code so to do that we add this block of code below to : Social Site Manager > Custom Code > End Of Page section
<script>
// BY BIZZ 190222 VER1
// Pin by category option
x$(document).ready(function(){
/* Remove catergory from byline*/
if (!x$("body").hasClass("isAdmin")) {
x$('.entry-byline a[href$="pinnedContent"]').remove(); //Remove link from byline for category
}
/* Remove Admin Cat for non admins in category list */
if (!x$("body").hasClass("isAdmin")) {
x$('.categorySelectionList > optgroup:nth-child(1) > option').filter(function(){
return x$.trim(x$(this).text())== 'pinnedContent'}).remove(); // remove pinnedContent cat
}
if (!x$("body").hasClass("isAdmin")) {
x$('.categorySelectionList > option').filter(function(){
return x$.trim(x$(this).text())== 'pinnedContent'}).remove(); // remove pinnedContent cat
}
/* Remove Admin Cat for non admins in mobile select menu */
if (!x$("body").hasClass("isAdmin")) {
x$('select.subnav > option').filter(function(){
return x$.trim(x$(this).text())== 'pinnedContent'}).remove(); // remove pinnedContent cat
}
/* Remove options in nav if NOT admin */
if (!x$("body").hasClass("isAdmin")) {
x$('ul.subnav li a[href$="pinnedContent"]').remove(); // Remove pinnedContent tab from page nav
x$('ul.subnav li:empty').remove(); // Remove the empty list space
}
/* Hide Categories Box if none in it but show the pinned option for admins */
if (x$('.categorySelectionList > optgroup:nth-child(1) > option').length<= 0){
x$('.entryEditPage-categoryContainer').remove();
}
x$('.module-name a[href$="pinnedContent"]').closest('.grid-frame').addClass('pinnedPost-container');
x$('.pinnedPost-container .module-body').closest('.pinnedPost-container').addClass('pinned-hasContent');
x$('.photoDetailPage').closest('.central-content').addClass('is-photoDetailPage');
x$('.videoDetailPage').closest('.central-content').addClass('is-videoDetailPage');
x$('.blogDetailPage').closest('.central-content').addClass('is-blogDetailPage');
x$('.discussionDetailPage').closest('.central-content').addClass('is-forumDetailPage');
x$('.articleDetailPage').closest('.central-content').addClass('is-articleDetailPage');
x$('.eventDetailPage').closest('.central-content').addClass('is-eventDetailPage');
});
</script>
NEXT WE ADD CSS
We add this to : Design Studio > Custom CSS
/**** PINNED POSTS BY BIZZ 190222 VER1 ***/
.categorySelectionList{
min-height:25vh;
}
/*Hides the module if nothing is in it*/
.pinnedPost-container:not(.pinnedPost-container.pinned-hasContent){
display:none;
}
.pinnedPost-container .section_header{
margin-bottom:4px;
}
.pinnedPost-container .entry-headline .media-frame{
display:flex;
flex-wrap:wrap;
}
.pinnedPost-container .entry-title{
display:flex;
flex-wrap:wrap;
width:100%;
}
@media only screen and (max-width:979px){
.pinnedPost-container .avatar-frame{
margin-bottom:6px;
}
.pinnedPost-container .media-frame > .media-body{
overflow:visible!important;
}
}
.pinnedPost-container .module-name{
margin:6px!important;
}
.pinnedPost-container .module-name a{
pointer-events:none;
}
.pinnedPost-container .entry-readMore{
margin-top: -13px;
text-align: right;
padding: 10px 10px 0px 0px;
}
.pinnedPost-container .entry:not(:last-of-type),
.pinnedPost-container .media-frame:not(:last-of-type){
margin-bottom:10px;
border-bottom: dashed 1px lightgray;
}
.column-wide .section-eventBundle.pinnedPost-container .entry{
border-bottom:none;
}
.pinnedPost-container .module-body{
border-top: solid 2px rgba(227, 227, 227, 0.56);
padding:5px 0px 5px 0px;
}
.pinnedPost-container .entry-content{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* number of lines to show */
-webkit-box-orient: vertical;
}
.pinnedPost-container .media-frame{
margin-top:15px;
}
.pinnedPost-container .matrix{
margin-left:0;
margin-right:0;
}
.pinnedPost-container .matrix .matrix-itemFluid{
position:relative;
}
.is-eventDetailPage .pinnedPost-container,
.is-photoDetailPage .pinnedPost-container,
.is-videoDetailPage .pinnedPost-container,
.is-forumDetailPage .pinnedPost-container,
.is-blogDetailPage .pinnedPost-container,
.pinnedPost-container .videoListPage-metaElapsed,
.pinnedPost-container .entry-footnote,
.pinnedPost-container .entry-commentsCount,
.pinnedPost-container .module-footer,
.pinnedPost-container .entry-tags,
.pinnedPost-container .entry-byline,
.pinnedPost-container .entry-content img,
.pinnedPost-container .image-contain{
display:none!important;
}
.section-videoBundle.pinnedPost-container .module-footer{
display:none;
}
.section-videoBundle.pinnedPost-container .videoListPage-metadata{
display: none;
}
.column-narrow .section-videoBundle.pinnedPost-container .videoListPage-metadata .videoListPage-row{
display:none;
}
.column-narrow .section-videoBundle.pinnedPost-container .matrix-item:hover .videoListPage-metaTitle a {
font-size:12px;
}
@media only screen and (min-width:979px){
.section-videoBundle.pinnedPost-container .matrix-item:hover .videoListPage-metadata{
display: flex;
position:absolute;
top:0;
left:0;
right:0;
background-color:rgba(0,0,0,0.5);
padding:0;
}
.section-videoBundle.pinnedPost-container .matrix-item:hover .videoListPage-metaTitle a {
white-space:unset;
overflow:hidden;
display:flex;
background-color:rgba(0,0,0,0.6);
padding:6px;
color:cyan!important;
}
.section-videoBundle.pinnedPost-container .matrix-item:hover .videoListPage-metadata a{
color:lightgray;
padding:4px;
}
.section-videoBundle.pinnedPost-container .matrix-item:hover .videoListPage-metadata a:hover,
.section-videoBundle.pinnedPost-container .matrix-item:hover .videoListPage-metaTitle a:hover{
color:orange!important;
}
.section-groupHub.pinnedPost-container .matrix,
.section-photoBundle.pinnedPost-container .matrix,
.section-videoBundle.pinnedPost-container .video_list{
padding: 0px 0px 10px 0px;
}
.column-wide .section-eventBundle.pinnedPost-container .module-body{
display: inline-flex;
overflow-x: auto;
overscroll-behavior-inline: contain;
flex-wrap:nowrap!important;
justify-content:left;
}
.column-wide .section-eventBundle.pinnedPost-container .entry{
flex:0 0 39%!important;
-webkit-flex: 0 0 39%!important;
}
}
.section-photoBundle.pinnedPost-container .matrix-media-4-3{
box-shadow:none;
background-size:cover;
}
.section-groupHub.pinnedPost-container .matrix,
.section-photoBundle.pinnedPost-container .matrix,
.section-videoBundle.pinnedPost-container .video_list{
display: inline-flex;
overflow-x: auto;
overscroll-behavior-inline: contain;
flex-wrap:nowrap!important;
justify-content:left;
}
.section-groupHub.pinnedPost-container .matrix .matrix-itemFluid,
.section-photoBundle.pinnedPost-container .matrix .matrix-itemFluid,
.section-videoBundle.pinnedPost-container .videoListPage .matrix-itemFluid {
flex:0 0 39%!important;
-webkit-flex: 0 0 39%!important;
}
.column-narrow .section-photoBundle.pinnedPost-container .matrix .matrix-itemFluid,
.column-narrow .section-videoBundle.pinnedPost-container .videoListPage .matrix-itemFluid {
flex:0 0 47%!important;
-webkit-flex: 0 0 47%!important;
}
/** Make items bigger under this size for video and photos and groups **/
@media only screen and (max-width:979px){
.section-groupHub.pinnedPost-container .matrix .matrix-itemFluid,
.section-photoBundle.pinnedPost-container .matrix .matrix-itemFluid,
.section-videoBundle.pinnedPost-container .videoListPage .matrix-itemFluid {
flex:0 0 83%!important;
-webkit-flex: 0 0 83%!important;
}
}
/**Pinned Events remove the categories and who added it but leave the description **/
.section-eventBundle.pinnedPost-container .eventPage-detail + .eventPage-detail{
display:none;
}
.section-groupHub.pinnedPost-container .groupHub-groupTitleContainer {
max-height:2em;
min-height:2em;
}
.section-groupHub.pinnedPost-container .groupHub-groupTitle > span {
font-size:1.0em;
}
.isAdmin .groupEditPage .module-body > div:nth-child(1) > div:nth-child(1) > div:nth-child(5)::after,
.isAdmin .entryEditPage-categoryContainer::after{
content:"Admin when adding or removing the pinnedContent category remember to hold down the ctrl key when selecting so you do not remove any other categories if any other categories exist";
font-weight: bold;
font-size:1.1em;
display: block;
padding: 10px 5px 10px 5px;
background-color: red;
color: white;
margin-top: 10px;
line-height:1.2;
margin:10px;
width:100%;
max-width:60%;
}
PAGES SET UP
To be able to use the pinned post we need to add the category into the pages we want to use for pinned post, this is easy to do and it's just like adding any other category to a page although this category must be added exactly as shown
ADD THE CATEGORY
NOTE IMPORTANT: If you are using the Contributors must select a category the there must be at least one other category in the Categories List unless it's a page that only admins can add new post to.
First go to your Social Site Manager and from the pages select which you want to add the category to Like a forum etc. Next go down to the categories box and add the pinned category like this: pinnedContent
Save the page and now the category has been added.
How To Add The Pinned Modules To A Page
Ok so this is much the same as adding any other module from a page using the add content option.
NOTE: A name MUST be added for the title
Once this is complete choose the Add at the bottom to add it to the page and it will now look like this
How to pin posts
Now we have the module added we can now at anytime add or remove the post we want to pin simply by going to the post > choose edit > then select the pinnedContent category.
NOTE: When adding or removing the category on a page you MUST hold down the ctrl key when selecting so as to not remove any other categories chosen by the person who created the post in the first place.
Now the post has been pinned it will show up in the page instance you added the module to like this
That's it all done
BONUS TIP
As the category for pinned content only shows for admins in the byline of the post ( the part which says post by or Started by ) it can leave an 'and' at the end with nothing else after it so we can remove this by jumping into our language editor to remove the 'and' and replace it with a comma.
So go to your Social Site Manager and choose Language Editor then choose edit next to your selected language. In the search box search for
Posted By and Started By
This will then show like this ( this is the one searched for Posted By )
So those two little ' and ' words we are going to replace with a comma so remove those ( don't worry the langauge editor saves the original wording on the left ) so the page now looks like this then SAVE PAGE
Replies
if I want to delete the video from pinner content? or other things as is the mode
Refer to the setup I worte up. Basically you just go to the video you want to remove from pinned, choose edit then remove it from that category.
I have just added a demo pinned video box on your main homepage so you can see how it works and how to add the module
I have seen it is wonderful, but my problem is not the module I have seen now but a single photo or video, put it and remove it, I do not see the option
It is in all the instructions I provided
Click on Edit Video
Then remove it from the pinnedContent category
the problem that I don't see the option to add and remove a single video,pin photos and slide them into the main I still have to figure out how I can promote a single photo or something else John
truly amazing, I'm trying it now
thank you very much! this is truly a marvel, could it be played the same way in streaming in the future? I'm talking about the videos in streaming as I have in the siteAmazing work. Just amazing.
-
1
-
2
-
3
of 3 Next