Shop Forum 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:

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


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:
 
:iconkaasusumu:
Kaasusumu Featured By Owner Nov 27, 2017  Hobbyist
Mm, what about images from the folders on our computer? Can those be embed?
Reply
:icondkidpeer:
dkidpeer Featured By Owner Nov 17, 2017  New Deviant
it worked!! An Emoticon From Years Gone By :la: Hop 
Reply
:iconkiwile3:
kiwile3 Featured By Owner Nov 5, 2017  Hobbyist Digital Artist
Super helpful! Thank you so much! :happybounce: 
Reply
:iconminaj-a-twah:
Minaj-a-twah Featured By Owner Oct 20, 2017  New Deviant
most usefuil
Reply
:iconhelsic:
Helsic Featured By Owner Oct 6, 2017  Professional Interface Designer
Reply
:iconmaepbo:
maepbo Featured By Owner Sep 22, 2017  Student Artist
i was actually crying for a good 4 minutes because i was so frustrated you just saved my life god bless
Reply
:iconanimeshgiri:
animeshgiri Featured By Owner Sep 22, 2017  New Deviant
Reply
:iconswirledsweetz:
SwirledSweetz Featured By Owner Sep 5, 2017  Hobbyist Digital Artist
I have tried to change the size of this image, but it doesn't work ;-; 
orig13.deviantart.net/f101/f/2…
Please help
Reply
:iconbabybonefrans:
BabyboneFrans Featured By Owner Aug 21, 2017
Ehhh wait..how do u put links from sta.sh to deviantart?
Reply
:iconfwower:
fwower Featured By Owner Sep 6, 2017  Hobbyist Digital Artist
you have to have a core membership TT_TT
Reply
:iconbabybonefrans:
BabyboneFrans Featured By Owner Sep 6, 2017
Oh..yea..in status you can't......but I know how now.
Reply
:iconshutupsam:
shutupsam Featured By Owner Edited 19 hours ago  Hobbyist Digital Artist
ahh if you don't mind could you tell me how to do that? i'd like to post a pic on my status but nothing is working sos
Reply
:iconbabybonefrans:
BabyboneFrans Featured By Owner 16 hours ago
You need core to put pictures in the status >__>
Reply
:iconshutupsam:
shutupsam Featured By Owner 15 hours ago  Hobbyist Digital Artist
oh wait nvrmind lmao
i actually figured out that if you have a pic in ur stash and you just copy and paste the link (in the top right hand corner) into a status post the picture will show
Reply
:iconbabybonefrans:
BabyboneFrans Featured By Owner 14 hours ago
Pffft okay
Reply
:iconsaltkat:
SaltKat Featured By Owner Aug 27, 2017  Hobbyist Digital Artist
I was going to ask the same question beacuse I commissioned someone but they put it in their stash
so now I can't embed it onto my page
Reply
:iconcraaziifox:
craaziifox Featured By Owner Sep 27, 2017  Student Digital Artist
just right click the image and press copy image address
then go to your page and put <img src="IMAGE LINK GOES HERE">
should come up!! ;v; hope this helped!
Reply
:iconbabybonefrans:
BabyboneFrans Featured By Owner Aug 27, 2017
Yea and I'm confused .__.
Reply
:iconcraaziifox:
craaziifox Featured By Owner Sep 27, 2017  Student Digital Artist
just right click the image and press copy image address
then go to your page and put <img src="IMAGE LINK GOES HERE">
should come up!! ;v; hope this helped!
Reply
:iconbabybonefrans:
BabyboneFrans Featured By Owner Oct 2, 2017
Wow thanks!
Reply
:iconcraaziifox:
craaziifox Featured By Owner Oct 2, 2017  Student Digital Artist
ah, no problemo! ;v;
Reply
:iconthefrozendiamond:
TheFrozenDiamond Featured By Owner Aug 19, 2017
Hi! This is extremly useful :heart:

But can you add media from your gallery? 
Reply
:iconamymccreepy:
AmyMcCreepy Featured By Owner Aug 13, 2017  Hobbyist Digital Artist
Thank you for the tutorial!
Reply
:iconliterallyidiot:
LiterallyIdiot Featured By Owner Aug 13, 2017  Hobbyist Traditional Artist
Oh no computer things help I'm drowning in them 
Uhhhh thank you! I'm gonna see if I can actually pull off any of this because I'm using an iPhone. Great! 


;-;
Reply
:iconjinxiez:
JinxieZ Featured By Owner Jul 30, 2017  Hobbyist Digital Artist
Is there a way to add a image like that into a deviation description?
Reply
:iconastrikos:
Astrikos Featured By Owner Aug 5, 2017  Hobbyist Artist
I think it should work with the thumb code, but it may be locked to premium members?
Reply
:iconjinxiez:
JinxieZ Featured By Owner Aug 5, 2017  Hobbyist Digital Artist
Yeah, I tried the thumb code but it didnt work :c
Thanks for replying tho!!
Reply
:iconmanzanimator:
ManZAnimaTor Featured By Owner Jul 26, 2017  Hobbyist Filmographer
Reply
:iconastrikos:
Astrikos Featured By Owner Aug 5, 2017  Hobbyist Artist
:la:
Reply
:iconnemonemini:
NemoNemini Featured By Owner Jul 11, 2017  Student General Artist
Gosh I'll need to practice this so hard... Thank you so much for posting this very helpful guide!
Reply
:iconastrikos:
Astrikos Featured By Owner Aug 5, 2017  Hobbyist Artist
Sorry for the hella late reply, have been busy!

Thanks! I appreciate the kind words!
Reply
:iconlil-gib:
Lil-Gib Featured By Owner Jun 19, 2017  Student General Artist
Help! I want to get a stash thing onto my custom widget but I can't get it! What do I do??
Reply
:iconastrikos:
Astrikos Featured By Owner Aug 5, 2017  Hobbyist Artist
I don't think you can get it on a custom widget. Thumbcodes work though!
Reply
:iconlil-gib:
Lil-Gib Featured By Owner Jun 19, 2017  Student General Artist
Oh, hold on! I got it, nevermind! Sorry for wasting your time =3 
Reply
:iconbepis-lo-fi:
Bepis-Lo-fi Featured By Owner Jun 2, 2017  Student General Artist
I keep running into an error !! (which I can't link because DA thinks it's spam

what am I doing wrong? : (  
Reply
:iconastrikos:
Astrikos Featured By Owner Aug 5, 2017  Hobbyist Artist
Sorry for the hella late reply, have been busy!

I'm not really sure why it thinks it's spam.. Can you send me a pic?
Reply
:iconbepis-lo-fi:
Bepis-Lo-fi Featured By Owner Aug 6, 2017  Student General Artist
this is so old i fogot what is was and everything so nvm haha
Reply
Flagged as Spam
:iconbepis-lo-fi:
Bepis-Lo-fi Featured By Owner Jul 22, 2017  Student General Artist
rats : (
Reply
Flagged as Spam
:iconbepis-lo-fi:
Bepis-Lo-fi Featured By Owner Jul 23, 2017  Student General Artist
but I wouldn't let me post it at all
Reply
:iconaprilgrigsbyart:
AprilGrigsbyArt Featured By Owner May 21, 2017  Student Filmographer
Reply
:iconaprilgrigsbyart:
AprilGrigsbyArt Featured By Owner May 21, 2017  Student Filmographer
33 by AprilGrigsbyArt did it work
Reply
:iconsweetpasuteru:
SweetPasuteru Featured By Owner May 26, 2017  Hobbyist Digital Artist
Yup! :D
Reply
:iconvhastheguy:
VhasTheGuy Featured By Owner May 11, 2017  Hobbyist Traditional Artist
Thanks fren
Reply
:iconastrikos:
Astrikos Featured By Owner Aug 5, 2017  Hobbyist Artist
Sorry for the hella late reply, have been busy!
Thanks for the kind words! 
Reply
:iconvhastheguy:
VhasTheGuy Featured By Owner Aug 5, 2017  Hobbyist Traditional Artist
Nah, dude.

Thank YOU!

Have a good one.
Reply
:iconalovebeyondkass:
alovebeyondkass Featured By Owner May 4, 2017
Reply
Add a Comment:
 
×

:iconastrikos: More from Astrikos


Featured in Collections

Informative journals by MagicoffMusic


More from DeviantArt



Details

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

Stats

Views
83,074 (24 today)
Favourites
1,489 (who?)
Comments
770
×