I want to try out a dedicate photos page on my blog.
On a test blog, I was able to automatically add short posts that have the camera emoji on them using the category filter. This is great. Now I want to expand it a bit, and I’m scratching my head looking at the plug ins and different posts here. I hope to get a few highlights and pointers as to what you guys recommend. Here’s what I’d like:
Clicking on a photo displays it full size (I know there’s a plugin for that, though I’m not sure how it will work inside the photo page? I’d like something more automatic that does not involve pasting shortcode each time)
“Albums” or the ability to separate photos to locations, times, etc. I guess I could essentially have another page for that, but I don’t want it on the main site, I want the photo page to have it’s own menu.
the small photo description included with the photo for context. I guess I can include the post (since it’s short, usually a sentence) with the alt tag, however, this is not as nice and clear as having a caption.
speaking of caption, a link back to the post referring to it could also be good, as part of the caption or maybe elsewhere.
That’s what I’m thinking for now. If you have a nice photo page on your MB, please feel free to share, I’m looking for ideas
All of these things require some of the tradeoffs you suggest. I think the best plug in for photo displays, galleries, and descriptions/captions is the plug in I make glightbox. You could make Albums each as a photo post, it’ll automatically collect all of the photos in a single post into a gallery (or for multi-gallery posts, you can by hand name the gallery), and you can add captions and titles as well with styling.
To collect the posts, you can do a bunch of things, but I tag my posts into a category by searching for .jpg or .jpeg in the post content, as one way that I think is better than emoji-based tagging. You could then make a special index page that’s custom for those posts (showing all content paginated like a normal index page or something else).
To just get click to full size, you can simply use the Markdown photo syntax (![]() with the image in the () and alt text in []), but for captions and titles, I strongly recommend using the shortcode directly.
I don’t think you’ll get a much easier method, honestly. It’s what I built the plug in for, even though I don’t do a special photos page really right now (but I do special custom pages for my Books for example and my Now page. Here’s a description on building that custom page. My example for my letters page shows how to do a different index style page based on post category.
Thanks @jsonbecker I download the plugin and tried it on my test blog.
It does provide more function in line of what I want. If I include several images in a post, I can go back and forth, each image has a caption, and clicking open the image to full size.
Still a tricky to create an album in a dedicated page. I saw your gallery example, looks like it requires some work… need to have thumbs, then you need to get the upload paths for each photo (which you upload individually because you can’t upload more than one photo on MB’s upload page, at leas in the web version), then add descriptions and alt text. Then, add all of that to a gallery div section which will sit in the Photos page.
I get it that it’s tricky and you got to work with what Hugo gives you. It’s a good plugin and I might use it for the pictures in the future, because just having the ability of zooming in and browsing between photos in a post is nice. But I’m not sure it’s a good replacement for other dedicated “album” pictures platform. I might end up just embedding code from one such platform (if I decide on one) on my photo page.
That’s just the most complex path. Thumbnails are not at all required, and with the addition of the CDN for MB it doesn’t seem worth it. I never use thumbnails anymore. What I would recommend is uploading each album as it’s own post. Surround the photos in your img-gallery div. Now that post is a gallery.
That’s all the plug in will get you, but then you should combine this with a custom photos page template that only collects those posts that have image galleries. (See my Letters page that I’m still working on as an example— autogenerated from posts categorized as Letters). This can be done a bunch of ways, but one nice thing is that Micro.blog has auto tagging that can search even your HTML (as long as it’s somethign you typed in the content of a post). You can have a category for anything that contains “img-gallery” and it’ll see it as the class name on the div.
You then make a unique index page for any gallery post that just collects all the galleries. That gets you the dedicated index. And making each gallery a post already gets you the album in its own page.
One thing I would say— I use MarsEdit to build most of my photo posts beacuse you can upload as much as you want. Gluon allows that as well from mobile.’
One thing I’m trying to work on is the width of the page. in my theme (Alpine) there’s a wrapper which gives the article maximum width of 700px. if I change that to say 1200px, it would fit 3 photos instead of two, and it will look better. I’m not sure how to implement that just to the photo page though.
One way would probably be to add the CSS line for that directly into the page code (that contains the shortcodes), bypassing the theme’s CSS. But I think there’s probably a “less ugly” way.
That’s the. most difficult place to do an override. You’d have to move that section definition to inside of the templates that use {{ define "main" }}, or remove the CSS that targets .wrapper (but why .bio too-- gross terrible) and add CSS that targets a new div class you define for indexsingle and list.
BTW, the way I fixed this is to implement CSS directly in the photos page at the top inside style tags. It’s not that pretty (or organized) but it works.
