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:
 
:iconyukokii:
yukokii Featured By Owner Dec 16, 2015  New Deviant Hobbyist Digital Artist
thumbs dont work in comments for people without premium lol
Reply
:iconastrikos:
Astrikos Featured By Owner Dec 19, 2015   General Artist
True :saddummy:
Reply
:iconofficial-donatello:
Official-Donatello Featured By Owner Dec 16, 2015  New Deviant Hobbyist Traditional Artist
{{OK so what do I use to get a gif to go to the side of my page and my wordk to work around the gif?}}
Reply
:iconastrikos:
Astrikos Featured By Owner Dec 19, 2015   General Artist
Hmm, I don't know how easy that would be to do that. 
Reply
:iconfrenchylea:
frenchylea Featured By Owner Nov 30, 2015  Hobbyist
:thumb472196773:
Reply
:iconcreepysaurus:
CreepySaurus Featured By Owner Nov 23, 2015  Hobbyist Artist
Now how do I get them into my comments?
Reply
:iconastrikos:
Astrikos Featured By Owner Dec 19, 2015   General Artist
You have to have premium, sadly. :/
Reply
:iconsolarnightengale:
I don't get how to the link images! DX
I've tried but it's not working
Reply
:iconastrikos:
Astrikos Featured By Owner Dec 19, 2015   General Artist
I think it's because dA limits it to premium members. :c
Reply
:iconsolarnightengale:
SolarNightengale Featured By Owner Dec 19, 2015
Figured out and solve a little while ago! :D
Reply
:iconastrikos:
Astrikos Featured By Owner Dec 19, 2015   General Artist
:la: Glad to hear it!
Reply
:iconcoweetie:
coweetie Featured By Owner Dec 2, 2015  Hobbyist Filmographer
i think thats for premium people
Reply
:iconvanitasthe2nd:
VanitasThe2nd Featured By Owner Oct 27, 2015  Hobbyist General Artist
This was helpful, thanks very much :)
Reply
:iconarisenkikyou:
ArisenKikyou Featured By Owner Edited Oct 24, 2015
Thanks for the info!
Reply
:iconjennshiki:
jennshiki Featured By Owner Oct 13, 2015  Hobbyist Digital Artist
I was wondering how to embed a picture over a custom box square? Like, I know how to put a white box inside the custom box, but how do you embed an image that overlaps the box inside the custom box? (sorry does that make any sense /D)
Reply
:iconastrikos:
Astrikos Featured By Owner Dec 19, 2015   General Artist
It does make sense but I'm not sure you can do that/how to do that. 

If it's possible, go to CypherVisor, he's a CSS god. 
Reply
:icontherarekitty:
TheRareKitty Featured By Owner Sep 18, 2015  Hobbyist Digital Artist
How do you make those little pink dot things Dx
Reply
:iconastrikos:
Astrikos Featured By Owner Dec 19, 2015   General Artist
: bulletpink : delete the spaces between bulletpink and the ::s. 

:bulletpink: 
Reply
:iconearth-pony:
Earth-Pony Featured By Owner Oct 15, 2015  Hobbyist Artisan Crafter
Bullet; Pink <-- they're actually one of DeviantART's default bullet colors! :meow: You can either type :bullet pink: (without the space) or use the "Add Media" button, search for "pink" and select the pink dot from the "Official Emoticons" list.
Reply
:icontherarekitty:
TheRareKitty Featured By Owner Oct 23, 2015  Hobbyist Digital Artist
thank you so much
Reply
:iconx-mirthfulmessiah-x:
x-MirthfulMessiah-x Featured By Owner Sep 9, 2015  Hobbyist General Artist
tHANK YOUUUUUUUUU
Reply
:iconastrikos:
Astrikos Featured By Owner Dec 19, 2015   General Artist
c:
Reply
:iconpamonk:
PaMonk Featured By Owner Aug 23, 2015  Professional General Artist
Awesome Thanks for sharing Such great Info.:D
Reply
:iconastrikos:
Astrikos Featured By Owner Aug 26, 2015   General Artist
Glad this was helpful! :la:
Reply
:iconandorada:
Andorada Featured By Owner Aug 22, 2015
Do you know how can one add a countdown?
(I tried in no vain with iframe up to now)
Reply
:iconastrikos:
Astrikos Featured By Owner Aug 26, 2015   General Artist
Hang on, can you note me about this so I don't forget to answer? I think I found a widget that works. 
Reply
:iconandorada:
Andorada Featured By Owner Aug 26, 2015
That would be great :happybounce:
Done! :la:
Reply
:iconastrikos:
Astrikos Featured By Owner Aug 30, 2015   General Artist
I am going to reply once I find it, sorry for delaying lol
Reply
:iconcrazed-kitsune:
Crazed-Kitsune Featured By Owner Aug 20, 2015  Hobbyist General Artist
Is there another way to put images in a art description. I just recently opened a patreon account and I've seen people advertise it in their art descriptions but I can't get it to work. 😢
Reply
:iconastrikos:
Astrikos Featured By Owner Aug 21, 2015   General Artist
Have you tried adding media? (sta.sh tool bar thing?)

Or you can use thumbcodes!
Reply
:iconcrazed-kitsune:
Crazed-Kitsune Featured By Owner Aug 21, 2015  Hobbyist General Artist
Well the original image I found is a png image from tumblr and i tried your code and fid everything but it didn't work. All that came up was the code and the image url highlighted. Thanks for replying by the way.
Reply
:iconpelusita-fideos:
Pelusita-Fideos Featured By Owner Sep 20, 2015  Hobbyist General Artist
People who advertise their art in the descriptions are premium members xD Anyways, you can only use deviations to put them in the descriptions, I dont know if you can use a tumblr image :c
Reply
:iconcrazed-kitsune:
Crazed-Kitsune Featured By Owner Sep 20, 2015  Hobbyist General Artist
Thanks. I got it figured out though.
Reply
:iconartmaker333:
ArtMaker333 Featured By Owner Jul 26, 2015  Hobbyist Digital Artist
Thank you for the info
Reply
:iconastrikos:
Astrikos Featured By Owner Jul 27, 2015   General Artist
Glad I could help!
Reply
:iconk-o-t-e:
K-O-T-E Featured By Owner Jul 25, 2015  Student General Artist
How do you put thumbs in a comment? I know you can cuz I saw someone who did it with their deviation.
Reply
:iconastrikos:
Astrikos Featured By Owner Jul 27, 2015   General Artist
You can copy the thumbcode and it should work.. However, I'm not positive, but dA might have made that premium only for some reason! D:
Reply
:iconowltearsovo:
OwlTearsOvO Featured By Owner Jul 22, 2015  Hobbyist Digital Artist
screeches

ive been to so many sites but i can NOT get the thumb or anything to work dammit
Reply
:iconastrikos:
Astrikos Featured By Owner Jul 23, 2015   General Artist
It might be because dA made the image links premium only :c
Reply
:iconowltearsovo:
OwlTearsOvO Featured By Owner Jul 23, 2015  Hobbyist Digital Artist
Yeah, i figured it out before.  I didnt know only premium could put it in DeviantArt descriptions :c ah well.
Reply
:iconastrikos:
Astrikos Featured By Owner Jul 24, 2015   General Artist
:'c
Reply
:iconisaysilvestre:
isaysilvestre Featured By Owner Jul 21, 2015
Thank you! that bigthumb is amazing Lovely Shoujo Emoji (Huggy Hug) [V2] 
Reply
:iconastrikos:
Astrikos Featured By Owner Jul 23, 2015   General Artist
True!
Reply
:iconminecraftmaker123:
MinecraftMaker123 Featured By Owner Jul 17, 2015  Student Traditional Artist
:bigthumb367944988:
Reply
:iconastrikos:
Astrikos Featured By Owner Jul 23, 2015   General Artist
:la:
Reply
Add a Comment:
 
×

:iconastrikos: More from Astrikos


Featured in Collections

Project Educate by TheOwl68

Journals by KittiRawr

Informative journals by MagicoffMusic


More from DeviantArt



Details

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

Stats

Views
41,442 (54 today)
Favourites
980 (who?)
Comments
507
×