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

|
Embed
dancohen
dancohen

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

|
Embed
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).

|
Embed
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.

|
Embed
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/

|
Embed
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

|
Embed
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.

|
Embed
In reply to
Cheri
Cheri

@cleverdevil Wow!

|
Embed
crossingthethreshold
crossingthethreshold

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

|
Embed
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?

|
Embed
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?

|
Embed
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;}
|
Embed
kaa
kaa

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

|
Embed
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.

|
Embed
cleverdevil
cleverdevil

@TheDimPause you’re welcome!

|
Embed
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?

|
Embed
cleverdevil
cleverdevil

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

|
Embed
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.

|
Embed
kaa
kaa

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

|
Embed
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 😀

|
Embed
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.

|
Embed
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?

|
Embed
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

|
Embed
crossingthethreshold
crossingthethreshold

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

|
Embed