The Blog Editor #3 - Image Components

+5

What are 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:

The icon for the Image Component in Step 2

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.

Adding an Image

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.

The options initially presented to you are:

- Add Photo (explained next)

- Choose Collection

- Search Inside Collections

Choose Collection

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.

Search Inside Collections

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:
The result of searching Nauru in the Search Inside Collections page

Add Photos

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.

The add photo page

Editing Photos

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:

 

 

Image Options

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:

The options provided for an Image Component

As you can see, you can edit properties of your image itself, that being whether it has a border, as well as border size and border color.

You can also change the options of the caption, including font size, style and color. 

As usual, you can also apply all these options to all other images too if you want to keep all your images with the same style.

Advantages over HTML

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.

Final Thoughts

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.

+1
Level 64
Apr 12, 2021
For all images you can right click and click open in new tab, which is basically a poor man's pop up.
+1
Level 42
Apr 12, 2021
I just loved this blog. Now everyone know why we need to use free images! And I totally agree with the explanation of the HTML vs. Image Component. I’m loving this series and the update!
+2
Level 52
Apr 12, 2021
If you're going around banning people for making JetPunk lose money, you should ban the JetPunk Premium members.

Okay, but in all seriousness, I am a huge fan of the update. I've always been worried about picture problems on text, click map, and multiple choice quizzes, but at least now it's solved on blogs.

+1
Level 68
Apr 13, 2021
Thanks! But yes there's a clear difference between actively losing money you've gained (i.e. being sued due to carelessness) and just not gaining as much money as you might have.

Nonetheless, buying premium is not necessarily a money-loss, we haven't looked into it fully, and it also isn't actively negative.

+1
Level 58
Apr 13, 2021
Thanks for this great explanation! Stewart, if you find the time, after this series do you mind creating a blog on how to upload images to Wikimedia Commons? Thanks if so. Also, if you upload your SVG to Wikimedia Commons for a thumbnail slightly before uploading it to a quiz, do you have to credit yourself?
+1
Level 52
Apr 13, 2021
If you want to upload to the Commons, first create an account, after which they'll give you a handy little tutorial. By the way, I really don't recommend uploading anything to the Commons unless it's truly vital to your quiz.
+1
Level 68
Apr 13, 2021
I agree with GOM, to elaborate on that, uploading your own images to Wikimedia is "fine" if you have permission to. If you try uploading copyrighted images to Wikimedia then you'll get banned from Wikimedia, because this is a direct violation of their policies.

However, using it to upload your own creations (such as a custom homemade svg for a thumbnail), then this is allowed.

Personally I haven't really used Wikimedia Commons for uploading images, so I don't think I can answer write that blog very well.

+1
Level 52
Apr 13, 2021
I've uploaded a few things to the Commons (you can see everything I've done here), and uploading is pretty simple. Just create an account, make sure you have the rights to the image, and then fill out some information, like date of creation and a description. Mass-uploading is also possible, if you don't have the time to upload each and every one individually.
+1
Level 58
Apr 13, 2021
Thanks for help GOM and Stewart! It sounds like I don't need to credit myself for the custon SVG I uploaded a while back then.
+1
Level 52
Apr 14, 2021
By the way, I'm not sure, but I think me and Stewart are the only users who have used custom flagmaps in our quizzes.
+1
Level 55
Apr 14, 2021
KoljiVriVoda has as well, I think
+1
Level 52
Apr 14, 2021
I dunno. It seem Kolji simply took the images off the Commons and re-uploaded them to Imgur.
+1
Level 55
Apr 13, 2021
@Clutch - if you're uploading personal images to use (i.e. screenshots, images you made yourself), I would recommend uploading them to Imgur or Imgbb, since the process is a lot shorter and easier. I generally use Imgbb since Imgur is blocked on many school computers.

Also, Wikimedia doesn't really approve of users uploading their own images. I've had many files which I uploaded myself for thumbnails and picture quizzes, deleted by Wikimedia Commons. For example, many of user dug28's images used in his picture quizzes have been deleted. If you view the attribution for the images in this quiz, it'll say that they've been deleted because ...while they're well-drawn, they have no educational or historic value and don't belong on Commons.

+1
Level 55
Apr 13, 2021
If the images are similar to the ones @GOM uploaded, which have educational and historic value and can be used by other users, and possibly for articles, (country shapes) then those can be uploaded.
+1
Level 58
Apr 13, 2021
Hmmm...I haven't been on Commons in forever...I really should check if my custom SVG was deleted...

Edit: It hasn't! I'm pleased!

+1
Level 44
Jan 23, 2022
Imgbb is blocked on my school computer ;-;
+1
Level 44
Jan 24, 2022
I know you can use instead of Wikimedia/Wikipedia or Pixabay, but it would be nice in a future update if we could request for no-copyright image hosts.
+1
Level 68
Jan 24, 2022
I'm not sure what you mean. Give an example?