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

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 replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
"thank you very much I come from the times of this site now I put the photo, it was hard to survive…"
9 hours ago
Bizz replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
"To do a border without the ridge and using dots you would just write it like this
border:13px…"
10 hours ago
Steve C posted a discussion
 I want to put ads above individual groups.Jen showed me how to put text above forum categories…
14 hours ago
Rosas † Negras replied to George H. Compton IV's discussion
(TIP N3.0 & N2.0) let's hang some Christmas lights..CSS.. Happy holidays :-) updated 12-04-14
"I don't use file manager for photos, so if it's a photo I'm not interested even if after I close…"
19 hours ago
Rosas † Negras replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
"I agree with you, but I want it rounded, on the square it gives no problem,this is an impossible…"
yesterday
Bizz replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
"It's because you are using the ridge as a border, to create the ridge the border property adds the…"
yesterday
Rosas † Negras replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
"I don't want to go below 13 px I know all would be ok but it's too logical"
yesterday
Rosas † Negras replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
"#xg_masthead /*Top Image*/ {margin: auto;display: block;height:600px;width: auto…"
yesterday
Bizz replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
" show the css you have used for the border"
yesterday
Rosas † Negras posted a discussion
yesterday
Anam replied to George H. Compton IV's discussion
(TIP N3.0 & N2.0) let's hang some Christmas lights..CSS.. Happy holidays :-) updated 12-04-14
"OH MY GOD!!!! :D :D :D It worked!!!
 
I am so pleased. Thank you Bizz and Rosas for your help. I…"
yesterday
Anam replied to George H. Compton IV's discussion
(TIP N3.0 & N2.0) let's hang some Christmas lights..CSS.. Happy holidays :-) updated 12-04-14
"Thank you Rosas and Bizz.
I am afraid I do not understand these instructions.
I will see if I can…"
yesterday
More…

Meanwhile, you can check our social media channels