02:09:24 <Aeyoun> Anyone doing responsive hero images with Nikola? 07:51:52 <KwBot> [nikola] kdelwat opened issue #2153: Using underscores for subscripts in KaTeX breaks formatting. https://github.com/getnikola/nikola/issues/2153 11:35:58 <KwBot> [nikola] Kwpolska closed issue #2153: Using underscores for subscripts in KaTeX breaks formatting. https://github.com/getnikola/nikola/issues/2153 11:36:27 <KwBot> [nikola] Kwpolska assigned issue #2153 to Kwpolska: Using underscores for subscripts in KaTeX breaks formatting. https://github.com/getnikola/nikola/issues/2153 17:12:56 <KwBot> [plugins] humitos opened issue #122: Snippets plugin https://github.com/getnikola/plugins/issues/122 17:29:55 <KwBot> [nikola] ralsina closed issue #2148: watchdog: command 'gcc-4.2' failed with exit status 1 https://github.com/getnikola/nikola/issues/2148 19:47:58 <polyzen> apparently there's a feature where certain ..tools can ping google right after generating a sitemap 19:48:16 <polyzen> perhaps there's something like this for deploy? 19:49:32 <ralsina> polyzen: yes, 1 sec 19:49:59 <ralsina> polyzen: https://plugins.getnikola.com/#ping 19:50:45 <ralsina> polyzen: if you have questions, Aeyoun is the author 19:51:41 <Aeyoun> polyzen: just add "nikola ping" as the last deployment command. Read the readme. 20:05:29 <polyzen> ralsina, Aeyoun, gotcha. thank you 20:06:59 <polyzen> i don't actually use nikola deploy, but cp. maybe i should change that 20:08:57 <Aeyoun> polyzen: youcould just use "nikola ping" on its own. 20:09:25 <Aeyoun> polyzen: pre-deployment is the right time to run "nikola check -fl" 20:09:33 <polyzen> Aeyoun, that would work 20:09:47 <polyzen> don't think i've ever used check >.> will take a look at that as well 20:11:36 <Aeyoun> polyzen: don’t you use any quality assurance? ;) 20:12:10 <Aeyoun> check -lr is nice. Horrible to realize how many external links are broken, but fixing them means your visitors will have a better time. 20:12:32 <polyzen> Aeyoun, ls >.> 20:12:33 * Aeyoun is trying hard to unlearn calling people "users" as only software and drug deals call their costumers "users" :P 20:12:37 <polyzen> is my QA :p 20:13:01 <ralsina> blah, nikola orphans reports 6354 orphan files in my site 20:13:09 <polyzen> lmao 20:13:10 <ralsina> I'll debug that eventually, I guess 20:13:33 <Aeyoun> ralsina: is that different to "check -f"? 20:13:53 <ralsina> checking... 20:14:17 <Aeyoun> I still have the code.css problem every time I build, by the by. 20:14:27 <Aeyoun> Can’t for the life of me work out whats going on. 20:14:59 <polyzen> nikola orphans shows the same output as `check -f` for me 20:14:59 <ralsina> Aeyoun: is that still an open issue? 20:15:11 <ralsina> it's supposed to be the same implementation at least :-) 20:15:13 <polyzen> well, not literally the same. same files 20:15:15 <Aeyoun> ralsina: should be :P 20:15:22 <ralsina> yeah, same thing 20:15:28 <Aeyoun> nikola auto; will re-build code.css every ~30 seconds but only if another file has been touched. 20:16:04 <ralsina> it looks translation related in my case 20:16:44 <Aeyoun> the orphans? 20:16:53 <Aeyoun> Learn them English? #easyfix 20:17:01 <Aeyoun> They need an education. 20:18:38 <polyzen> wth? nikola orphans 2> /dev/nuil 20:18:46 <polyzen> zsh: permission denied: /dev/nuil 20:19:22 <polyzen> not sure if i just haven't used redirection in a long time or.. 20:19:53 <polyzen> btw `nikola help orphans` has "Output contains filenames only (it is passable to `xargs rm` or the like)." 20:20:09 <polyzen> yet this is part of the output of `nikola orphans` Scanning posts.done! 20:20:32 <polyzen> am i missing something/s? 20:22:13 <polyzen> lol 20:24:17 <Aeyoun> wrong logging level? 20:24:23 <polyzen> typoed "null 20:24:25 <Aeyoun> Oh, those were removed. Then I don’t know. 20:24:26 <polyzen> " 20:26:10 <ralsina> Yes, the help is wrong 20:27:23 <ralsina> polyzen: can you file a bug about the help? 20:27:29 <Aeyoun> ralsina: have you seen anyone do hero or lead images in a Nikola blog? (Lead are the small images in indexes, and hero is the huge image at the top of an article.) 20:27:44 <ralsina> Aeyoun: not that I recall 20:27:49 <ralsina> Aeyoun: should not be hard to do 20:28:03 <ralsina> I sorta want to port one of the medium-like themes that support those 20:28:08 <ralsina> someday 20:28:25 <Aeyoun> ralsina: https://www.aeyoun.com/review/moto-360.html The <picture> is read from post.meta(heroimage) which contains the HTML blob inside the picture. 20:29:12 <Aeyoun> Kind of horrible. Was thinking about better ways of doing it. Mostly based on images with file named in special way that Nikola would look for to make the source sets. But that would probably turn very ugly very fast. 20:29:40 <ralsina> you could just put the srcset in the metadata and leave the rest in the template? 20:29:43 <ralsina> wrapped in an if 20:29:56 <Aeyoun> .. heroimage: <source sizes="(min-width:705px) 705px, 98vw" srcset="/images/moto-360-wrist-350.webp 350w, /images/moto-360-wrist-700.webp 700w, /images/moto-360-wrist-1080.webp 1080w, /images/moto-360-wrist-1500.webp 1500w, /images/moto-360-wrist-3000.webp 3000w, /images/moto-360-wrist-4530.webp 4530w" type="image/webp" /><img sizes="(min-width:705px) 705px, 20:29:56 <Aeyoun> 98vw" src="/images/moto-360-wrist-700.jpeg" alt="Moto 360 on my wrist" srcset="/images/moto-360-wrist-350.jpeg 350w, /images/moto-360-wrist-700.jpeg 700w, /images/moto-360-wrist-1080.jpeg 1080w, /images/moto-360-wrist-1500.jpeg 1500w, /images/moto-360-wrist-3000.jpeg 3000w, /images/moto-360-wrist-4530.jpeg 4530w" type="image/jpeg" /> 20:30:36 <ralsina> Aeyoun: *or* you could create a "hero_srcset" function, put it in global context and call it from the template 20:30:48 <polyzen> ralsina, will do 20:30:50 <Aeyoun> I kind of want to shoot everyone involved in developing "responsive images" for the web. 20:31:09 <ralsina> Aeyoun: that could look somewhere for conventionally-named images related to the post 20:31:15 <ralsina> yes, the syntax is horrid 20:31:40 <Aeyoun> It *can* be automated, but that still puts responsibility of naming files properly on the author. 20:32:05 <Aeyoun> Having Nikola make scaled down versions from one giant image could be a better way to go. 20:32:30 <ralsina> Aeyoun: well, we already do that, just without steps 20:32:46 <Aeyoun> Where? and what steps? 20:32:53 <ralsina> Aeyoun: we do thumbnails 20:33:08 <ralsina> Aeyoun: so, we could do many thumbnails of different sizes 20:33:28 <Aeyoun> ralsina: How would we know what sizes to make? ;) 20:33:34 <ralsina> then we would need to massage src attributes to srcset ones where needed 20:33:37 <Aeyoun> That is where the "sizes" attribute comes in. 20:33:50 <ralsina> Aeyoun: I assume that is sort of always the same? 20:34:09 <ralsina> or does it need careful planning for each image? 20:34:21 <Aeyoun> Not really? The above was for a full page-width example. What if it was just a mall 1/3 of the page icon? 20:34:34 <Aeyoun> ralsina: would need to know the intended use for the image, I think. 20:34:46 <ralsina> hmmmm 20:34:54 <ralsina> let me check the srcset attrib 1 sec 20:35:01 <Aeyoun> No point making 128*128 or 64*64 for an image,but that could be useful for icons. 20:35:58 <Aeyoun> Here i a nice mix of sizes. https://www.aeyoun.com/review/filelocator.html 20:36:09 <Aeyoun> It kind of depends on the use what sizes are needed. :-/ 20:37:03 <Aeyoun> In an ideal world, you should provide the exact size the image is going to be used it. And then double that for retina and double it again for 4k. Plus half-of-that and third-of-that for mobile. 20:37:36 <ralsina> Aeyoun: it is possible to do a best-effort thing and have "not too horribly large or small" images? 20:38:00 <Aeyoun> ralsina: the "sizes" attribute is supposed to solve this. 20:38:10 <Aeyoun> sizes="(min-width:705px) 705px, 98vw" 20:38:27 <ralsina> yes, but the combinations are too many, right? 20:38:32 <Aeyoun> if screen is at least 705px wide, the image will be 705px wide. otherwise 98% of the viewport 20:39:04 <Aeyoun> viewport being unknown as its the screen size and resolution of the user's phone. 20:39:21 <Aeyoun> sizes="(min-width:1080px) 1000px, (min-width:705px) 705px, 98vw" 20:39:30 <ralsina> We could go with large.jpg 2048w, medium.jpg, 1024w, smaller 800w 20:39:33 <Aeyoun> It gets complicated really fast. 20:39:46 <ralsina> and not care about specifying the actual display size and leave that to CSS 20:40:42 <Aeyoun> Ah. But the "sizes" thing is required. Otherwise the browser wouldn't know what size from srcset to download. 20:41:10 <Aeyoun> Browser is supposed to look at both and find the best match. Taking bandwidth and sreen size into consideration. 20:41:10 <ralsina> ugh 20:41:28 <Aeyoun> An iPhone on EDGE could download a non-retina because it's network would suck. 20:41:33 <ralsina> I see examples without sizes 20:42:19 <Aeyoun> http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-picture-element 20:42:45 <ralsina> ok, I saw how a professional does this and it looks totally impossible to automate: https://mattwilcox.net/web-development/keeping-srcset-and-sizes-under-control 20:42:45 <Aeyoun> (HTML 5.1, but supported already in Chrome and Firefox. Partially in Edge and Safari.) 20:43:31 <ralsina> without sizes? Sure, we can automate it. 20:43:41 <ralsina> with sizes? We can*maybe* automate it for things like figure 20:44:14 <Aeyoun> http://www.w3.org/html/wg/drafts/html/master/semantics.html#image-candidate-string 20:44:20 <Aeyoun> (aka. "sizes") 20:44:49 <Aeyoun> I’m doing this manually now, and I end up not including images. :P Too much work. 20:45:06 <ralsina> we *could* automate it if the user tags the image with some sort of label about the intended size 20:45:29 <ralsina> like, if it's marked "small" or "full-width" 20:45:30 <Aeyoun> And when you’ve got your PNG or JPEGs you’d want to make the exact same images in WEBP because it’s half the size. 20:45:51 <ralsina> Aeyoun: is webp that small? We couid consider automatic conversion 20:46:07 <ralsina> Like, for every jpg or png we copy, create a webp version, and fix all links 20:46:47 <Aeyoun> ralsina: in the giant-image cases it’s half the size. In smaller images it vary but its always better quality and smaller files. 20:47:10 <Aeyoun> How about this meta field: 20:47:13 <ralsina> Aeyoun: can you file that as an issue? Looks like a fun, low hanging fruit 20:47:44 <Aeyoun> .. heroimage: 720px, 320px; giant-source-image.jpg 20:48:03 <Aeyoun> desired sixes separated by comma, semicolon, source image 20:48:20 <Aeyoun> we make the desired sizes + double and half their widht plus include the original size. 20:48:32 <ralsina> could be 20:49:38 <Aeyoun> No, fuck. Can’t automate the "sizes" from that. OK, "imagehero: sizes-attrib; source-image.jpg". We’d just have to extract as many parseable sizes as possible and put the sizes-string in the img untouch. 20:49:45 <Aeyoun> That would work. 20:49:56 * Aeyoun will make a bug 21:06:41 <KwBot> [nikola] Aeyoun opened issue #2154: Hero and lead images https://github.com/getnikola/nikola/issues/2154 21:06:55 <Aeyoun> ralsina: does it look sensible? 21:08:27 <Aeyoun> ralsina: I did just realize this should be a generic funtion also, in addition to the hero and lead image use cases. 21:14:31 <ralsina> looking... 21:21:13 <ralsina> looks good to me 21:21:32 <ralsina> I may split the webp generation into a separate plugin, maybe 21:23:22 <ralsina> Aeyoun: also maybe the syntax would be nicer by not having all the data in the argument, and having :sizes: :alt: etc 21:27:48 <Aeyoun> ralsina: I started out from thinking about this as a metadata field fr all the renderes. 21:28:04 <Aeyoun> Not sure if you can do that there? 21:31:49 <Aeyoun> I can’t work on this now. >.< Too many balls in the air and too few paid jobs. 21:47:02 <polyzen> Aeyoun, sweet theme 21:47:39 <Aeyoun> polyzen: thanks. :-) 21:47:53 <Aeyoun> I’m most proud of the "Topics" page right now. 21:49:27 <Aeyoun> First time a visitor has ever licked in on someone’s sitemap willingly, I’m sure. :P 21:49:33 <Aeyoun> *clicked 21:50:39 <polyzen> :o 21:52:26 <Aeyoun> (It’s a customized tags.tmpl with path altered using the new options for that, https://github.com/getnikola/nikola/commit/0c1c59b219 ) 21:53:49 <Aeyoun> I thought about making a bug about supporting such a page, but concluded that it’s pretty much impossible to tell anyone’s site-structure and determine the important stuff automatically.