Category image gallery possible?


#1

So I’m looking for a way to do a couple of things. First would be to display the latest couple of images in each category at the top the threads. Sort of like Tiles for Topics.

The second thing would be a gallery that would show all the images posted in each category.

Is there any way to do this using CSS and some code?


(Pad Pors) #2

these topics may help:




#3

Thanks for the links, I appreciate it. I tried the tiles from the Material Design thread (awesome thread btw!) but it didn’t work out too well.

I’d be willing to pay for this… really.


#4

I am guessing you ended up here from the Material Design topic:

Did that code not work for you?


#5

Something went wrong:


#6

It looks like you are missing the CSS, I thought I included that in the post, but I guess not. Try this:

//-------------- TILES ------------

/* Ignore this, it's specific to my site configuration
#TilesContainer { 
    height: 220px;
    width: 100%;
    position: absolute;
    left: 0%;
    top: 95px;
 }
*/
 
.tile-quote{
    color: white;
    padding: 10px;
    position: absolute;
    bottom: 60px;
    text-align: left;
}    
.fa-quote-left{
        font-size: 8px;
        vertical-align: top;
}

/* Carousel */
.main-slider{padding:0px 0px 12px;}
.owl-carousel .owl-wrapper:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.owl-carousel{display:none;position:relative;width:100%;-ms-touch-action:pan-y}
.owl-carousel .owl-wrapper{display:none;position:relative;-webkit-transform:translate3d(0px, 0px, 0px)}
.owl-carousel .owl-wrapper-outer{overflow:hidden;position:relative;width:100%}
.owl-carousel .owl-wrapper-outer.autoHeight{-webkit-transition:height 500ms ease-in-out;-moz-transition:height 500ms ease-in-out;-ms-transition:height 500ms ease-in-out;-o-transition:height 500ms ease-in-out;transition:height 500ms ease-in-out}
.owl-carousel .owl-item{float:left;}
.owl-controls .owl-page,.owl-controls .owl-buttons div{cursor:pointer}
.owl-controls{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}
.grabbing{cursor:url(https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/grabbing.png) 8 8,move}
.owl-buttons .owl-next{left:inherit;right:10px !important;background-position:-23px 0px !important}
.owl-carousel .owl-wrapper,.owl-carousel .owl-item{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0)}
#variation .item{position:relative;height:200px;font-size:14px;background:#a1def8;padding:0px;display:block;margin:1px;color:#FFF;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;text-align:center;
          -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
#variation .item .icw-img{position:absolute;top:0px;left:0px;right:0px;bottom:0px;z-index:0;width:100%;height:100%;-webkit-box-shadow:inset 0 0 50px rgba(0,0,0,0.5);-moz-box-shadow:inset 0 0 50px rgba(0,0,0,0.5);box-shadow:inset 0 0 50px rgba(0,0,0,0.5);background-size:cover;background-position:center;background-repeat:no-repeat;position:relative}
.tile-hover{position:absolute;top:0px;left:0px;right:0px;bottom:0px;padding:10px;color:#fff;text-decoration:none;}
.tile-hover:hover{text-decoration:none;color:#fff;}
.tile-hover h2.tile-title{text-shadow:1px 1px 2px rgba(0,0,0,0.5);font-size:16px;line-height:130%;margin:0px;padding:0px;color:#fff;font-weight:400}
.tile-hover .tile-info{line-height:20px;color:#F6F6F6;position:absolute;left:0px;right:0px;bottom:0px;padding:10px 20px 10px;text-align:left;-webkit-transition:all 200ms linear;-moz-transition:all 200ms linear;-o-transition:all 200ms linear;transition:all 200ms linear;}
#variation .owl-item .icw-img:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;opacity:.7;-webkit-transition:all 200ms linear;-moz-transition:all 200ms linear;-o-transition:all 200ms linear;transition:all 200ms linear}
#variation .owl-item:hover .icw-img:after{opacity:.9;}
#variation .owl-item:nth-child(1n+0) .icw-img:after{background-color:#000000;
background: -moz-linear-gradient(top, rgba(0,0,0,0.24) 0%, rgba(0,0,0,0.83) 57%, rgba(0,0,0,0.83) 58%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.24)), color-stop(57%,rgba(0,0,0,0.83)), color-stop(58%,rgba(0,0,0,0.83))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0.83) 57%,rgba(0,0,0,0.83) 58%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0.83) 57%,rgba(0,0,0,0.83) 58%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0.83) 57%,rgba(0,0,0,0.83) 58%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0.83) 57%,rgba(0,0,0,0.83) 58%); /* W3C */
}
#variation .owl-item:nth-child(1n+0):hover .icw-img:after{background-color:rgba(0,0,0,0);
      -webkit-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}
#variation .owl-item:nth-child(1n+0) .comment-btn{color:#dc4225;}
#variation .owl-item:nth-child:hover .item, .comment-btn{
           -webkit-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}
#variation .owl-item:nth-child(2n+0) .comment-btn{color:#002f4b;}
#variation .owl-item:nth-child(3n+0) .comment-btn{color:#292484;}
#variation .owl-item:nth-child(4n+0) .comment-btn{color:#d38312;}
@media (max-width: 1200px){.main-slider{padding:0px 30px 12px}}
//-------End Tiles--------

I don’t have the default padding in my wrapper, so you may have to make some adjustments, but that should get you started.


#7

Thanks, that’s progress!

Ideally I would want something like this to just show up in the category level which would be sweet.

I’m still new to Discourse coming from years with Joomla, phpBB, vBulletin… you get the idea.


#8

Getting closer, I just saw you applied the changes. Actually, remove what you have in

#TilesContainer { 
    height: 220px;
    width: 100%;
    position: absolute;
    left: 0%;
    top: 95px;
 }

That’s something that’s particular to my site.


#9

Wow, that’s the ticket. Pretty sweet mod here thanks for the help and for all your other code I applied :wink:


#10

Are you familiar enough with CSS to tweak it to your liking?


#11

Eventually I’ll get there kind of like a broken clock being right twice a day! Looks like I’m missing the arrow images so I’ll start poking around.

OK, I grabbed the CSS from here and it did what I needed to for Prev/Next buttons:

Any idea how I can limit this view to just a category instead of the whole site?


#12

There are probably much better ways to do it, but since I’m a front end guy and most comfortable with CSS, I would do something like this:

###Categories you want it to display in

.category-name #TilesContainer .main-slider { 
        display: inherit;
}

###Categories you don’t want it to display in

.category-name #TilesContainer .main-slider { 
        display: none;
}

If you just want it for one category, though, it is probably horribly inefficient and I’m sure there are better ways to handle it in the javascript, but you could make the default view display: none and then just do a display:inherit for the one category you want.

Just make sure to replace .category-name with your actual category name class.


Tiles for topics
#13

Thanks I appreciate your help!


#14

Quick question, what would I need to do to show more than one category source for images? I tried messing around with it but no success yet.


#15

Right now it just points to a JSON endpoint, so you are kind of limited to the different Discourse options (latest, top, or a specific category). You are just looking to show a mix of some categories but not all?


#16

Yes that is correct.