The Blog Editor #3 - Image Components

We now move onto Image Components. These allow you to add images into your blog, using the same photo library we have for thumbnails and picture quizzes. To add an image, simply drag and drop this component into your blog:

This will create a new image component. You can edit the caption by typing directly into the caption text box that appears beneath the image, although this is optional. You can add an image by clicking the green "Add" button.

To add an image to an image component, simply click the green "Add" button that appears after you have added the component to your blog:

Pressing the green button brings up the, hopefully familiar, photo library. To add a photo you have various options. I'll detail each one briefly and why they might be used.

This option allows you to select a picture quiz from either your account or from any english featured quiz. This will allow you to see all the images within that quiz and choose a picture from it that you want. This may be useful, for example if you know you need a satellite photo of some island, you could look through the "Satellite Images" quizzes and select the one you want.

This relatively-new feature allows you to search within quizzes themselves for images matching your answer. For example, this is extremely useful for finding flags and shapes, since you could type say "Nauru", and the images that appear are all images of picture quizzes whose answer contains Nauru somewhere in its name. See the results of that below:

Finally we have the Add Photos page, this allows 2 options:

1. Wikimedia Commons - this option allows you to paste a link to a file page of Wikimedia Commons. A file page is one which has "File:" in its url. Since all images on Wikimedia Commons are free for use with attribution, we are allowed to use them on JetPunk. (Not all images on Wikipedia are on Wikimedia however).

2. Pixabay - Pixabay is a site full of free-to-use, mostly public domain, images. We allow users to directly search images using keywords, which means it's often quicker and easier to find thumbnails and such on Pixabay, as you can search what you want and then select it.

Up to now, all these functions were possible to achieve on both desktop and mobile. However, the next step is editing a photo which is currently not possible to do on mobile due to the fact it is a touch screen and all the edit photo capabilities require mouse dragging. Once you have an image selected on Desktop though, you can edit the brightness, contrast and the crop of the image by dragging the various handles and sliders. For example, searching star you might select this image:

Which, after editing, would show the one on the right. This would result in the following image:

As well as adding images and captions to your image components, we also provide many options for you to individually tailor your image to your taste. Here's an overview of those:

So, I can already hear the die-hards screaming at me that:

I already know how to use <img> tags in HTML to show images

in a blog, why should we bother using Image Components?

Well, let me explain why! 

So, there is absolutely and categorically one amazing thing you get with Image Components that is 100% impossible to achieve through HTML on Blogs, and that is popup images! Every time you use an image component, you can click on it to show a full-size version of it. This is something which is not possible to achieve through pure HTML, and that's why Image Components are superior.

So in the end, Image Components are probably one of the best additions to the new Blog Editor, as they allow for such easy addition of images, without knowledge of coding at all, and all with the ability to popup the image too on the blog page. So many advantages, little disadvantage, right?

Well, there is one notable disadvantage. However, it comes with a massive disclaimer: you can't add custom images to Image Components. 

This means if your image isn't on Wikimedia or Pixabay, you're in a sticky situation because there's no way to add it. Now, you could add it via HTML, but we don't want to promote that for one simple reason: 

Legal challenges.

By adding an image to a blog (or a quiz) using HTML, we trust that you have the full rights to use that image. For those unaware, all content on the internet and in real life has a copyright status attached to it. Much of the content on Pixabay is "free-to-use" or in the public domain, this means we can show that image on JetPunk completely free and without needing to pay or ask. However, many images are copyrighted by their creator, and so using these would put JetPunk under unnecessary legal risk since the owner could sue JetPunk for using their images without permission and without attribution, both of which could result in JetPunk having to pay out. Of course, if this ever happened you'd likely be banned for making JetPunk lose money. 

Lesson of the day, copyright is a very delicate and challenging thing, and anyone wishing to go around this should do so very carefully. If we get a request to pay out royalties or defamation charges because you used an image via HTML you weren't allowed to, we won't hesitate to remove that content (i.e. blog / quiz) as necessary. 

Essentially, using the Image Component is safe, using HTML images can be dangerous, so do so at your own (and JetPunk's) risk.