More advanced formatting.
In this blog post im going to go over the essentials for embedding images, videos and iframes into the blog post. I will first focus on images as they are sure to be the most used.
Images
There are two ways to do put images into the blog:
- Images in markdown
- Images in HTML
Images in markdown are done with the following syntax:
The name has no effect on the image and can even be left blank if you wanted. The src is the source of the image. Lets say i wanted a image of a cute dog in this post, i would first have to find this image hosted somewhere online, copy the image link and paste it into those brackets at the end of the image syntax.
for example ive found this cute dog on pintrest i would write the following:
and it would look like this:
This has a few drawbacks. Firstly and most importantly is the image size. As you can see that cute dog is rather large and with the markdown method of embedding an image there is no easy way to make it smaller despite what the internet says (ive tried all the home remedies and nothing worked). A solotion to this would be to upload the image to where ever you are hosting it (Pinterest, Imgur, derpic!?) at a size that works for you. This would mean editing, compressing and testing to make sure it is the right size and each stage re-uploading. This would be a bit of a mare.
A second drawback that is not exclusive to the markdown syntax is the fact that the image needs to be hosted somewhere this is just a fact of life. Many high end photo hosting sites like instagram have a built in feature that does it all for you in the background but its safe to say derpac.com isn't quite at that level yet (maybe next quater). For many people this isn't a huge problem its a bit of a no-brainer to just uplaod to pintrest then use in the blog. BUT I DONT LIKE IT!!1! I don't want to rely on using someone else to host my images. To combat this I will attempt to make my own image hosting service on derpac.com with the help of alv.
Images in HTML are a little bit harder but do allow you to do many more things.
The HTML syntax for a basic image is as follows:
<img src="url" alt="name">
This is much the same as the markdown where it has the image source i.e the image link and the “alt” or name. To put in an image of the same cute dog I would do the following code:
<img src="https://i.pinimg.com/564x/42/c3/e0/42c3e0c268861ac5b7a9bba28dc94cfd.jpg" alt="cute dog">
and it would look exactly the same:
However...
With HTML we can add a style tag along with the source and the alttext, this style tag allows us to change the size!
the syntax is as follows:
<img src="url" alt="name" style="width:Xpx;height:Ypx">
Where The Xpx and Ypx represent the pixels (px) in the X and Y (Width and height) directions
For example if i wanted to squish that cute dog I can do the following:
<img src="https://i.pinimg.com/564x/42/c3/e0/42c3e0c268861ac5b7a9bba28dc94cfd.jpg" alt="cute dog" style="width:500px;height:50px">
and it would look like this!:
This is great because now we can change the image size. Its not perfect but its alot easier to do than having to reupload a new differently sized image every time you want to change the image size. To maintain proportions you'll need to divide the origional dimentions by a set factor. To find the origional dimentions with an image from Pinterest or Imgur you can do the following:
- Inspect element
- Locate (with your eyes) the image URL
- Hover over it with your cursor
- And read what it says (It should say the size of the image in pixels)
This can be done either on pinterest or even on the blog if you quickly publish it and have a look.
Alternatively you can change the image size with the following code:
<img src="url" alt="name" width="X" height="Y">
This method is much more self explanatory so I wont explain... with the following code:
<img src="https://i.pinimg.com/564x/42/c3/e0/42c3e0c268861ac5b7a9bba28dc94cfd.jpg" alt="cute dog" width="100" height="500">
I can make the cute dog into a pillar:
Note: I plan on making images and other things a bit easier but it might never happen as it looks like it could be quite a challenge. If not please just copy and paste my examples above ^^
Videos
If you wanted to put a video in your blog!? perhaps to keep peoples attention you can either of the two following methods.
The markdown method is super dodgy but I guess it technically works. It doenst exactly embed the video into the blog but does give a pictoral interfact to a video. The method is embed and image that links to a video with the following code:
[](video link)
with the following code I can link a video to maintain attention when reading the blog:
[](https://youtu.be/L_fcrOyoWZ8)
With this code it will show the thumbnail and then when clicked will take you to the video:
This is cool and all but doesn't actually show you the video in the blog. To do this we can use HTML again!
With the following code we an embed a video directly into the blog to be played without leaving the blog:
<video src="src" controls></video>
A problem with this that we are now all to familiar with is the fact that the video needs to be hosted somewhere. This is not great. For the example I will use a sample video used by writefreely to show you how this HTML video feature works but thankfully there is a much cooler work around that ill come to later.
Using the following code I can embed a sample writefreely video:
<video src="https://cdn.glitch.com/db7ab5d8-dd97-466b-8180-676147e8fc40%2FUsing%20Write.as%20Themes.mp4?" controls></video>
It looks like this:
This is boring snooze fest!!! I want to be able to watch youtube while reading a blog because my attention span has been rotted by short form content!!!!
To do this we can use the wonders of iframes.
iframes
iframes are an HTML feature that is genuinely magical. It allows you to embed other webpages into a little box. The syntax is as follows:
<iframe src="webpage url" height="Y" width="X" title="title"></iframe>
Note: Like the image you can just leave out the height and width but I do recommend leaving it in
With this you can embed youtube very easily. infact you dont even need to write the code yourself just: – go onto youtube – find a video you want to embed – right click and click “copy embed code” – paste that code into the blog
with the following “embed code” from that subway surfers video:
<iframe width="640" height="360" src="https://www.youtube.com/embed/L_fcrOyoWZ8" title="Compilation PlayGame Subway Surfers / Subway Surf /2023/ On PC Non Stop 1 Hour HD" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
I can now watch it in the blog:
Similarly if you wanted to view derpac.com or alv.cx you can use the following code:
<iframe src="https://derpac.com/" height="360" width="640" title="derpac"></iframe>
or
<iframe src="https://alv.cx/" height="360" width="640" title="alv"></iframe>
it will look like this:
outro
I hope that has a cleared up any lingering questions about how to put images, videos and iframes into the blog. Hopefully before long derpac.com will support image hosting but if not just use the HTML format to edit the size of the images and it should all work out. I realise for any newbies to markdown and HTML it may look a bit daunting at first and might not be your ideal style of writing a blog. I hope with this post can you help you for future blogging.
I'm thinking I will try and add some features to make this easier to do but if this doesn't happen you can just copy and paste my example syntax code**
** I've now pinned a copy and paste blog with all the the most simplified code. As well as tables for those of you who like me can't be bothered to type out a table everytime