Shop Mobile More Submit  Join Login

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. 
:thumb367944988:
:thumb367944988:

And if you want it bigger: 
:bigthumb367944988:
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!



Resizing: 

You can resize things the HTML way.

(Width: 310) (height: 430) 
(Code: <img src="http://25.media.tumblr.com/tumblr_lyhnrtNYq41r7e6yco1_250.gif" width="310" height="430">

Default sizing

Or for deviantART images, sta.sh, 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 sta.sh 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
:bulletgreen:  fc01.deviantart.net/fs70/o/2013/024/0/0/350289350_646745_322748439_464988_header2.png

Not : http:/communityrelations.deviantart.com/journal/Project-Educate-Continues-261205783  (this is from the address bar, not from right clicking and getting 'copy image URL'.) 

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

<a href="whatyouwanttheimagetolinkto.com"><img src="directimageURL.png/jpg/gif"></a>
For your direct image URL, you can find by right clicking and selecting copy image URL. It will end in an image file extension. (.jpg,..png,.gif,etc.)

In our example, this gives us the code: 

<a href="projecteducate.deviantart.com"> <img src="http://fc01.deviantart.net/fs70/o/2013/024/0/0/350289350_646745_322748439_464988_header2.png"><a>


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....
ht<i>tp://www.youtube.com/watch?feature=player_profilepage&v=CIx0P1KDkVk


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

And that gives us: 
<da:embed profile="youtube" id="CIx0P1KDkVk"/> 
:la:
Compatible video types: 
:bulletpink:Youtube
: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!
:heart: 








A tutorial written by `Infinite-Heart for #projecteducate's community week.
Add a Comment:
 
:iconlizzie-rivers:
lizzie-rivers Featured By Owner 22 hours ago  Hobbyist
I never knew about big thumb! Thank you so muuuuch!! 
Reply
:iconsnowflakethedoctor:
SnowflakeTheDoctor Featured By Owner 5 days ago  Student Digital Artist
Some of this isn't working for me, like the bigthumb one, does it still work?
Reply
:iconthecatspupil:
TheCatsPupil Featured By Owner Jun 14, 2015  Student General Artist
Is there anyway to embed .sfw?
I have all of the dimensions and such set up already, and I've tried a few things to make the image show, but nothing I've tried has worked.
Reply
:iconmarisaschindlerr:
MarisaSchindlerR Featured By Owner Jun 9, 2015  New Deviant Hobbyist Artist
:thumb367944988:
Reply
:iconminingfordegus:
MiningForDegus Featured By Owner Jun 8, 2015
Thank you, this is very helpful and now I can add all sorts of gadgets to my page :D
Reply
:iconastrikos:
Astrikos Featured By Owner Jun 10, 2015   General Artist
Glad this helped! :eager:
Reply
:iconobsessed-with-krazee:
Obsessed-With-Krazee Featured By Owner May 26, 2015  Hobbyist
This was way too helpful for my profile especially now that I'll be getting premium membership in like one more day.

Thank you for this thank you for the help~
Reply
:iconastrikos:
Astrikos Featured By Owner Jun 10, 2015   General Artist
:love: Glad I could!
Reply
:iconf-eminist:
f-eminist Featured By Owner Edited May 24, 2015  New Deviant
// yes ! Hello ! If you don't mind me asking , I see people who have images on their deviantart featured box , I have been trying to put one there but I just can't seem to figure it out , can you help ?
Reply
:iconastrikos:
Astrikos Featured By Owner Jun 10, 2015   General Artist
I'd love to! 
However, what featured box? You mean the ID? Or featured deviations? 
You can edit the description and then put thumbnails or external img src links in there. 
Reply
:iconwellalicious:
Wellalicious Featured By Owner May 13, 2015  Hobbyist Digital Artist
can i ask an information?
i see some users who put stamps and icons in to the deviation's info.
but i can't put any kind of image or stamp.
do you know how to do it?
Reply
:iconastrikos:
Astrikos Featured By Owner May 23, 2015   General Artist
Go edit your deviantID and then go find a stamp you like. Now scroll down and look at the right side of the page until you find the thumbcode, it should look like :thumb00000000: with the 00s actually being numbers.. Now copy and paste that in (you need the : :s)
And click save.
It should work. If it doesn't, it's because dA makes you need a premium membership to use thumbcodes.. :noes:
Reply
:iconwellalicious:
Wellalicious Featured By Owner May 24, 2015  Hobbyist Digital Artist
done, but doesn't work. i think is only for the premium :/
anyway, thank you very much! :)
Reply
:iconjust-call-me-minty:
Just-call-me-Minty Featured By Owner May 11, 2015  Hobbyist Digital Artist
Is there any way to get image links into deviation descriptions? Such as < a href="sitelinkhere">< img src="imagelinkhere"/></a>
< a href> works, obviously, but < img src> doesn't. 

Reply
:iconastrikos:
Astrikos Featured By Owner May 23, 2015   General Artist
You can add it in using the sta.sh toolbar when editing deviation descriptions. And you can use thumbcodes as well
Reply
:iconjust-call-me-minty:
Just-call-me-Minty Featured By Owner May 24, 2015  Hobbyist Digital Artist
It hasn't worked for me before, It just takes whoever clicks it to the image itself, not the link I put in the < a > tags. .
Reply
:iconnigodope0:
nigodope0 Featured By Owner May 8, 2015  New Deviant
Can for providing step by step instructions on how to add images. It is possible to use same instruction for adding pictures to how can you get bigger breasts site
Reply
:iconhistory-and-pasta:
History-and-pasta Featured By Owner May 7, 2015  Student General Artist
This is a god sent~  "You must be a saint! ; w ;"
hhhetalia.tumblr.com/post/8546…
Reply
:iconastrikos:
Astrikos Featured By Owner May 23, 2015   General Artist
Aww thanks! :giggle: :love:
Reply
:iconhistory-and-pasta:
History-and-pasta Featured By Owner May 26, 2015  Student General Artist
No, thank you! Again, this was very, very helpful! 
Reply
:iconsiansaar:
Siansaar Featured By Owner Apr 29, 2015  Professional Digital Artist
Yo wtf, why don't embeds work anymore?
Reply
:iconastrikos:
Astrikos Featured By Owner Jun 10, 2015   General Artist
Maybe send me a screenshot of what's not working?
Reply
:iconsiansaar:
Siansaar Featured By Owner Jun 10, 2015  Professional Digital Artist
When I copy the "thumb" code to a deviation description, it just shows up as :thumb(number):, i.e. the code itself.
Seems deviantart went and changed embedding to be a premium user feature only without telling anyone...:/
Reply
:iconastrikos:
Astrikos Featured By Owner Jun 22, 2015   General Artist
It might be :/ :c
Reply
:iconkeep-on-cantering:
Keep-On-Cantering Featured By Owner Apr 27, 2015  Hobbyist General Artist
how do I use my gif image in a journal? I uploaded it on DA
Reply
:iconastrikos:
Astrikos Featured By Owner Jun 10, 2015   General Artist
You can use sta.sh media bar to add it in, or use the thumbcode!
Reply
:iconkingelephant30:
KingElephant30 Featured By Owner Apr 21, 2015  Student Digital Artist
<img src="25.media.tumblr.com/tumblr_lyh…" width="310" height="430"/>
Reply
:iconastrikos:
Astrikos Featured By Owner Jun 10, 2015   General Artist
Hmm.. Looks right to me, but sadly I think embedding is premium only for some reason...
Reply
:iconlalottered:
Lalottered Featured By Owner Apr 20, 2015  Hobbyist Traditional Artist
Its not workinggggggg TT_TT
Reply
:iconastrikos:
Astrikos Featured By Owner Jun 10, 2015   General Artist
Sorry for the insanely late reply, but maybe send me what code you're using?
Reply
:iconalexzandria44:
Alexzandria44 Featured By Owner Apr 18, 2015  Hobbyist Digital Artist
:thumb367944988:
:thumb367944988:
Reply
:iconshinayuuki:
ShinaYuuki Featured By Owner Mar 20, 2015  Student Digital Artist
Thank you so much!!!!!! 
Reply
:icontoxikhedgehog:
ToxikHedgehog Featured By Owner Mar 20, 2015
Is that how you add gifs to comments?

lol I'm a newbie
Reply
:iconshinayuuki:
ShinaYuuki Featured By Owner Mar 20, 2015  Student Digital Artist
"Add Media" I typed "Natsu" in the "Search Bar" and picked the icon...  And it turned like this Natsu - Dragon force 
Reply
:iconasaki-sama:
Asaki-Sama Featured By Owner Mar 16, 2015  Hobbyist Interface Designer
BALLOON BOY IS THE ILLUMINATI!!1!11! (chat icon)  ILLUMINATI CONFIRMED!
Thanks buddy,I can just use add media though.
Reply
:iconastrikos:
Astrikos Featured By Owner Jun 10, 2015   General Artist
lol
Reply
:iconasaki-sama:
Asaki-Sama Featured By Owner Mar 15, 2015  Hobbyist Interface Designer
Reply
:iconasaki-sama:
Asaki-Sama Featured By Owner Mar 15, 2015  Hobbyist Interface Designer
Umm how do I do it for comments? Can you show me the code?
Reply
:iconasaki-sama:
Asaki-Sama Featured By Owner Mar 15, 2015  Hobbyist Interface Designer
Reply
:iconasaki-sama:
Asaki-Sama Featured By Owner Mar 15, 2015  Hobbyist Interface Designer
Reply
:iconasaki-sama:
Asaki-Sama Featured By Owner Mar 15, 2015  Hobbyist Interface Designer
Why doesn't it work for comemnts!
Reply
:iconasaki-sama:
Asaki-Sama Featured By Owner Mar 15, 2015  Hobbyist Interface Designer
:thumb367944988:
:thumb367944988:
Reply
:iconasaki-sama:
Asaki-Sama Featured By Owner Mar 15, 2015  Hobbyist Interface Designer
<img src="fc01.deviantart.net/fs71/f/201…" alt="Hug" style="width:50px;height:50px">
Reply
:iconasaki-sama:
Asaki-Sama Featured By Owner Mar 15, 2015  Hobbyist Interface Designer
<img src="fc08.deviantart.net/fs71/f/201…" alt="Yato and Hiyori (Snuggy Alt) [V1]" style="width:62px;height:38px">
Reply
:iconasaki-sama:
Asaki-Sama Featured By Owner Mar 15, 2015  Hobbyist Interface Designer
Reply
:iconasaki-sama:
Asaki-Sama Featured By Owner Mar 15, 2015  Hobbyist Interface Designer
Reply
:iconasaki-sama:
Asaki-Sama Featured By Owner Mar 15, 2015  Hobbyist Interface Designer
<img src=":thumb519933104:">

Reply
:iconasaki-sama:
Asaki-Sama Featured By Owner Mar 15, 2015  Hobbyist Interface Designer
:thumb519933104:
:thumb519933104:
Reply
:iconasaki-sama:
Asaki-Sama Featured By Owner Mar 15, 2015  Hobbyist Interface Designer
:thumb519933104:
Reply
Add a Comment:
 
×

:iconastrikos: More from Astrikos


Featured in Collections

Project Educate by TheOwl68

Journals Articles Written Stuff by Nolamom3507

Informative journals by CaringheartTTR


More from DeviantArt



Details

Submitted on
May 8, 2013
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
29,593 (2 today)
Favourites
752 (who?)
Comments
440
×