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

Pam Givens replied to Pam Givens's discussion
Public home page
"Thanks Bizz - appreciate your help.
Pam"
1 hour ago
Bizz replied to Pam Givens's discussion
Public home page
"Yes you just set the required option in each of your pages in the social site builder, so you would…"
2 hours ago
Pam Givens posted a discussion
Is it possible to have a public home page and the navigation bar links and other pages private?Pam
3 hours ago
Oriel💞 updated their profile
15 hours ago
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Amazing Tool to Automate Your Content Discovery, RSS and Sharing Community Content
"the single best tool in your Community Building process... RSS Ground"
19 hours ago
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Time Saver: Your RSS Feeds for Location Tags on Ning
"just saved another 4 hours by leaving this tip up"
19 hours ago
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Tip: Create Self Updating Content Widgets for your Community
"RSS Ground just got much better!"
19 hours ago
Oriel💞 updated their profile
yesterday
Dawn aurora is now friends with Irene Araujo and OneCrow
Wednesday
Dawn aurora updated their profile
Tuesday
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ updated their profile photo
Jun 18
sophia Abigail updated their profile
Jun 18
More…

Meanwhile, you can check our social media channels