Thank you. The script was really helpful as a starting point, especially using pngpaste. And I'm not very familiar with bash stuff so that was easier to modify than write.
First I added an extra line to convert the image to 50% size so they wouldn't be too big. It worked but it hurt the quality.
Then I tried uploading the full size image and 50% size image, with retina naming conventions, and using the srcset attribute for an html image tag. This didn't do what I wanted. It was displaying the retina version for me, and than blowing it up to double size anyway. It wasn't treating it like a high resolution version as I'd hoped.
So then I decided to detect the image dimensions, halve them, add them to the filename, and add height and width attributes to the image accordingly.
This was distorting some images because it'd force the height or width to a specific value, while hitting the max height or width would force the other dimension to a non-proportional value.
The max dimensions are in CSS:
max-width: 100%;
max-height: 500px;
I fixed by adding another line of CSS:
object-fit: scale-down;
I wonder what browsers don't support this. Google says Edge added support for object-fit in image tags 2 years ago. Should be OK then.
So here's my updated script which adds the dimensions to the filename:
It also sets files to readonly before uploading so scp can't overwrite, rather than checking for a duplicate with curl. (Saves a network request.) It also adds -n when echoing the url to the clipboard so a newline isn't stuck on the end.
https://pastebin.com/uCByLe8z
The script includes, in comments, a secondary ruby script for getting image dimensions using sips and then halving them and outputting in the format I want. Below that, commented out, is the version which uploaded 2 images, a retina and non-retina.
NEW CONVENTIONS FOR MY BLOG:
if you do a markdown image tag in comments
and the image name is:
myimage-WIDTHxHEIGHT.ext
where WIDTH and HEIGHT are numbers
then it will set the width and height in the image tag that's generated.
if you have retina images, set the width and height to HALF the actual dimensions to scale them down to 50% so they show up at the correct (regular) size. this corrects an issue where, normally, they get doubled.
For hotkeying the ssup (screenshot upload) script, I'm using this shell script in automator:
source ~/.bash_profile
~/c/bin/ssup
the source line loads my profile and gets paths set correctly. totally broken without that.
i have an automator workflow which just runs ssup so i can hotkey that, and a second one which runs ssup and then types ![]( pastes and types ) (like i was using with puush before). the downside of the more complete one is you need to wait for it to finish, not run it in the background. i think i'll use it anyway. i think it's pretty fast.
so the workflow is:
1) copy screenshot to clipboard (cmd-shift-ctrl-4)
2) go to blog comments, place cursor where i want an image, hit hotkey for combo automator, wait a few seconds
alternative to (2) is to use ssup only automator and then use my existing markdown format paster. you can find the existing markdown format paster applescript code at:
http://curi.us/2123-improvements-to-comments
Elliot Temple
www.elliottemple.com