Adding photos to journal and news posts

Okay, so let's put some pics in your posts!

The basic code is <img src="https://www.website.com/imagename.jpg">

img = image
src = source

Now if you have images on iNat that you'd like to use, you need the path to the particular photo (not to the observation). So, I've chosen a random ob https://www.inaturalist.org/observations/19800494 to work with. All photos used in this post are by Tannie Di @outramps - she asked so nicely for some help :-)

STEP ONE - locating an image on iNat
RIGHT-CLICK on the image you want to use in your journal post, LEFT-CLICK on Copy image location. We'll use the first image as example. Then on your journal post, add the text <img scr=" and then PASTE the location you copied from your image - in this case https://static.inaturalist.org/photos/30519569/large.jpeg?1548163737, then type "> so it looks like this <img src="https://static.inaturalist.org/photos/30519569/large.jpeg?1548163737">

That's one image and it will be the width of the journal post box, like so:

STEP TWO - locating an image not on iNat
To link to an image that's on the internet but not on iNat, you use the same method above. The image must be yours or you must have permission to use it and credit the photographer/illustrator (this is true for iNat pics as well, of course!!). The image has to be on the internet, not on your hard disk/computer!

STEP THREE - images in rows
Now, if you want to add, say, 3 pics in a row, you need to add a bit of extra code to stipulate the width of each pic. We'll use percent rather than specific width so that it looks good on different screen sizes (hopefully). So, the extra code is style="width:33%" which will give you 3 pics in a row. If you want 2 pics then you'd use 50% etc.

So our code for 3 pics in a row looks like this <img src="https://static.inaturalist.org/photos/30519569/large.jpeg?1548163737" style="width:33%"> (repeated 3 times) and it looks like this (using the same pic):

Of course you'd want to use 3 different pics, so you copy the image location for each one as in Step 1, for example:
<img src="https://static.inaturalist.org/photos/30519569/large.jpeg?1548163737" style="width:33%"><img src="https://static.inaturalist.org/photos/28828589/large.jpeg?1543914495" style="width:33%"><img src="https://static.inaturalist.org/photos/14337452/large.jpeg?1521637401" style="width:33%">
and you will end up with something like this:

STEP FOUR - adding spaces between pics in rows
Now, the pics are all 'stuck together', which is not a bad thing, but you might want to have some 'breathing space' between them, so you need to add a bit of code to the style attribute - padding:10px; - so your code for each image now looks like this - <img src="https://static.inaturalist.org/photos/30519569/large.jpeg?1548163737" style="width:33%; padding:10px;"> and the pics look like this:

You can change the width of the space between the pics as you choose. I have used 10 pixels here, but you can use less (~ 5px) or more (~ 20px). Play with it and see what works for you on the particular post you're creating.

STEP FIVE - Advanced resizing
(Only go here if you're feeling brave.)
In the above example the pics are all different sizes and you may want them the same height without squishing them widthways. For this you have to stipulate max-height and max-width. The max-width can remain a percentage, but the max-height has to be an actual pixel height which is where things can go a bit wobbly. So, to get the max-height you'll have to play around with pixel sizes until you get what you're looking for. Change the size and then check in PREVIEW how it's going to look. If it's not right, increase or decrease the number of pixels. For this example I have used 200px - style="max-width:33%; max-height:200px; padding:10px;" and it looks like this:

The original pics have to have a height of greater than your max-height to end up the same height on your post using this method. If the original pics are smaller, then you will end up with a row of pics of different heights anyway. This is very advanced stuff, so if you've got here, well done, and you can go and have a coffee now ;-)

{I typed this up very quickly, so if I have not been clear, or you have any suggestions for improvement, please let me know!}

Posted by karoopixie karoopixie, January 29, 2019 08:57

Comments

Thumb

Thansk very much Marion. When I'm feeling strong, I'll have a go. Very much appreciate the time you put into this

Posted by outramps-tanniedi about 1 year ago (Flag)
Thumb

Pleasure Di :-)

Posted by karoopixie about 1 year ago (Flag)
Thumb

I was going to suggest that < img src="image.jpg" width=33%> is easier than using styles, but then I saw the max-height trick... very nice!

Posted by kiwifergus 11 months ago (Flag)
Thumb

Thank you :-)

I also use proper style syntax because width=x% is deprecated and I don't want journal posts to lose their formatting when peeps upgrade their browsers. Also, iNat's native style sheets sometimes fight with my code (they always win), so proper syntax helps to ensure that the code we use is honoured.

Posted by karoopixie 11 months ago (Flag)
Thumb

Marion this is very clever, thank you! ;-)
And, yay, I was successful in bringing in one of my own observation pics onto my journal.

Can you please explain how import an external pic (i.e not an inat obs)? I tried, using the image path/name, but nah. Bear in mind I am not at all streetwise when it comes to coding.

Tks!

Posted by sandraf 8 months ago (Flag)
Thumb

Sandra, give me the URL address of the pic you're trying to use, please.

Thanks for the compliment :-)

Posted by karoopixie 8 months ago (Flag)
Thumb

Haha or eeek

My files are not stored in the cloud...is that what you mean?

If not in cloud storage, can one still upload non-iNat obs pics?

I

Posted by sandraf 8 months ago (Flag)
Thumb

Okay, the pic has to be on the web somewhere, you can't, unfortunately, link to a pic on your computer.

I will edit my post to make that clearer.

Posted by karoopixie 8 months ago (Flag)
Thumb

Aha, that figures.
Tks so much. Could be useful one day!

Posted by sandraf 8 months ago (Flag)
Thumb

How to add photos that are just on my computer, not observations?

Posted by jennyh 7 months ago (Flag)
Thumb

@jennyh Not really possible unless you have access to a drive/folder that is reachable by url. A workaround is to upload an observation with the photo concerned, copy the url for the photo, and then uncheck it from the observation. Finally, delete the observation. Alternatively, just add it to an existing observation, and then uncheck after you have copied the url.

At present, orphaned photos aren't deleted by the system, so the image can still be linked to with the copied url. This is an unofficial workaround though, and there may come a day that they go through and cull out orphaned photos. It achieves the result of having the photo hosted within the iNat system, but just with no guarantees that it will persist.

For me, that works fine, but for anyone wanting to ensure their images are more permanently available to their journal posts they should consider elsewhere to host the image. You could try facebook (which I don't use and have no idea if it's even possible to link to images there)

Posted by kiwifergus 7 months ago (Flag)
Thumb

@kiwifergus turns out flickr is the answer; you just upload your photos to flickr and specify the desired license for the photo, make it visible to the public, then use the handy "share" > "embed" option to put it in your journal post. Here's what mine turned out like:
https://www.inaturalist.org/projects/california-pollination-project/journal/26362-sierra-nevada-challenge-2019-updates

Posted by jennyh 7 months ago (Flag)
Thumb

Thanks! At the time I tried Instagram and photo's uploaded to google photo albums, but no luck with those routes!

Love the pollination graphic and it would be useful and valuable to store similar work in one's journal with visual representation as you have done

@sallyslak the pollination graphic could be a way to represent your interactions and the latest Cynanchum saga

Posted by sandraf 7 months ago (Flag)
Thumb

@kiwifergus I used the program R to generate the figures, I am happy to share code.

Posted by jennyh 7 months ago (Flag)
Thumb

Nice tutorial @karoopixie, thank you for linking it to the Forum!

Posted by jdmore 6 months ago (Flag)
Thumb

Thank you for the help. I uploaded the image to Facebook, used the code, and I believe it has worked. I will update you if it has not!

Posted by mamestraconfigurata 4 months ago (Flag)

Add a Comment

Sign In or Sign Up to add comments

Is this inappropriate, spam, or offensive? Add a Flag