Shop Mobile More Submit  Join Login
×

:iconastrikos: More from Astrikos


Featured in Collections

Journals by KittiRawr

Informative journals by CaringheartTTR

journals by Gee-X


More from DeviantArt



Details

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

Stats

Views
23,034 (18 today)
Favourites
637 (who?)
Comments
381
×

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:
 
:iconsimmeh:
Simmeh Featured By Owner 1 day ago
Thank you very much! Love 
Reply
:iconastrikos:
Astrikos Featured By Owner 23 hours ago   General Artist
:love:
Reply
:iconbjornbeast:
BjornBeast Featured By Owner 3 days ago  Student Digital Artist
Hmmm I'm trying to embed a link in a gif in one of my custom boxes on my profile...but it's not working! I know I have everything inputted right....
Reply
:iconastrikos:
Astrikos Featured By Owner 23 hours ago   General Artist
Can you copy and paste the code and maybe I can see if I can make it work?
Reply
:iconhannalee123:
HannaLee123 Featured By Owner Feb 7, 2015  Student General Artist
Extremely helpful, thanks a bunch! Yato and Hiyori (Snuggy Alt) [V1] 
Reply
:iconastrikos:
Astrikos Featured By Owner Feb 8, 2015   General Artist
:love: Glad I could help!
Reply
:iconxxfatal-happinessxx:
xXfatal-happinessXx Featured By Owner Feb 3, 2015  Hobbyist General Artist
This is awesome! Very helpful, thanks <3
Reply
:iconastrikos:
Astrikos Featured By Owner Feb 8, 2015   General Artist
:heart: Glad I could help you out!
Reply
:icongobsmackapplejack:
GobsmackApplejack Featured By Owner Jan 9, 2015  New member
Thank you!  This was helpful.
Reply
:iconastrikos:
Astrikos Featured By Owner Feb 8, 2015   General Artist
:heart: Glad I could help you out!
Reply
:iconmiyaachii:
Miyaachii Featured By Owner Edited Jan 8, 2015  Hobbyist Digital Artist
I'm practicing to see if this works owo I'm sorry!

:thumb505625087:
Reply
:iconastrikos:
Astrikos Featured By Owner Jan 8, 2015   General Artist
No worries!
Reply
:iconmiyaachii:
Miyaachii Featured By Owner Jan 8, 2015  Hobbyist Digital Artist
It works thank you! Lovely Shoujo Emoji (Huggy Hug) [V2] 
Reply
:iconartattackheartattack:
ArtAttackHeartAttack Featured By Owner Jan 8, 2015  Student
:thumb175198193:
:thumb175198193:

I'm practicing so I'm gonna see if this works or not 
Reply
:iconastrikos:
Astrikos Featured By Owner Jan 8, 2015   General Artist
:la: No worries
Reply
:iconartattackheartattack:
ArtAttackHeartAttack Featured By Owner Jan 8, 2015  Student
Hakuna Matata then? ;3
Reply
:iconastrikos:
Astrikos Featured By Owner Jan 19, 2015   General Artist
Haha yes!
Reply
:icongabrielfoster:
GabrielFoster Featured By Owner Jan 5, 2015  Hobbyist General Artist
<img src="i.imgur.com/ugoKd.gif"></a>
Reply
:iconastrikos:
Astrikos Featured By Owner Jan 8, 2015   General Artist
:heart: Works on customboxes and journals (when you write in HTML mode)
Reply
:icongabrielfoster:
GabrielFoster Featured By Owner Jan 8, 2015  Hobbyist General Artist
Ah, got it. Thanks man!
Reply
:icongabrielfoster:
GabrielFoster Featured By Owner Jan 5, 2015  Hobbyist General Artist
Hmm.
Reply
:icongabrielfoster:
GabrielFoster Featured By Owner Edited Jan 5, 2015  Hobbyist General Artist
Reply
:icongabrielfoster:
GabrielFoster Featured By Owner Jan 5, 2015  Hobbyist General Artist
I'm not sure what I'm doing wrong.
Reply
:icongabrielfoster:
GabrielFoster Featured By Owner Edited Jan 5, 2015  Hobbyist General Artist
<img src="i.imgur.com/ugoKd.gif " />
Reply
:iconthe-young-master:
The-Young-Master Featured By Owner Dec 31, 2014
((:iconpatrickiloveyouplz: OMG THANK YOU! I've been wanting to use gifs for soooo long!Hug ))
Reply
:iconastrikos:
Astrikos Featured By Owner Jan 8, 2015   General Artist
:love:
Reply
:iconchocohonut:
chocohonut Featured By Owner Dec 28, 2014  Student General Artist
media20.giphy.com/media/Y9nOsM…

IT NO WORKING WHY U LIE TO ME...
Reply
:iconchocohonut:
chocohonut Featured By Owner Dec 30, 2014  Student General Artist
Nope dint work...
Reply
:iconchocohonut:
chocohonut Featured By Owner Dec 30, 2014  Student General Artist
Reply
:iconastrikos:
Astrikos Featured By Owner Dec 29, 2014   General Artist
Alrighty..
Try this:
<img src="http://media20.giphy.com/media/Y9nOsMrYSQoHS/giphy.gif?w=320"></a>
Works just fine on my profile page..
What most likely happened is that you forgot to click copy image location, as copying the address bar is not the right link you want.
Make sure that the extension is showing in your link (ie, .gif, .jpeg) and then you know you have the link you want.
Hope this helps you :heart:
Reply
:icons-m-batty:
S-M-Batty Featured By Owner Nov 18, 2014  Student Digital Artist
I wish this worked for me... no matter how many different variations on this that people suggest all I get as an "image" is blank or with a tiny box arrow... :(
Reply
:iconastrikos:
Astrikos Featured By Owner Dec 29, 2014   General Artist
What browser are you using?
can you show me an example? It might show up for me, but not on your browser page, possibly?
Reply
:icons-m-batty:
S-M-Batty Featured By Owner Dec 29, 2014  Student Digital Artist
I have no idea... I'm using safari, sometimes firefox.. but should that even matter?
Reply
:iconastrikos:
Astrikos Featured By Owner Dec 29, 2014   General Artist
Not really, but can you link me to the image that isn't working?
Reply
:icons-m-batty:
S-M-Batty Featured By Owner Dec 29, 2014  Student Digital Artist
this was pretty long ago, it doesn't exactly matter anymore
Reply
:iconastrikos:
Astrikos Featured By Owner Dec 29, 2014   General Artist
Alrighty lol.
Reply
:icons-m-batty:
S-M-Batty Featured By Owner Dec 29, 2014  Student Digital Artist
ok... but seriously it wouldn't work for me.
Reply
:iconastrikos:
Astrikos Featured By Owner Dec 30, 2014   General Artist
Well, you can show me still if you want. 
You just said it didn't matter xD
Reply
(1 Reply)
:iconarminarlertsuperfan:
ArminArlertSuperfan Featured By Owner Nov 15, 2014  Hobbyist Digital Artist
Um where do I go to embed music?
Reply
:iconastrikos:
Astrikos Featured By Owner Dec 29, 2014   General Artist
You can click the link to CypherVisor's tutorial!
:heart:
Reply
:iconsonikku-za-hejjihogg:
Sonikku-za-Hejjihogg Featured By Owner Nov 11, 2014  Hobbyist Writer
yeap, i still cant do it
Reply
:iconastrikos:
Astrikos Featured By Owner Dec 29, 2014   General Artist
Your link shows up for me on my custom box, it might be that you need a premium membership to link things D: I don't know why that is, but it is D;
Reply
:iconglazinq:
glazinq Featured By Owner Nov 17, 2014
You can only do it in journal entry's an your bio 
Reply
:iconsonikku-za-hejjihogg:
Sonikku-za-Hejjihogg Featured By Owner Nov 11, 2014  Hobbyist Writer
<img src="http://25.media.tumblr.com/tumblr_lyhnrtNYq41r7e6yco1_250.gif" width="310" height="430">
Reply
:iconastrikos:
Astrikos Featured By Owner Dec 29, 2014   General Artist
This code works, though!
Reply
:iconsonikku-za-hejjihogg:
Sonikku-za-Hejjihogg Featured By Owner Nov 11, 2014  Hobbyist Writer
:bigthumb367944988:
Reply
:icondarkartist7768:
DarkArtist7768 Featured By Owner Nov 9, 2014  Hobbyist General Artist
Thanks!
Reply
:iconastrikos:
Astrikos Featured By Owner Dec 29, 2014   General Artist
Glad I could help!
Reply
Add a Comment: