Skip to main content

media test

A test post to sort out various media hosting options. I’m unsure of whether I want to store photos locally on this EC2 instance, an S3 bucket, or link to them posted on something like flickr or 500px.

DSC_8516.jpg

^ Embedded from flickr, which uses the .. media:: reStructuredText directive. Works nicely, simple, but relies on flickr for hosting (deals with their ToS and rights), and seems to load the fullsize image than scale it to size.

A Nikola gallery <- Hosted in the galleries folder, just linked here. I don’t love the photo-viewer. A lightbox would be nice, and is a doable addition. This method automatically builds thumbnails for the images though which is nice. But using a gallery means at least initially the pictures don’t show here. Unless I use a slideshow:

But unfortunately slides don’t seem to work in the stock Lanyon theme initially. Can I make it work though? -dives into template internals- The simple answer is not really. The the html for the slider in Lanyon inherits from the base template source code (on GitHub here). That seems to be lacking the Javascript to make the slides work. Nikola keeps it’s Javascript in the /assets/js folder but all those files only link to ../../../../../../bower_components (yes bower not browser).

In my searching for Nikola slide JS handlers, I found Slick which looks…well… slick. To implement it though seems like jumping down a Javascript rabbit hole by installing Slick, and it’s dependency: JQuery. I wish I could just pip install it. So slides will be tabled for now, as I don’t even really love slides as a format for showing images and it would entail a lot of setup to get just right.

Images and Thumbnails

Now to see how images and thumbails look.

/images/DSC_6133.thumbnail.jpg /images/DSC_6538-Edit-1080p.thumbnail.jpg /images/DSC_6471-small.thumbnail.jpg /galleries/sampling%20of%20pictures/DSC00895-1080p.thumbnail.jpg /galleries/sampling%20of%20pictures/DSC00995-1080p.thumbnail.jpg /galleries/sampling%20of%20pictures/DSC00891-Edit-1080p.thumbnail.jpg

The first three of those are linked from the /images/ directory, and the second three are linked from the gallery linked above. Galleries default to having a thumbnail size of 180, where as the images default to thumbnail size of 400, so that was adjusted to make them all 500px. I don’t like how each thumbnail takes up a whole line, when multiple portrait thumbnails could fit on next to each other. And I would prefer if text flowed around the images as well (at the time of writing this bit, text didn’t flow around images).

Thankfully the inspect element feature in Chrome, and the live editing of CSS makes it super easy to play around with what works in CSS and what doesn’t. Setting float: left; on the img got me part way there, but then images ran over the end of the post. overflow: auto helped, though setting that on the post div meant text initially didn’t wrap in under overhanging images. I didn’t like how that looked, so opted for using clear: left on the nav after the post. That only covered the case where there are more thumbnails than text and viewing the individual post. If there were multiple posts on a page (like the index) then they’d still overflow. Adding clear: left to the post-title class dealt with the index page case. Those changes then got added to the lanyon.css file. I added in a quick padding to the images, and removed the bottom margin.

Unfortunately though, the lanyon.css gets applied before the all.css file. To make matters worse though, all.css isn’t specified in the input of Nikola, it’s only in the output directory from what I can tell. -tries to figure out where all.css is specified- aha! lanyon.css is built upon poole.css, so if I my css changes there it works.

After all of that, I noticed this:

/images/screenshot_widowed_word.thumbnail.png

The widowed ‘I’ looks too garish. I also noticed issues where if the thumbail takes up most of the line, sometimes a few words will be thrown to the right of the images and it’ll also look weird. So I switched to doing display: inline; and will accept that as good enough. Though it turns out it doesn’t entirely fix the issue, shucks. I enabled the Typogrify filter earlier, so at this point I think fixing the widowed ‘I’ would involve tinkering with Typogrify.

Additions in lanyon.css:

.code {
  clear.left
}

.postpromonav {
  clear: left;
}

.post-title {
  clear: left;
}

img css definition in poole.css:

img {
  display: inline;
  max-width: 100%;
  margin: 0 0 0rem;
  border-radius: 5px;
  float: left;
  padding: 1 1 0 0em;
}