HOME | DD

Astrikos — PE: How to embed things (WILL UPDATE FOR ECLIPSE)
Published: 2013-05-08 11:25:20 +0000 UTC; Views: 135806; 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
Comments: 779

fwower In reply to ??? [2017-09-07 00:16:46 +0000 UTC]

you have to have a core membership TT_TT

👍: 0 ⏩: 1

ADF-masterlist In reply to fwower [2017-09-07 00:57:54 +0000 UTC]

Oh..yea..in status you can't......but I know how now.

👍: 0 ⏩: 1

shutupsam In reply to ADF-masterlist [2017-12-15 04:14:34 +0000 UTC]

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

👍: 0 ⏩: 1

ADF-masterlist In reply to shutupsam [2017-12-15 07:20:40 +0000 UTC]

You need core to put pictures in the status >__>

👍: 0 ⏩: 1

shutupsam In reply to ADF-masterlist [2017-12-15 07:29:44 +0000 UTC]

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

👍: 0 ⏩: 1

ADF-masterlist In reply to shutupsam [2017-12-15 09:16:42 +0000 UTC]

Pffft okay

👍: 0 ⏩: 0

Moved-noteme In reply to ??? [2017-08-27 16:31:52 +0000 UTC]

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

👍: 0 ⏩: 2

craaziifox In reply to Moved-noteme [2017-09-27 10:58:08 +0000 UTC]

just right click the image and press copy image address
then go to your page and put
should come up!! ;v; hope this helped!

👍: 0 ⏩: 0

ADF-masterlist In reply to Moved-noteme [2017-08-28 00:43:33 +0000 UTC]

Yea and I'm confused .__.

👍: 0 ⏩: 1

craaziifox In reply to ADF-masterlist [2017-09-27 10:58:05 +0000 UTC]

just right click the image and press copy image address
then go to your page and put
should come up!! ;v; hope this helped!

👍: 0 ⏩: 1

ADF-masterlist In reply to craaziifox [2017-10-02 08:04:53 +0000 UTC]

Wow thanks!

👍: 0 ⏩: 1

craaziifox In reply to ADF-masterlist [2017-10-02 09:57:49 +0000 UTC]

ah, no problemo! ;v;

👍: 0 ⏩: 0

TheFrozenDiamond In reply to ??? [2017-08-19 08:15:39 +0000 UTC]

Hi! This is extremly useful

But can you add media from your gallery? 

👍: 0 ⏩: 1

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

Yes! Go to your gallery, right click a deviation you want, then click copy image URL
Glad it helped!!

Could you do me a favor and check out my art tutorial blog
If you do, you can win 1,000 points
Holiday Giveaway Win 1,000 points + more!Hi there! 
I haven't been as active, but I still want to give back to my friends! 
One of the entry rules is offering a piece of advice for other artists. I will compile the results in a post and include it in the winner announcement. The post will also be published at my website!
Deadline: January 15th, 2018 (may be extended in the future)
Rules:
Be or become a watcher of this account! (do not create alts or watch/rewatch)Add this journal to your favorites!Please go to my art tutorial website and find an article you like or found useful. Create a journal with the following:a link to this contest journallink your favorite article from my websitea piece of advice for your fellow artists! This is the most important part!Link the journal you made in the step above in a comment! Thank you!

Bonus Entries
You get an (+one) extra entry for offer

👍: 0 ⏩: 1

TheFrozenDiamond In reply to Astrikos [2018-01-11 10:58:28 +0000 UTC]

Thank you

👍: 0 ⏩: 0

AmyMcCreepy In reply to ??? [2017-08-13 23:30:46 +0000 UTC]

Thank you for the tutorial!

👍: 0 ⏩: 1

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

Glad it helped!!

Could you do me a favor and check out my art tutorial blog
If you do, you can win 1,000 points
Holiday Giveaway Win 1,000 points + more!Hi there! 
I haven't been as active, but I still want to give back to my friends! 
One of the entry rules is offering a piece of advice for other artists. I will compile the results in a post and include it in the winner announcement. The post will also be published at my website!
Deadline: January 15th, 2018 (may be extended in the future)
Rules:
Be or become a watcher of this account! (do not create alts or watch/rewatch)Add this journal to your favorites!Please go to my art tutorial website and find an article you like or found useful. Create a journal with the following:a link to this contest journallink your favorite article from my websitea piece of advice for your fellow artists! This is the most important part!Link the journal you made in the step above in a comment! Thank you!

Bonus Entries
You get an (+one) extra entry for offer

👍: 0 ⏩: 0

LiterallyIdiot In reply to ??? [2017-08-13 07:48:49 +0000 UTC]

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! 


;-;

👍: 0 ⏩: 0

JinxieZ In reply to ??? [2017-07-31 05:58:44 +0000 UTC]

Is there a way to add a image like that into a deviation description?

👍: 0 ⏩: 1

Astrikos In reply to JinxieZ [2017-08-05 14:24:55 +0000 UTC]

I think it should work with the thumb code, but it may be locked to premium members?

👍: 0 ⏩: 1

JinxieZ In reply to Astrikos [2017-08-05 16:11:34 +0000 UTC]

Yeah, I tried the thumb code but it didnt work :c
Thanks for replying tho!!

👍: 0 ⏩: 0

ManZAnimaTor In reply to ??? [2017-07-26 16:33:45 +0000 UTC]

👍: 0 ⏩: 1

Astrikos In reply to ManZAnimaTor [2017-08-05 14:24:59 +0000 UTC]

👍: 0 ⏩: 0

NemoNemini In reply to ??? [2017-07-11 23:19:09 +0000 UTC]

Gosh I'll need to practice this so hard... Thank you so much for posting this very helpful guide!

👍: 0 ⏩: 1

Astrikos In reply to NemoNemini [2017-08-05 14:25:34 +0000 UTC]

Sorry for the hella late reply, have been busy!

Thanks! I appreciate the kind words!

👍: 0 ⏩: 0

Lil-Gib In reply to ??? [2017-06-19 20:44:42 +0000 UTC]

Help! I want to get a stash thing onto my custom widget but I can't get it! What do I do??

👍: 0 ⏩: 2

Astrikos In reply to Lil-Gib [2017-08-05 14:26:03 +0000 UTC]

I don't think you can get it on a custom widget. Thumbcodes work though!

👍: 0 ⏩: 0

Lil-Gib In reply to Lil-Gib [2017-06-19 20:49:47 +0000 UTC]

Oh, hold on! I got it, nevermind! Sorry for wasting your time =3 

👍: 0 ⏩: 0

lilfatgirl In reply to ??? [2017-06-03 03:56:35 +0000 UTC]

I keep running into an error !! (which I can't link because DA thinks it's spam

what am I doing wrong? : (  

👍: 0 ⏩: 2

Astrikos In reply to lilfatgirl [2017-08-05 14:26:22 +0000 UTC]

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?

👍: 0 ⏩: 1

lilfatgirl In reply to Astrikos [2017-08-06 15:16:58 +0000 UTC]

this is so old i fogot what is was and everything so nvm haha

👍: 0 ⏩: 0

JocoseKing In reply to lilfatgirl [2017-07-22 15:49:30 +0000 UTC]

Flagged as Spam

👍: 0 ⏩: 1

lilfatgirl In reply to JocoseKing [2017-07-22 23:40:21 +0000 UTC]

rats : (

👍: 0 ⏩: 1

JocoseKing In reply to lilfatgirl [2017-07-23 01:07:50 +0000 UTC]

Flagged as Spam

👍: 0 ⏩: 1

lilfatgirl In reply to JocoseKing [2017-07-23 15:58:52 +0000 UTC]

but I wouldn't let me post it at all

👍: 0 ⏩: 0

AprilGrigsbyArt In reply to ??? [2017-05-22 03:46:17 +0000 UTC]

👍: 0 ⏩: 0

AprilGrigsbyArt In reply to ??? [2017-05-22 03:45:58 +0000 UTC]

did it work

👍: 0 ⏩: 1

SweetPasuteru In reply to AprilGrigsbyArt [2017-05-26 16:44:53 +0000 UTC]

Yup!

👍: 0 ⏩: 0

VhasTheGuy [2017-05-12 05:48:54 +0000 UTC]

Thanks fren

👍: 0 ⏩: 1

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

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

👍: 0 ⏩: 1

VhasTheGuy In reply to Astrikos [2017-08-05 15:35:21 +0000 UTC]

Nah, dude.

Thank YOU!

Have a good one.

👍: 0 ⏩: 0

alovebeyondkass [2017-05-04 16:27:08 +0000 UTC]

👍: 0 ⏩: 1

Astrikos In reply to alovebeyondkass [2017-08-05 14:26:35 +0000 UTC]

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

👍: 0 ⏩: 0

Tatmione In reply to ??? [2017-05-01 18:48:37 +0000 UTC]

Thanks for this tutorial!
However for some reason the pic doesn't show in my message or description, instead it looks like this:
i.giphy.com/17WVjV1RJPNN6.gif ">
#help D:

👍: 0 ⏩: 1

Astrikos In reply to Tatmione [2017-08-05 14:27:20 +0000 UTC]

Hmmm 
It might be because some of these things are locked to premium members

👍: 0 ⏩: 1

Tatmione In reply to Astrikos [2017-08-09 17:16:02 +0000 UTC]

aw, shucks ;(

👍: 0 ⏩: 0

Tatmione In reply to ??? [2017-05-01 18:34:32 +0000 UTC]

Great tutorial!
But I'm not being able to add the pic to my description on a deviation.. instead it shows the code with th link itself, like this:
i.giphy.com/17WVjV1RJPNN6.gif "/>
D:  #help  

👍: 0 ⏩: 0

The-Psychonaut In reply to ??? [2017-04-05 07:58:38 +0000 UTC]

How do I embed a song directly with an image I've posted as a deviation? I want to put 'Who did that to you?' from John Legend  www.youtube.com/watch?v=cAnOt7… on my OC codyrush.deviantart.com/art/Ti… . It completely fits the character but I can't figure out HOW to put it on the picture. 

👍: 0 ⏩: 1

Astrikos In reply to The-Psychonaut [2017-08-05 14:28:11 +0000 UTC]

Can you try using the embed link that comes with youtube videos? (>Share >Embed)

I have not tried this before though, honestly.  

👍: 0 ⏩: 0

YunoBajanMC In reply to ??? [2017-04-04 03:49:21 +0000 UTC]

Hi! How do you embed photos when your using an iPad?

👍: 0 ⏩: 2


<= Prev | | Next =>