How to embed a picture

[Sinscerly]

I have seen a lot of people rage quitting struggling with attaching a picture to a comment. So I thought I make a little guide. It's a bit photo heavy!

I don't know if this is the best location, otherwise change it

On this forum are there two options to put a picture in a comment:

• Embed a picture in your comment.
• Upload a picture to the forum itself.

First of all, I suggest a way to attach a picture to a comment. There could be other ways, maybe they require other tools or whatever, this is my suggestion feel free to do it with a twist of yours  .

Well we want to achieve this(see above picture, this is embed) or an attachement(see at the bottom of this post).
I prefer to embed a picture as it is directly between your text

How are we gonna do this?
Embed a picture
To embed a picture which can be done with:

Code: [Select]

[img]link of your picture [/img]
So there is one thing you need to have now, that's a place where your picture can be hosted. I use OneDrive for this, others have used things like photobucket. which one do you use now Dan?
If you're not using OneDrive there is no automatically function that resizes the picture to a view-able point. So you can decide to do this yourself with:

Code: [Select]

[img width= "Picture width" (fill in the width in "Picture width", example: 400)] link to your picture [/color]

My guide will follow the way I use and it is totally free.
Therefor you will need an account at OneDrive.
Step 1. Make an account at OneDrive: Register at OneDrive (If you have a Microsoft or XBOX Live account you can use that one to) So skip this step then.
Step 2. Log In at OneDrive it is in the right upper corner.
Step 3. Upload a picture. Upload the picture you want to share with us on Carcassonne Central 

Yes I have a big structure of maps, so you can make something like that yourself.

Step 4. Embed a picture. Click on the button Embed. Then Click on generate it should pop up on your right side of your screen.

Step 5. Choose the size. I mostly go for medium.
Step 6. Copy the generated url from the box. (See highlighted).

Step 7. We now have the image url. In your comment put it between the [img.]http://put here your url [/img.] and you will see your picture in the post.

Attaching a picture
If you want to attach a picture there are some rules before you can upload the picture.
It will only work if:

• The picture is smaller then 1024KB.

            Most pictures to day are bigger then 1024KB or 1MB. Here is where mostly the problem lies.

• The picture type is doc, gif, jpg, mpg, pdf, png, txt or zip.

            Most of the time pictures will be jpg or png so that is mostly fine.

So if I make a picture with my mobile phone it mostly is around the 5MB so that's 5 times to big. We need to reduce that.
There are plenty online tools that can easily resize your image if it is to big. For instant you can use this one: TinyPNG.
Step 1. Upload your picture by clicking to the right of the panda.
Step 2. Click on the download button to get your smaller picture.

Go back to the Carcassonne Central forum to attach you picture. Go the the thread where you want to comment your picture. Click on reply.
Step 3. Click on choose file (strangely there stands Bestand kiezen in my screen, that could be different on your computer / mobile phone or ....)
Step 4. Select the picture that you want to upload, the one we have resized.
Now you should see this, if you click on Attachments and other options:

Now it should be done and your picture is attached to your comment.
If you want to select multiple files / pictures you need to remember that there is a maximum of 6 and a total of 2MB for one comment / thread.



I hope this will help for anyone that has struggles with posting a photo on the forum. If there are still problems or any typos let me know.
And post all your pictures of meeples whoooo

Linkback: https://www.carcassonnecentral.com/community/index.php?topic=3753.0

[thodekey]

That's crystal clear now.  Sincerely thanks... ...and merit +1 from me!

[MrNumbers]

Great guide, Sinscerly! Merit from me also.
I'll stick it, as it is a good material for all newcomers (and not only for them! )

The only thing I can add, is: when you embed a picture and it is still too big to fit the screen in comfortable way, you can use width attribute to shrink you oversized picture. Just put a number in pixels.

Code: [Select]

[img width=400]picture_url[/img]

[Decar]

Thanks for tsking the time to help the less tech savvy of our members. Another merit from me too!

[Sinscerly]

Great guide, Sinscerly! Merit from me also.
I'll stick it, as it is a good material for all newcomers (and not only for them! )

The only thing I can add, is: when you embed a picture and it is still too big to fit the screen in comfortable way, you can use width attribute to shrink you oversized picture. Just put a number in pixels.

Code: [Select]

[img width=400]picture_url[/img]

Oehh my first sticked thread.
Thank you for pointing this out MrNumbers, I'll add it to the thread. But this is somewhere also already done in the url from OneDrive. (See step 5 of second part)

Maybe I'm gonna do some more as the documentation of simplemachines forum isn't that easy to understand?

[Squiffything]

What if I don't have a picture of a man hanging upside down......





I'm kidding!

[Vinçon]

Let me drop this by: If you upload your images to https://tinypng.com/ first, some magic will happen and it will weigh a lot less than it currently does.

I work in advertising as an SEO and I use this more than I would like to admit and, believe me, the improvement in file size is huge and the loss of quality is inappreciable.

Hope it helps!

[Sinscerly]

Let me drop this by: If you upload your images to https://tinypng.com/ first, some magic will happen and it will weigh a lot less than it currently does.

I work in advertising as an SEO and I use this more than I would like to admit and, believe me, the improvement in file size is huge and the loss of quality is inappreciable.

Hope it helps!

Thanks Vinçon, I would change it to your site. It's easier then the one I have found merit from me.

[wolnic]

What if I don't have a picture of a man hanging upside down...

Find one of a man hanging the right way up?

[MrNumbers]

Thank you for pointing this out MrNumbers, I'll add it to the thread. But this is somewhere also already done in the url from OneDrive. (See step 5 of second part)

Yes, but this applies only to OneDrive. If someone is using his own hosting, for example, or embed some random picture from Internet, shrinking a picture with width attribute becomes necessary.

Maybe I'm gonna do some more as the documentation of simplemachines forum isn't that easy to understand?

This could be only welcomed!

[Sinscerly]

Thank you for pointing this out MrNumbers, I'll add it to the thread. But this is somewhere also already done in the url from OneDrive. (See step 5 of second part)

Yes, but this applies only to OneDrive. If someone is using his own hosting, for example, or embed some random picture from Internet, shrinking a picture with width attribute becomes necessary.

Okay you win. Indeed this probably only applies to OneDrive.   

Maybe I'm gonna do some more as the documentation of simplemachines forum isn't that easy to understand?

This could be only welcomed!

It will take some time, but it will be fun to do. Let's see what is in reach of this forum 
If there are suggestions let me know

[Decar]

What if I don't have a picture of a man hanging upside down...

Find one of a man hanging the right way up?

Found him:

[Vinçon]

Let me drop this by: If you upload your images to https://tinypng.com/ first, some magic will happen and it will weigh a lot less than it currently does.

I work in advertising as an SEO and I use this more than I would like to admit and, believe me, the improvement in file size is huge and the loss of quality is inappreciable.

Hope it helps!

Thanks Vinçon, I would change it to your site. It's easier then the one I have found merit from me.

Thanks mate!