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 👍😃

  • 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

      • è 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

  • 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

      • thanks a lot, so it's a grades display to look at nice I like it

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

Rosas † Negras posted a discussion
 textarea.input-full { border: 2px groove #FFF;padding:border: 0px solid rgba(100, 100, 100, 1);…
5 hours ago
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ replied to ⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜'s discussion
Need help with CSS and HTML / CSS Code for layout
"I got my buttons coding going and changed on most layouts now. I like it when things glow lol "
20 hours ago
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ replied to ⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜'s discussion
Need help with CSS and HTML / CSS Code for layout
"I thought you may be an NC for Hire as well? My bad. You could probably be one tho if you wanted to…"
21 hours ago
Rosas † Negras replied to Rosas † Negras's discussion
Ning 3.0 - if you want to stylize your status-container these are CSS
"i added the perfect css thanks for making the remark"
yesterday
Rosas † Negras replied to Rosas † Negras's discussion
Ning 3.0 - if you want to stylize your status-container these are CSS
"status-container {border: 2px groove #eed255;padding: 10px;border-radius:…"
yesterday
Rosas † Negras replied to Rosas † Negras's discussion
Ning 3.0 - if you want to stylize your status-container these are CSS
"I don't copy codes, the first person who created this is jen ,you have never had this css since I…"
yesterday
Rosas † Negras replied to Rosas † Negras's discussion
Ning 3.0 - if you want to stylize your status-container these are CSS
"thank you my Master Bizz "
yesterday
Rosas † Negras replied to Rosas † Negras's discussion
Ning 3.0 - if you want to stylize your status-container these are CSS
"⚡JFarrow⌁ 
we all miss you brother. creators in need of your codes,let's make this place alive…"
yesterday
Rosas † Negras replied to Rosas † Negras's discussion
Ning 3.0 - if you want to stylize your status-container these are CSS
".status-container {border: 2px groove #eed255;padding: 10px;border-radius:…"
yesterday
⚡JFarrow⌁ replied to Rosas † Negras's discussion
Ning 3.0 - if you want to stylize your status-container these are CSS
"took the words out of my fingers..."
yesterday
Bizz replied to Rosas † Negras's discussion
Ning 3.0 - if you want to stylize your status-container these are CSS
"The above code you added is wrong, it has a curley bracket at the start and not one at the end of…"
yesterday
Bizz replied to ⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜'s discussion
Need help with CSS and HTML / CSS Code for layout
"I will add my profile themes back onto my demo site as this will give you some idea of just how…"
yesterday
More…

Meanwhile, you can check our social media channels