Current status of the Ning Platform is always available on the Ning Status Blog.

For a long time now I've just looked at our photos list pages and just thought how boring they look, no info etc just the photo, so decided to do something about it.

Now they show lots of information and look so much better.

You can see it live here ( note the likes will not show as only members see that but you can see in the demo images below how that looks)

https://jr-images.ning.com/photos

Also you can see how the bundles look by going to the activity page and choose Latest Photos at the top

https://jr-images.ning.com/activity

Also on the main homepage you can see a bundle added outside of a tabContainer.

When I share the code you can easily just have it for the photos list page or just bundles or both.

DEMO IMAGES

9581123663?profile=RESIZE_710xAND IN A BUNDLE

 

9581123686?profile=RESIZE_710x

HERE IS THE CODE I USED

First of all you need to decide if you want it just for photo pages or just photo bundles or both ( you can always change you mind later by replacing the code for another choice ) Choose the one you want from the sections of code below. Once you have decided you copy that code and add that to your....

Social Site Manager > Custom Code > End Of Page Section.

FOR ONLY PHOTO LIST PAGES ( DO NOT COPY THIS LINE WITH THE CODE )

<script>
// Class for the new list pages for photos
x$(document).ready(function(){
x$('.photoListPage').addClass('newPhotoList-v5');
});
</script>

FOR ONLY ADD CONTENT PHOTO BUNDLES ( DO NOT COPY THIS LINE WITH THE CODE )

<script>
// Class for the new list pages for photos Bundles
x$(document).ready(function(){
x$('.section-photoBundle').addClass('newPhotoList-v5');
});
</script>

FOR BOTH PHOTO LIST PAGES AND BUNDLES ( DO NOT COPY THIS LINE WITH THE CODE )

<script>
// Class for the new list pages for photos and bundles
x$(document).ready(function(){
x$('.photoListPage').addClass('newPhotoList-v5');
x$('.section-photoBundle').addClass('newPhotoList-v5');
});
</script>

Next we need to also add this block of code underneath the one you have chosen from the options above ( DO NOT COPY THIS LINE WITH THE CODE )

<script>
// Photo And Photo Bundles Matrix
x$(document).ready(function(){
x$('.newPhotoList-v5').css("display","none");
x$('.newPhotoList-v5 .matrix-item').each(function() {
var photoLink = x$(this).attr("href");
x$(this).load(x$(this).attr("href") + " .photoDetailPage-mainSection", function() {
x$(".newPhotoList-v5 .photoDetailPage-moreEntries, .newPhotoList-v5 .adjacentEntryLink,.newPhotoList-v5 .photoDetailPage-mainSection .image-description,.newPhotoList-v5 .photoDetailPage-mainSection a.read-more-text").remove();
x$('.newPhotoList-v5').css("display","block");
});
});
});
</script>

 

Next we now need to add some CSS to style the photos. This code goes in your DESIGN STUDIO > CUSTOM CSS.  ( DO NOT COPY THIS LINE WITH THE CODE )

/*** PHOTOS LIST NEW VER 5 ****/

@media screen and (min-width: 769px){
.newPhotoList-v5 .matrix-itemFluid {
width: 50%;
}}
@media screen and (min-width: 769px) and (max-width:1180px){
.span8 .newPhotoList-v5 .matrix-itemFluid {
width: 100%;
}}
.column-narrow .newPhotoList-v5 .matrix-itemFluid {
width: 100%;
}
.newPhotoList-v5 .photoDetailPage-mainSection.sheet{
padding:10px;
}
.newPhotoList-v5 a:hover{
text-decoration:none!important;
}
.newPhotoList-v5 .photoBlockWrapper{
min-height:unset;
height: calc(100% - 20px);
margin-top:0px;
}
.newPhotoList-v5 .photoBlockWrapper .photoDetailPage-image {
height:0;
padding-bottom:75%;
margin-bottom:0px;
}
.newPhotoList-v5 .entry-headline{
margin-bottom:2px;
padding: 0px 5px 2px 5px;
border-bottom:solid 1px lightgray;
pointer-events:none;
}
.newPhotoList-v5 .wrap__avatar.avatar-48 {
display:none;
}
/*Hide long title overflow*/
.newPhotoList-v5 .entry-title{
width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
text-align:center;
}
.newPhotoList-v5 .entry-title > a{
line-height:normal;
font-size:18px;
}
.newPhotoList-v5 .entry-byline{
color: gray;
text-align: center;
font-size: 11px;
}
.newPhotoList-v5 .entry-tags .icon-tag{
margin-right:10px;
}
.newPhotoList-v5 .entry-tags{
width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
margin-top:5px;
margin-bottom:3px;
height:1.2em;
}
.newPhotoList-v5 .entry-tags a{
margin-right:5px;
}
.newPhotoList-v5 .buttonGroup{
margin-top:0px;
}
.newPhotoList-v5 .buttonGroup .pull-right{
display:none;
}
.newPhotoList-v5 .buttonGroup::before {
display:none;
}
.newPhotoList-v5 .socialActions{
pointer-events:none;
width: 100%;
margin-bottom:0;
}
.newPhotoList-v5 .socialActions .rightButtons{
margin-left:0;
width:100%;
}
.newPhotoList-v5 .ratingResult{
margin-bottom:0px;
}
.newPhotoList-v5 .ratingCaption{
display:none;
}
.newPhotoList-v5 .matrix-item{
box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.27);
border-radius:6px;
transition:0.3s;
}
.newPhotoList-v5 .matrix-item:hover{box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.57);
transform:scale(1.02, 1.02);
transition:0.3s;
}
/*Like button section*/
.newPhotoList-v5 .likeButton > a::before{ content:"Likes";line-height:2.1em;margin-right:-5px}
.newPhotoList-v5 .socialSharingListItemLink {border:none!important}

/********** END PHOTOS V5 CSS **********/

 

That's it all done

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

  • Outstanding!  Thank you John for sharing

    • No worries, enjoy 👍😃

  • NC for Hire

    10397335467?profile=RESIZE_930x

    how do i fix the situation, i don't want to touch your css
    • The arrow pointing to the top left, not sure what you mean by that one as nothing is there anyway

      The stars colours has nothing to do with my css for this as did not alter anything for them, this is coming from some css you have added somewhere. If you want them adjusted for a theme then you will have to add css to change the colours for the theme you are adding.

      You have pointed to the Likes but not said what is wrong with it

      • NC for Hire

        è ok, ma la parte del tag la scatola come vedi o diminuisco il size o posso allargare la scatola in basso dove vedi il tag

  • NC for Hire

    10398176657?profile=RESIZE_400x

    the stars give me all zero as a vote if I pass on them, the links takes me to the photo is it regular?
    • Yes because this is only to display the votes, hovering over them will not change them and yes when you click on them it will take you to that photo. Star colours on change when you hover over them when you are adding a vote in the comments of the photos and are selecting a rating to add or editing them. Remember also that you can only vote once so if you try adding another comment to the same photo you CAN NOT add another rating unless you remove the previous comment and rating you have added

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