Adding photos and sounds to journal posts

Okay, so let's put some pics and sounds in your posts! The images and sound files have to be on the internet somewhere, they cannot be on your computer!!!

Contents

IMAGES

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).

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. Then on your journal post, add the text <img src=" and then PASTE the location you copied from your image - in this case https://inaturalist-open-data.s3.amazonaws.com/photos/15496211/large.jpg, then type "> so it looks like this <img src="https://inaturalist-open-data.s3.amazonaws.com/photos/15496211/large.jpg">

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://inaturalist-open-data.s3.amazonaws.com/photos/15496211/large.jpg" 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://inaturalist-open-data.s3.amazonaws.com/photos/15496211/large.jpg" style="width:33%"><img src="https://inaturalist-open-data.s3.amazonaws.com/photos/29440856/large.jpeg" style="width:33%"><img src="https://inaturalist-open-data.s3.amazonaws.com/photos/56653928/large.jpeg" 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://inaturalist-open-data.s3.amazonaws.com/photos/15496211/large.jpg" style="width:33%; padding:10px;"> and the pics look like this:

Argyrophora stramineata photo credit @karoopixie | Argyrophora arcualis photo credit @karoopixie | Argyrophora trofonia photo credit @karoopixie


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.

Add captions and credits
To get this to look awesome requires a lot of styling attributes, so I'm going to suggest a simple method only.
Beneath the photos type in the captions and credits (use @ mentions for images on iNat). Use a pipe (|) or other character between image credits. And I suggest you put a line beneath to separate it from the rest of the text. To add a horizontal line just type <hr>.

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 ;-)

AUDIO

You can add audio to posts too!
The basic code for adding iNat audio is:
<audio controls>
<source src="https://website.com/audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
<p>caption and credit</p>
</audio>

and the audio looks like this:

Bokmakierie duet by @karoopixie



As with images, go to the observation that you want to embed, RIGHT-CLICK on the audio slider, LEFT-CLICK on copy audio address and PASTE it into your source code.

You can embed recordings from other sites too if they allow it. On Xeno-Canto you can click the "Embed" link and it will give you the code you need to add to your post. Just copy and paste, and it will look like so:



If you have any other suggestions, questions, improvements or amendments, just let me know :-)

.

Publicado el enero 29, 2019 08:57 MAÑANA por karoopixie karoopixie

Comentarios

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

Publicado por outramps-tanniedi hace alrededor de 5 años

Pleasure Di :-)

Publicado por karoopixie hace alrededor de 5 años

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.

Publicado por karoopixie hace alrededor de 5 años

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!

Publicado por sandraf hace más de 4 años

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

Thanks for the compliment :-)

Publicado por karoopixie hace más de 4 años

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

Publicado por sandraf hace más de 4 años

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.

Publicado por karoopixie hace más de 4 años

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

Publicado por sandraf hace más de 4 años

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

Publicado por jennyh hace más de 4 años

@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

Publicado por jennyh hace más de 4 años

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

Publicado por sandraf hace más de 4 años

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

Publicado por jennyh hace más de 4 años

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

Publicado por jdmore hace más de 4 años

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!

Publicado por mamestraconfigurata hace más de 4 años

Thank you, this was so helpful!

Publicado por aspencer hace casi 4 años

Thank you for the thanks, everyone :-) I'm very glad this has been helpful.

Publicado por karoopixie hace casi 4 años

@karoopixie Is there a way to rotate photos in a journal post? I am using someone else's photo in a post, so I don't have control over what it looks like on its own, and I usually have better luck pulling photos from the internet, rather than downloading and uploading them somewhere else.
BTW this post has made my journal posts SO much better so thank you so very much for laying this out!!!

Publicado por mklein1216 hace más de 3 años

@mklein1216 yes you can rotate images. Add this to your style attribute transform:rotate(90deg);

Change the degree of rotation to suit. I have used 90deg in the example, but you could use 180deg or 270deg as well.

This won't necessarily work on all browsers!!

Thank you for your kind words :-)

Publicado por karoopixie hace más de 3 años

@karoopixie Thank you so much! Much appreciated!

Publicado por mklein1216 hace más de 3 años

This post is now available in Russian :-) https://www.inaturalist.org/journal/alex_iosipenko/43527- thanks to @alex_iosipenko
Этот пост теперь доступен на русском языке :-) https://www.inaturalist.org/journal/alex_iosipenko/43527- спасибо @alex_iosipenko

Publicado por karoopixie hace más de 3 años

Thanks so much for this - it's really useful. One small note - there's a typo in the first bit of code. It should be src, not scr. Thanks again!

Publicado por slow_walker hace alrededor de 3 años

Pleasure, @slow_walker :-) Thank you for pointing out the typo! Have fixed.

Publicado por karoopixie hace alrededor de 3 años

It's not working for me in comments anymore, has something changed?

Publicado por zdanko hace alrededor de 3 años

Point me to the recalcitrant comment, @zdanko ;-)

Publicado por karoopixie hace alrededor de 3 años

smh it's working now lol

Publicado por zdanko hace alrededor de 3 años

Thank you! I need this!

Publicado por cheekychew hace más de 2 años

Thanks, Chrissie! Unfortunately all the image links are broken now :-( I don't have the energy to redo it all right now...

Publicado por karoopixie hace más de 2 años

That's ok . I can figure it from here! ( What I seriously need is a way to search my" Favorites" to separate the moths from the rest. I have sleepless nights on my hands and am (carefully) trying to do some id's . I cant find a way to do that..

Publicado por cheekychew hace más de 2 años

@cheekychew there is currently no inbuilt way to filter your faves. There is a feature request on the forum - https://forum.inaturalist.org/t/add-search-feature-in-favorites/2502 - which is 2.5 years old, so probably not something that will be implemented soon. There are some suggestions there that may help you though...

Publicado por karoopixie hace más de 2 años

I saw that ,I dont think that request serves their original purposes for faves, I will just have to work around it, for now, or ever... Thank you for the the response.

Publicado por cheekychew hace más de 2 años

The photos above are all broken now :(

Publicado por edanko hace más de 2 años

Good news! I have finally got around to fixing all the broken image links. Have also added some stuff including how to embed audio files as well.

Publicado por karoopixie hace más de 1 año

Great post @karoopixie, this is very helpful! :)

Publicado por cnddb_brian hace 9 meses

Pleasure @cnddb_brian :-)

Publicado por karoopixie hace 9 meses

Agregar un comentario

Acceder o Crear una cuenta para agregar comentarios.