I’m re-doing a blog using Armadillo and I’d like to use the Markdown feature and reference images, rather than dropping them into the posts.
I thought I might be able to point to photos stored on Google Photos but can’t get that to work. I’d rather not store the images on the web server because it’s only a hobby site.
Any recommendations for image storage I could use that actually lets me point to the kind of URL that Markdown ‘likes’?
TIA
Rob
Amazon S3. Incredibly cheap. But not free.
Do you have an example photo?
A link to an example photo? Sure.
https://goo.gl/photos/vyMskMrAcKfvX7ZPA
That is the link to the album.
The real image is that one: https://lh3.googleusercontent.com/oCfMX3EK4iIDOVg10tsuOsJkp5uixzYgoHSil5wZToOTOAGkQpeqO4GEqoYAAUO5Tsimp93ZrgPEMrtjBdm2iwCnSlwAuWbXPcXPFPZvC2VxGu7t4GaJnbvjF16E3u0GHwAo9IAbEiasaML3Aj6Ku9sBfUp57QK6ptGv0IgzYLeaqHgOzVJ0xqhxXhnpQbSYQ-c2fitj4te1FbQq77KiwkqlfgQMgOSk5PGVDukrgMQs_NX5Vnt_tMeqWha7TO2HqnKweSHhgD3ZXKkLXLTNKO-v31hqZMmDXeWsiYrJ_HKx7GbVINYC9JSAzkTGwlSn1eFxqMK2v-O8xe5sAKFYNyoeZzj-G0tYbltr35WL6yT7w-c__SHJS_IORAbzPLJrbVh93VYYGSPCcbG-VEiKJPQC8w1ZWsK_iIdYbM9PEbMaqtDm7BzB6h85embfx7okD-c7OTc6OUYWsoFhrxvHud-qIsiiydW6lWODSa4foVDrTsbYdnuT5pMPBBvy9RCUq4jSyu3zitiVaH79kLU8gno8qx1f2xanwPCbtObiJW2-GmidLUB9ZgiiTzWPPzSV9hQ81QXDVeobu9dXiEyk3tBHctEY8CVekif6vnnsS3TUScQLZfVGU7H7nqV2FrPtok2dL_pDWO9HoRcYE46kpkmtWIyiW3G551VwBLdnzew=w1186-h1580-no
Not nice, hmm…
Ouch! That’s ugly on a stick.
on the photo album, choose “open photo in new tab” (chrome) and you get that link.
Rob: I’m not sure you really want to use Markdown for images. I love Markdown. Use it every day. But one of its weak points is images. This is mainly related to it being developed in 2003 when people were not thinking about responsive images.
If you know the size of each image, and if you know for sure that it will fit into the max width of your content container, then you could be okay. But most people don’t know this. Neither do I many times.
The alternative approach is to use a wee bit of HTML code. I don’t memorize HTML, but instead I use Typinator (or TextExpander or similar shortcut software) to put in this generic code:
<img src="fullURLhere" alt="textdescription" width="100%" />
I know this doesn’t answer your primary question, but your example is one spot where Markdown does not work great. That width at 100% bit is really important as it will auto-fit a larger image into the available content container. And of course you can set at something less than 100%.
As @instacks indicated it’s always possible to get a URL from Google Photos. It’s long, it’s ugly, buy copy/paste solves that pretty easily. An alternative that would probably be a little better is Flickr. But in this case only a little. The advantage is Flickr automatically creates multiple sizes of an image: so this might be helpful in some cases.
If the hobby page is for you, I still think the easiest method (with the shortest URL) will be to directly upload to your server area in a folder named “myimages” or similar. If this is for a client, then I completely understand why you don’t want to go that route.
Amazon S3 is great but I can’t imagine using it for only a few images. Much more hassle than benefit. If you have a ton of images, or want to warehouse really big stuff (video, audio, etc.) then it may make sense. I use it all the time for course websites where students are playing media content from it, or downloading from it. I rarely get charged more than $0.18 a month! Absolute steal in terms of pricing.
… but in this case it seems not needed and adds complexity.
Responsivness of images is not at all related to markdown.
Just add a bit of CSS and all images on the page, markdown or not, will be adapted to the screen size.
… and that CSS would be?
width: 100%;
height: auto;
}```Thanks for the suggestions fellas.
I’m disappointed that Markdown can’t handle images more elegantly but will probably pursue your suggestion @Mathew. I’ve got QuickKeys here and could probably use that for the repetitive code.
I’ve got the images to behave how I want using a combination of LiteBox and a bit of code from Jonathan (or someone else here who had a similar request) so once I’ve got this sorted I’ll be good to go.
@instacks Yep, that will definitely work. But there are definitely times when I don’t want the image to take up 100% of the width. So by using the generic HTML I can specify a width. I haven’t tried it out (as I don’t have time this morning) but will the specific HTML override the CSS? If CSS specifies width at 100% and then I insert something like:
<img src="fullURLhere" alt="textdescription" width="60%" />
Will I get an image at 60% width or 100%? (I really don’t know what would get precedence in this case. Not a coder.)
Inline style (yours) would overrule outline style (mine).
But actually you do not use inline style. See hot discussions:
@instacks : Thanks. Very interesting.
@robbeattie : If you use the CSS advice by instacks then you likely don’t need to do the “width” part of the code. You don’t need to specify it, so you could simply use:
<img src="fullURLhere" alt="textdescription" />
Or, with the CSS provided, you could use the Markdown approach.
About your original question: I generally find it easier to get URL link from images I’ve warehoused myself. I just use Transmit (or any other good FTP app), right click, and copy URL of image when posted to server. At least for me that’s much much quicker than going to Flickr, Google Photos, etc. to find the full URL.
Check out cloudinary. They have a free plan that may work for you.
Thanks @Mathew and @Elixir and @instacks. I’m slowly getting there.
Am I right in thinking at all images added to Armadillo in the way described above (i.e. via a link) should lightbox automatically? Because mine aren’t.
Thanks
Rob
I can’t remember whether it should auto-lightbox (sorry). But I added the free LiteBox stack to my main Armadillo page and the result is all images Lightbox (per settings in the LiteBox stack).