Micro.blog

cleverdevil
cleverdevil

I built a little extension to Micro.blog that lets you easily add a photo grid to your website. Thanks to @manton for making Micro.blog extensible! –  https://github.com/cleverdevil/microgram

dancohen
dancohen

@cleverdevil @manton this is really great! can't wait to implement this

dancohen
dancohen

@cleverdevil Thanks again for the photo grid code! Do you have any sense of what to tweak to get three columns of photos in the Micro.blog Marfa theme? It only has two columns in that theme vs. three for the default theme—assume this is some minor CSS issue (and no biggie if you don't want to look into it—really appreciate the open source code).

cleverdevil
cleverdevil

@dancohen look at the README on GitHub: you can change the size of the thumbnails by passing “?size=“ in the CSS include. For Marfa, I think you’ll want 160.

JohnPhilpin
JohnPhilpin

@dancohen good question ... I assumed using that css extension that @cleverdevil included on git - and setting image size to (say) 100 - which I have done - would work - but nothing :-(

john.philpin.com/photos/

JohnPhilpin
JohnPhilpin

@dancohen idiot i am - i think i failed to understand the instructions ... have now added in the correct place - and I THINK this might work - hang on to you hats - cache flushed - waiting propagation inside the MB system methinks.

// @cleverdevil

dancohen
dancohen

@cleverdevil Was about to send you a nevermind since I viewed source on @manton's photo grid (which also uses Marfa) and saw the size=160 modification. Thanks again! This is fun to have.

cheri
cheri

@cleverdevil Wow!

crossingthethreshold
crossingthethreshold

@cleverdevil That is so useful and appreciated. Thank you and Happy Thanksgiving! 🦃

kaa
kaa

@cleverdevil First off thanks for the plugin, absolutely top of my list for things I wanted to have. I'm trying to get the styling to work on my site, but if I remove the <link type="text/css" rel="stylesheet" href="https://microgram.cleverdevil.io/css"> link the whole page stops working. If I try and override them (by putting a link to the custom css under that link) it also stops working. Any ideas?

cleverdevil
cleverdevil

@kaa do you see any errors in your browser’s JavaScript console? What are you specifically trying to change from a style perspective?

kaa
kaa

@cleverdevil So there are some 403 errors, where the page just hangs on the loading part and no photos actually load up. I'm just looking to put the following instead:

microgram div.photo { width: 300px; height: 300px; float: left; margin: 0 0 25px 25px;}

microgram {margin: 0 auto; max-width: 1000px; margin: 0 auto; width: 90%; overflow: hidden;}

microgram div.photo:hover { cursor: pointer; opacity: 0.75;}

kaa
kaa

@cleverdevil so the link is at kaa.bz/photo

TheDimPause
TheDimPause

@cleverdevil Can I add my thanks to the list you're receiving - and a belated one for the 'On This Day' script. Both work really well on my Micro.blog hosted site.

In reply to
cleverdevil
cleverdevil

@TheDimPause you’re welcome!

kaa
kaa

@cleverdevil All sorted. Just added another link to the custom.css file under the main css link and it's all good. Again thanks for the work. Quick follow-up question, is there a limit to the number of photos that get presented?

cleverdevil
cleverdevil

@kaa currently it’s capped at 300 I think. I could make that a configurable number if there was demand for it.

cleverdevil
cleverdevil

@kaa also if there are CSS improvements you have that would be useful to others, definitely open a ticket on GitHub with the details. Would love to make it even better for everyone.

kaa
kaa

@cleverdevil Huh, that's odd then. I only get 201 photos loading (67 x 3).

cleverdevil
cleverdevil

@kaa ah, maybe it’s 200 then. And I have an off by one error haha. If you’d like that number to be configurable, open a ticket and I’ll make it happen 😀

kaa
kaa

@cleverdevil Will do on both counts. CSS doesn't work very well for an iPad Mini and iPad 9.7", so once I've resolved that happy to share the tweaks I've made.

crossingthethreshold
crossingthethreshold

@cleverdevil I've noticed that it is not displaying all of my photos. I am thinking that it is all that aren't square, that seems to be it, but I need to check. Any thoughts?

crossingthethreshold
crossingthethreshold

@JohnPhilpin I tried looking at your photo page on three browsers. it did not work for me on Google Chrome or Firefox, just long blank pages, but did work on Safari. //@cleverdevil

crossingthethreshold
crossingthethreshold

@cleverdevil I've just checked on this. It is not the square issue as I thought, but definitely some photos being ignored?