Deviant Login Shop  Join deviantART for FREE Take the Tour

:iconastrikos: More from Astrikos

More from deviantART


Submitted on
May 8, 2013
Submitted with Writer


13,446 (29 today)
461 (who?)

PE: How to embed things

Wed May 8, 2013, 4:25 AM

Written by Astrikos for projecteducate's community week. 
You may have noticed GIFS and hot things in people's journals and profiles. 
With HTML and CSS, you can add some hotness to your journals and profile.

Pretty neat, yes? 

Embedding Images and GIFs

DeviantART Images
    Images on dA can easily be linked with thumbcodes. 
While on a deviation page, all you have to do is scroll down and look right until you see:

Screen shot 2013-04-28 at 1.18.43 PM by Astrikos
Copy and paste the thumb code. 

And if you want it bigger: 
Silver River by dekorAdum

And bam. There you are.
If that's not good enough, you can play around with the size like this.. .
<da:deviation width="Number"  id="deviationID">
It's the thumbcode number without thumb in it... 
Trying it out... 
<da:deviation width="380"  id="367944988">
Gives us:
<da:deviation wytiwyg="1" width="380"  id="367944988">

If you want to play with height of dA deviations (with HTML) , you will need to use the method explained below. 

All kinds of images, not just deviantART ones

With this method, you can link any image you want from the internet(including dA images) , however,  HTML is involved. 

And now.... 
Go find your adorable/sexy  GIF/Image on wherever. Tumblr is especially useful. So is google. Express yourself.

The code is... 

<img src="Direct Image URL">

That's it! Easy. 
Right click, then select Copy Image URL to get the direct image URL. 
Screen shot 2013-04-28 at 1.36.30 PM by Astrikos
And then you're done!


You can resize things the HTML way.

(Width: 310) (height: 430) 
(Code: <img src="" width="310" height="430">

Default sizing

Or for deviantART images,, all you need to do is drag and drop and resize that way. (in Journals) 
You can resize the HTML Way.. 
However, you need to have images that link to the deviation. 

Linking Images

Perhaps you want to create a graphic for your profile page that links to something else. 
First, find your image and upload it to st.ash or any other hosting program. Like flickr, tinypic, etc. 
I find to be much quicker. 

I'll use project educate's header image:

I the image URL so  I right click on the image,
and select copy image URL

Not :  (this link is the image adress.) 

I take the image URL and paste it into this code format: 

In our example, this gives us the code: 

In turn gives us: 
Click it! It will redirect you to project educate! 

You can also apply the resizing methods shown above. 

Embedding Video

You can also embed snazzy youtube videos into your journals! 

Take a look at this code:
<da:embed profile="video type" id="ID of the video" />

Note: The ID means this....

An example would be 
<da:embed profile="youtube" id="CIx0P1KDkVk" />

And that gives us: 
<da:embed profile="youtube" id="CIx0P1KDkVk"/> 
Compatible video types: 
:bulletpink: Vimeo
:bulletpink: Film 

Embedding a music player

Mini Youtube Player embeddable code by CypherVisor

Good luck and happy embedding! 
If you have questions, you may comment below!

A tutorial written by `Infinite-Heart for #projecteducate's community week.
Add a Comment:
TripplePoint Featured By Owner 1 day ago  Hobbyist General Artist
I tried many times but I can't add another Deviant's Profile gif to some of my art's description.
Any tips? 
Astrikos Featured By Owner Edited 1 day ago   General Artist
To link a deviant's icon all you need to do is go like :iconDeviant'sUsername:, 
so for you, I'd type in :icontripplepoint: and then that gives me :icontripplepoint:!

If you want just a link, :devdeviant'susername:. 
So :devtripplepoint: -> TripplePoint
TripplePoint Featured By Owner 1 day ago  Hobbyist General Artist
THX, i appreciate the help:D (Big Grin) 
Astrikos Featured By Owner 12 hours ago   General Artist
andy12678 Featured By Owner Jun 19, 2014  New member
So you need premium to embed images/gifs? That's really annoying
tails-lover-2000 Featured By Owner Jul 11, 2014  New member  Traditional Artist
Actually, you don't need premium in order to add gifs to your profile (like in your ID, journals, etc..) First, copy the image's URL. Next, put <img src=" before the image's URL. Now, after the image's URL put "> and you should be good.

Do it like this: (without spaces)

<img src="… ">

Try it out.
Astrikos Featured By Owner Jun 20, 2014   General Artist
Yes it is, sorry D:
Maddie2022 Featured By Owner Jun 7, 2014   Traditional Artist
The direct image URL isn't working for me. Why?
Astrikos Featured By Owner Jun 9, 2014   General Artist
D: I don't know. Link me and see if I can get it to work?
KeyLimeCliche Featured By Owner May 30, 2014  Hobbyist Digital Artist
I finally found what I was looking for (linking images), however the part where it says:

"I take the image URL and paste it into this code format: 


In our example, this gives us the code:"


The code doesn't show up; is there any way you can send me the code through comments or a note? That would help a lot! Thanks!
I wanted to get this image:…

but link it to this:…

Would this be the correct code to use after all? And if so, can I resize the "thumb-link image (for lack of a better term)"?; I have a thumb with an appropriate size on my profile, and I would like to keep this size so that I can fit more thumb images. 
Add a Comment: