HOME | DD

Astrikos — PE: How to embed things (WILL UPDATE FOR ECLIPSE)
Published: 2013-05-08 11:25:20 +0000 UTC; Views: 135835; Favourites: 1700; Downloads: 0
Redirect to original
Description body div#devskin9188635 .gr-box { overflow:visible; background:transparent; margin:190px auto 0px auto; position:relative; padding:0px 10px 10px 10px; } body div#devskin9188635 .gr-top { display:none; } body div#devskin9188635 .gr-top .gr { display:none; } body div#devskin9188635 .gr-top h2 img { display:none; } body div#devskin9188635 .gr-top h2 { display:none; } body div#devskin9188635 .gr-body { background:#dae4d9 url(https://fc06.deviantart.net/fs71/o/2013/024/2/b/350289350_646739_322748439_464982_bggrad.png) 0px 0px repeat-x; border:1px solid #a6b2a6; overflow:visible; color:#5d625d; line-height:20px; padding:30px 0px 0px 0px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; box-shadow:0px 1px 5px #8c9688; -moz-box-shadow:0px 1px 5px #8c9688; -webkit-box-shadow:0px 1px 5px #8c9688; box-shadow:0px 1px 5px #8c9688; -moz-box-shadow:0px 1px 5px #8c9688; -webkit-box-shadow:0px 1px 5px #8c9688; } body div#devskin9188635 .gr { background:transparent; border:none; } body div#devskin9188635 .gr-body .gr { padding:0px 20px 0px 20px; } body div#devskin9188635 .gr-body .gr .text { padding:10px 0px 0px 0px; } body div#devskin9188635 i.tri { display:none; } body div#devskin9188635 i.gr1 { display:none; } body div#devskin9188635 i.gr2 { display:none; } body div#devskin9188635 i.gr3 { display:none; } body div#devskin9188635 i.gb { display:none; } body div#devskin9188635 .top { position:absolute; top:-174px; left:0px; right:0px; width:100%; text-align:center; z-index:50; } body div#devskin9188635 .top img { margin:0px auto; min-width:529px; } body div#devskin9188635 div.board { width:360px; height:217px; background:url(https://fc03.deviantart.net/fs71/o/2013/024/d/d/350289350_646740_322748439_464983_pinboard.png) top right no-repeat; text-align:center; z-index:99; margin:-50px auto 0px auto; position:relative; } body div#devskin9188635 div.board .shadow-holder { float:left; top:0px!imporant; left:0px!important; } body div#devskin9188635 div.board img.avatar { position:absolute !important; display:block; margin:0px 0px 0px 0px; bottom:-18px; right:-75px; } body div#devskin9188635 span.board { display:none; } body div#devskin9188635 div.board .stamp { position:relative !important; left:20px; top:50px; } body div#devskin9188635 div.board .stamp img { box-shadow:0px 1px 5px #4d1e1c; -moz-box-shadow:0px 1px 5px #4d1e1c; -webkit-box-shadow:0px 1px 5px #4d1e1c; box-shadow:0px 1px 5px #4d1e1c; -moz-box-shadow:0px 1px 5px #4d1e1c; -webkit-box-shadow:0px 1px 5px #4d1e1c; } body div#devskin9188635 div.board .gallery { position:relative !important; right:78px; top:80px; color:#fff !important; font-size:20px; font-weight:bold; text-align:right; width:325px !important; text-shadow:#4d1e1c 0px 1px 3px; } body div#devskin9188635 div.board a { color:#fff !important; font-size:20px; font-weight:bold; } body div#devskin9188635 a { color:#B73E62; text-decoration:none; } body div#devskin9188635 a:hover { color:#E43A5D; text-decoration:none; } body div#devskin9188635 ul { margin:0px 0px 0px 0px!important; } body div#devskin9188635 ul li { list-style-image:url('https://fc05.deviantart.net/fs71/o/2013/024/6/0/350289350_646741_322748439_464984_bullet.gif')!important; } body div#devskin9188635 li b { color:#fff !important; font-size:14px; font-weight:bold; text-shadow:#8c9688 0px 1px 3px; padding:0px 12px 0px 0px; } body div#devskin9188635 li b sup { font-size:10px; font-weight:normal; } body div#devskin9188635 .list { display:none!important; } body div#devskin9188635 .bottom { position:absolute; right:6px; bottom:6px; color:#DAE4D9!important; z-index:99; padding:0px 0px 0px 0px!important; height:27px; font-size:0px; } body div#devskin9188635 .bottom .commentslink { font-size:0px; background:url(https://fc02.deviantart.net/fs70/o/2013/024/8/d/350289350_646742_322748439_464985_comment.png) top no-repeat; color:#DAE4D9!important; text-decoration:none!important; padding:0px; margin:0px 15px 0px 10px; text-align:center; width:24px!important; height:24px!important; display:block; } body div#devskin9188635 .clear_ { clear:both!important; } body div#devskin9188635 .week { background:url(https://fc08.deviantart.net/fs71/o/2013/024/c/c/350289350_646743_322748439_464986_sepdots.gif) bottom repeat-x; padding:0px 0px 0px 80px; margin-top:-22px; } body div#devskin9188635 .week .cal { background:url(https://fc02.deviantart.net/fs71/o/2013/024/7/b/350289350_646744_322748439_464987_cal.png) top no-repeat; width:76px; height:38px; float:left; margin:0px 0px 0px -80px; text-align:center; color:#f2fbf0; text-shadow:#8c9688 0px 1px 2px; } body div#devskin9188635 .week .left { position:relative !important; left:3px; top:-6px; float:left; margin:0px!important; font-size:17px; font-weight:bold; width:30px; height:30px; } body div#devskin9188635 .week .left b { color:#96a791!important; font-size:8px; line-height:14px; text-shadow:#fff 0px 1px 0px!important; } body div#devskin9188635 .week .right { float:right; position:relative !important; left:-3px; top:-26px; margin:0px!important; font-size:17px; font-weight:bold; width:30px; height:30px; } body div#devskin9188635 .week .right b { color:#96a791!important; font-size:8px; line-height:14px; text-shadow:#fff 0px 1px 0px!important; } body div#devskin9188635 .header { font-size:24px; margin-top:-12px; font-weight:bold; font-family:Trebuchet, Tahoma, Arial, sans-serif; padding:0px 0px 0px 5px; color:#B73E62; text-shadow:#fff 0px 1px 0px!important; } body div#devskin9188635 .links { float:right; position:relative; bottom:20px; right:0px; } body div#devskin9188635 .links img { padding-left:8px; } body div#devskin9188635 .buttons { position:absolute; left:20px; bottom:6px; color:#DAE4D9!important; z-index:99; padding:0px 0px 0px 0px!important; height:27px; font-size:0px; } body div#devskin9188635 .buttons img { padding-right:8px; } body div#devskin9188635 blockquote { background:#E9F2E9; border:2px ridge #FF1966; margin:1.5em 10px; padding:.5em 10px; } body div#devskin9188635 blockquote:before { color:#9B9DA3; font-size:5em; line-height:.1em; margin-right:.25em; vertical-align:-.4em; } body div#devskin9188635 blockquote p { display:indent; } body div#devskin9188635 .box { background:#fff; box-shadow:3px grey; -moz-box-shadow:3px grey; -webkit-box-shadow:3px grey; border:2px solid#e5e5e5; padding:7px; margin:auto; text-align:center; text-decoration:none; letter-spacing:0px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; line-height:normal; overflow:auto; float:center; } body div#devskin9188635 h1, body div#devskin9188635 h2, body div#devskin9188635 h3, body div#devskin9188635 h4 { font-weight:normal; }




Community Week



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 GIFsDeviantART 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:


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

It's the thumbcode number without thumb in it... 

Trying it out... 


Gives us:



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



That's it! Easy. 

Right click, then select Copy Image URL to get the direct image URL. 

And then you're done!




Resizing: 

You can resize things the HTML way.


(Width: 310) (height: 430) 

(Code:


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. 

 fc01.dev iantart.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">g 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:


Note: The ID means this....

http://www.youtube.com/watch?feature=player_profilepage&v=CIx0P1KDkVk



An example would be 


And that gives us: 

 


Compatible video types: 

Youtube

Vimeo

Film 


Embedding a music player


CypherVisor


Good luck and happy embedding! 

If you have questions, you may comment below!

 









Related content

Astrikos - Crescent

Astrikos - Commission: Panda

Astrikos - Love You

Astrikos - Anatomy Quick Tips Ears Tutorial

[ TEXT ]


Astrikos - Wolf Appreciation Feature

[ TEXT ]


Astrikos - Deviously Inspired VIII

[ TEXT ]


Astrikos - Made two tools for artists!

[ TEXT ]


Astrikos - Artist Tutorial Feature
Comments: 779

Astrikos In reply to ??? [2017-08-05 14:28:49 +0000 UTC]

Is there a web browser on iPad where you can copy the image URL?

It might be easier on the desktop, honestly.

Sorry for the hella late reply, have been busy!

👍: 0 ⏩: 1

YunoBajanMC In reply to Astrikos [2017-08-05 14:33:01 +0000 UTC]

I don't think so.....
Its okay

👍: 0 ⏩: 0

a3skales123 In reply to ??? [2017-04-10 12:04:02 +0000 UTC]

I'd assume the same way since it's the same site.

👍: 0 ⏩: 1

YunoBajanMC In reply to a3skales123 [2017-06-02 12:07:56 +0000 UTC]

(Sorry for the SUPER late reply)
I can't figure it out.... ;-;

👍: 0 ⏩: 1

a3skales123 In reply to YunoBajanMC [2017-06-02 12:22:12 +0000 UTC]

Well, I cannot help. I don't use Apple devices. Sorry.

👍: 0 ⏩: 1

YunoBajanMC In reply to a3skales123 [2017-06-02 12:24:24 +0000 UTC]

Oh.....it's okay 

👍: 0 ⏩: 0

XxAsk-GayfeatherxX In reply to ??? [2017-03-24 23:25:27 +0000 UTC]

It won't let me copy the image URL. I tried it from my iPad and my computer, but then again I use Explorer for my computer so...

👍: 0 ⏩: 2

Astrikos In reply to XxAsk-GayfeatherxX [2017-08-05 14:28:27 +0000 UTC]

Maybe try using firefox or chrome? 

Sorry for the hella late reply, have been busy!

👍: 0 ⏩: 1

XxAsk-GayfeatherxX In reply to Astrikos [2017-08-05 19:02:39 +0000 UTC]

I figured it out eventually. Thanks, though.


Heh, it's fine. I understand.

👍: 0 ⏩: 0

The-Irken-Luxray In reply to XxAsk-GayfeatherxX [2017-05-13 16:18:41 +0000 UTC]

For me, it reads "Copy image address" if that helps you.

👍: 0 ⏩: 1

XxAsk-GayfeatherxX In reply to The-Irken-Luxray [2017-05-13 17:41:10 +0000 UTC]

I figured it out. Thanks though.

👍: 0 ⏩: 1

The-Irken-Luxray In reply to XxAsk-GayfeatherxX [2017-05-13 17:49:15 +0000 UTC]

No problem.

👍: 0 ⏩: 0

HueStu In reply to ??? [2017-03-24 16:38:12 +0000 UTC]

aaa this was so helpful thankyouu

👍: 0 ⏩: 1

Astrikos In reply to HueStu [2017-08-05 14:28:54 +0000 UTC]

Sorry for the hella late reply, have been busy!
Thanks for the kind words! 

👍: 0 ⏩: 0

EeveeInfinity4 In reply to ??? [2017-03-24 11:56:32 +0000 UTC]

I don't understand how to embed images from Stash. . .

👍: 0 ⏩: 1

a3skales123 In reply to EeveeInfinity4 [2017-04-10 12:05:03 +0000 UTC]

In sta.sh there should also be the thumb code in the same place.

👍: 0 ⏩: 1

EeveeInfinity4 In reply to a3skales123 [2017-04-10 13:33:52 +0000 UTC]

Oh I think I already figured out how but thank you ;w;

👍: 0 ⏩: 0

GuardianOfInnola In reply to ??? [2017-03-19 04:31:42 +0000 UTC]

Hi, do you know if it's possible to embed a form from google docs? 

👍: 0 ⏩: 1

Astrikos In reply to GuardianOfInnola [2017-12-31 00:39:34 +0000 UTC]

Hmm, I have not tested that yet. Try it out and let me know!

👍: 0 ⏩: 0

pinsurf In reply to ??? [2017-03-18 02:08:34 +0000 UTC]

i.makeagif.com/media/11-16-201…


👍: 0 ⏩: 0

JadeCurrier In reply to ??? [2017-03-03 15:50:26 +0000 UTC]

Is this also how I add a picture or award picture as a comment?  

👍: 0 ⏩: 0

horrorfiilms In reply to ??? [2017-03-02 06:13:20 +0000 UTC]

cdn.trendhunterstatic.com/phpt… ">

👍: 0 ⏩: 0

OfficialPazora In reply to ??? [2017-01-24 08:55:18 +0000 UTC]

I see people putting their art in a comment on my page, now how do you do that?

👍: 0 ⏩: 1

Pastelkittyqq In reply to OfficialPazora [2017-02-25 01:21:30 +0000 UTC]

EDIT: Only for people who pay though- sorry!
The thumb code of course!
Go to the deviant you want to select then scroll down enough to see the "groups" below that you should see "Thumb"
Select and copy+paste that.

👍: 0 ⏩: 0

Samuraijose In reply to ??? [2017-01-09 21:04:58 +0000 UTC]

thanks for this tutorial ")

👍: 0 ⏩: 0

ReachNetwork In reply to ??? [2017-01-09 03:56:38 +0000 UTC]

Do you have to be a premium member to link images? I copied your example code into a description of mine because I know I was doing it right and it still didn't work.

👍: 0 ⏩: 0

simonbelmont765 In reply to ??? [2017-01-04 03:29:13 +0000 UTC]

66.media.tumblr.com/8223701ea9… ">

👍: 0 ⏩: 0

Lady-Moosh In reply to ??? [2017-01-02 02:51:14 +0000 UTC]

What would I do if I need to embed a code like this onto my page?::

cdn.abowman.com/widgets/fish/f… name="wmode" value="opaque">"/>

👍: 0 ⏩: 0

KopathConqueror In reply to ??? [2016-12-28 07:33:08 +0000 UTC]

I don't get the HTML thing. (Getting a GIF from the internet) It doesn't work and I still don't can't figure it out.

👍: 0 ⏩: 0

Esilarante In reply to ??? [2016-12-21 02:46:14 +0000 UTC]

Kay, is it me or when I try to put an image in my description it just gives me the lonely little link?



I think I'm just really stupid. Hhahah. But seriously, learning this could really help my DA.


Any responses are appreciated ^ ^

👍: 0 ⏩: 1

RazethAnimation In reply to Esilarante [2016-12-23 05:59:59 +0000 UTC]

👍: 0 ⏩: 1

Esilarante In reply to RazethAnimation [2016-12-24 16:08:55 +0000 UTC]

hMh grAziE.

👍: 0 ⏩: 0

SatoukoumiChan In reply to ??? [2016-12-15 14:49:31 +0000 UTC]

Ahhh! Thanks for this tutorial it really helped me out a lot

👍: 0 ⏩: 0

Gecko998 In reply to ??? [2016-12-03 10:33:22 +0000 UTC]

whenever i try to embed a scratch project ( scratch.mit.edu/projects/13415… ) it does not work. the embed code is
      
but i cannot embed it

anyone gimmie help?

it just comes up with

👍: 0 ⏩: 0

fantastic-strawberry In reply to ??? [2016-11-30 04:37:34 +0000 UTC]

When ever i do the images never shows up? can someone help me? ;v;

👍: 0 ⏩: 0

AdamantForceX In reply to ??? [2016-11-26 07:08:13 +0000 UTC]

For some reason, when I tried embed an image, I did what you did and it didn't work

👍: 0 ⏩: 0

MarineAlana In reply to ??? [2016-11-10 23:52:51 +0000 UTC]

Can you help me please? I put in the exact source code you described in a poll and it doesn't work QηQ

👍: 0 ⏩: 0

rockennoob In reply to ??? [2016-11-03 22:42:59 +0000 UTC]

:bigthumb643811424:

👍: 0 ⏩: 0

rockennoob [2016-11-03 22:42:32 +0000 UTC]

:thumb643811424:

👍: 0 ⏩: 0

fanchumi In reply to ??? [2016-10-30 20:26:21 +0000 UTC]

:642929811:

👍: 0 ⏩: 0

JazsDraw In reply to ??? [2016-10-25 01:44:17 +0000 UTC]

👍: 0 ⏩: 0

Newjeo [2016-10-08 19:43:42 +0000 UTC]

i.imgur.com/UJkmwWk.jpg ">

👍: 0 ⏩: 0

Newjeo In reply to ??? [2016-10-08 19:42:19 +0000 UTC]

fc01.deviantart.net/fs70/o/201… ">

👍: 0 ⏩: 0

Newjeo In reply to ??? [2016-10-08 19:41:25 +0000 UTC]

fc01.deviantart.net/fs70/o/201… ">

👍: 0 ⏩: 0

panflowers In reply to ??? [2016-09-24 23:55:43 +0000 UTC]

Staarcane  
because you need jesus

👍: 0 ⏩: 0

panflowers In reply to ??? [2016-09-24 23:55:18 +0000 UTC]

Tux-the-cat

👍: 0 ⏩: 0

MachinaMan068 In reply to ??? [2016-09-23 12:41:47 +0000 UTC]

Yeah, but how to post a google images image?

👍: 0 ⏩: 0

Paperstain545 In reply to ??? [2016-09-21 22:30:38 +0000 UTC]

 

👍: 0 ⏩: 0

SereneOblivion In reply to ??? [2016-09-10 00:31:53 +0000 UTC]

How do you copy deviantart comments?

👍: 0 ⏩: 0

KaitlynDaRcLover In reply to ??? [2016-08-31 01:56:08 +0000 UTC]

It won't work for me, I put the gif URL from tumblr and the DA code, but It won't work.. 

👍: 0 ⏩: 0


<= Prev | | Next =>