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
AND IN A BUNDLE
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 :-)
Replies
Outstanding! Thank you John for sharing
No worries, enjoy 👍😃
how do i fix the situation, i don't want to touch your cssThe 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
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
miss you brother