HOME | DD

Astrikos — PE: How to embed things (WILL UPDATE FOR ECLIPSE)
Published: 2013-05-08 11:25:20 +0000 UTC; Views: 135906; 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 ??? [2014-04-22 13:57:50 +0000 UTC]

You could post it just as a link, but I don't think you can remove the preview; because often the preview is embedded in the GIF file itself. 

👍: 0 ⏩: 0

DrCoeloCephalo In reply to ??? [2014-04-11 20:07:54 +0000 UTC]

:thumb443038868:
:thumb443038868:

👍: 0 ⏩: 2

Astrikos In reply to DrCoeloCephalo [2014-04-22 13:58:43 +0000 UTC]

Sometimes thumbcodes get broken; but this should work in a journal!

👍: 0 ⏩: 0

DrCoeloCephalo In reply to DrCoeloCephalo [2014-04-11 20:09:02 +0000 UTC]

backend.deviantart.com/embed/v… ">backend.deviantart.com/embed/v… " type="application/x-shockwave-flash" width="450" height="310" flashvars="id=443038868&width=1337" allowscriptaccess="always">
SlamBack the dancing Wobbuffet GIF by DrCoeloCephalo on deviantART

👍: 0 ⏩: 1

DrCoeloCephalo In reply to DrCoeloCephalo [2014-04-11 20:09:39 +0000 UTC]

:thumb443038868:

👍: 0 ⏩: 0

idonknowyou In reply to ??? [2014-04-10 03:43:35 +0000 UTC]

What is wrong with this th07.deviantart.net/fs70/PRE/f… ">

👍: 0 ⏩: 0

BowtiesAreCool15 In reply to ??? [2014-04-09 19:02:18 +0000 UTC]

I'm so sorry I still don't get it

👍: 0 ⏩: 1

Astrikos In reply to BowtiesAreCool15 [2014-04-09 23:54:24 +0000 UTC]

What do you need a further explanation with?

👍: 0 ⏩: 1

BowtiesAreCool15 In reply to Astrikos [2014-04-10 09:50:52 +0000 UTC]

Well I got one up there and according to a few people I asked you do but it only lets me put one up there. is there a certain thing I need for multiple?

👍: 0 ⏩: 1

Astrikos In reply to BowtiesAreCool15 [2014-04-12 13:58:16 +0000 UTC]

You can, just copy that whole line code and paste it again. Then you change the url for your second image.

👍: 0 ⏩: 1

BowtiesAreCool15 In reply to Astrikos [2014-04-12 18:58:27 +0000 UTC]

Thank you

👍: 0 ⏩: 0

kissstormnyuu1 In reply to ??? [2014-03-25 01:01:00 +0000 UTC]

fc06.deviantart.net/fs70/f/201… " width="50" height="50" alt="Sexy horse (oh noes) by AddMedia" class="dev-content-normal" style="width: 50px; height: 50px; top: 75px; position: relative;">

👍: 0 ⏩: 1

Astrikos In reply to kissstormnyuu1 [2014-03-25 01:57:19 +0000 UTC]

This wouldn't work... But the other comment sent me should work.  

👍: 0 ⏩: 1

kissstormnyuu1 In reply to Astrikos [2014-03-26 23:35:05 +0000 UTC]

Hi thank you
after some LONG hours I figured out -- god damn it xD

👍: 0 ⏩: 0

kissstormnyuu1 In reply to ??? [2014-03-25 01:00:38 +0000 UTC]

fc06.deviantart.net/fs70/f/201… " width="50" height="50">

👍: 0 ⏩: 1

Astrikos In reply to kissstormnyuu1 [2014-03-25 01:58:37 +0000 UTC]

Is this not working? And if you're trying to put this in a journal, you need to switch to HTML mode.

👍: 0 ⏩: 0

SiZNArt In reply to ??? [2014-03-23 03:59:05 +0000 UTC]

When I try to put embed src= code, it won't show me the swf i'm trying to show because it would make the link as 'outgoing link.' is there any way not making the url as outgoing??? 

👍: 0 ⏩: 1

Astrikos In reply to SiZNArt [2014-03-25 01:59:49 +0000 UTC]

You might be in rich editing mode.. 

To get into HTML mode press CTRL/CMD + E. 
Then you can cut/paste in your code, and switch back to rich editing by pressing CTRL + E again. 

Tell me if that helps.  

👍: 0 ⏩: 0

WolfWarrior01 In reply to ??? [2014-03-09 02:29:00 +0000 UTC]

Hi!
I'm trying to embed a GIF image into a comment on a deviation - but instead of the actual GIF it just shows up with the embedding code and a link where the direct image URL is. Can you help me figure this out, please?

👍: 0 ⏩: 2

Astrikos In reply to WolfWarrior01 [2014-03-25 02:00:43 +0000 UTC]

Guessing you tried ? 

I think you can upload to the gif to sta.sh and drag and drop. 

👍: 0 ⏩: 0

ShadowsEyes In reply to WolfWarrior01 [2014-03-13 22:02:54 +0000 UTC]

I don't think you can post gif's in comments. Just journals

👍: 0 ⏩: 1

WolfWarrior01 In reply to ShadowsEyes [2014-03-13 23:31:35 +0000 UTC]

Aww. Welp, oh well, I guess.

👍: 0 ⏩: 0

ArikarinLair In reply to ??? [2014-03-06 08:33:50 +0000 UTC]

Hello!

Wonderful tutorial here, but I'm trying to upload an image from my sta.sh to my profile and, when clicked on, will take it to the full and finished image that's already been submitted to DA. But the code format provided in this tutorial blanks out like it has done to me. Haaaaalp?!

👍: 0 ⏩: 1

Astrikos In reply to ArikarinLair [2014-03-25 02:01:44 +0000 UTC]

The code format blanks out?
What do you mean? 
In sta.sh or...

Sorry I'm sort of sleepy right now, but happy to help. 
Screenshot maybe? 

👍: 0 ⏩: 1

ArikarinLair In reply to Astrikos [2014-03-25 05:17:15 +0000 UTC]

I actually figured it out, but thank you for replying!

👍: 0 ⏩: 1

Astrikos In reply to ArikarinLair [2014-03-25 21:24:22 +0000 UTC]

Glad to hear it! No problem!

👍: 0 ⏩: 0

TheSunWise In reply to ??? [2014-03-04 02:14:39 +0000 UTC]

How do I get a gif for my icon?

👍: 0 ⏩: 1

Astrikos In reply to TheSunWise [2014-03-05 22:17:57 +0000 UTC]

You can upload a GIF that fits the size requirement of icons under settings!

👍: 0 ⏩: 1

TheSunWise In reply to Astrikos [2014-03-05 22:26:47 +0000 UTC]

Why thank you!

👍: 0 ⏩: 0

Lily-Death In reply to ??? [2014-02-16 02:14:51 +0000 UTC]

it's not working for me ;-;

👍: 0 ⏩: 1

Astrikos In reply to Lily-Death [2014-02-17 01:38:44 +0000 UTC]

I probably could help! : D

Please copy and paste the code you're trying to make work...

👍: 0 ⏩: 1

Lily-Death In reply to Astrikos [2014-02-17 02:50:25 +0000 UTC]

i got it to work now! i don't know what i did wrong, but apparently i did something to mess up XD

👍: 0 ⏩: 1

Astrikos In reply to Lily-Death [2014-02-17 16:13:23 +0000 UTC]

Oh good!

👍: 0 ⏩: 0

izzebizze In reply to ??? [2014-02-02 19:05:27 +0000 UTC]

The code for embedding a link in an image just shows up as a little blue question mark for me

👍: 0 ⏩: 1

Astrikos In reply to izzebizze [2014-02-04 02:12:55 +0000 UTC]

Really? That's odd! Can you link your sta.sh + the code you used and see if I can figure out what's up?

👍: 0 ⏩: 0

KimiCanFly In reply to ??? [2014-01-28 20:22:52 +0000 UTC]

Thanks! Super helpful

👍: 0 ⏩: 1

Astrikos In reply to KimiCanFly [2014-01-30 04:49:10 +0000 UTC]

Glad you found it useful!

👍: 0 ⏩: 0

Alphaheart In reply to ??? [2014-01-21 21:53:18 +0000 UTC]

I'm adding a count down to an event on a group and I'm unable to do it. It just shows a box with a mini picture at the middle- no countdown. Can you give me any tips on how to fix that?

👍: 0 ⏩: 1

Astrikos In reply to Alphaheart [2014-01-22 02:24:42 +0000 UTC]

Can you show me the code? 

👍: 0 ⏩: 1

Alphaheart In reply to Astrikos [2014-01-22 07:13:45 +0000 UTC]

Sorry that I'm late. I'm able to fix the problem with a few experimenting!  

👍: 0 ⏩: 1

Astrikos In reply to Alphaheart [2014-01-23 01:58:36 +0000 UTC]

 

Good luck!

👍: 0 ⏩: 0

lafseo In reply to ??? [2014-01-21 05:20:38 +0000 UTC]

One of the most obvious and immediate benefits of the four-day instructional week comes in the form of lower utility costs. Durham Technical Community College recovered in utility costs during the inaugural summer sessions of the new schedule, savings which positively impacted the budget for not one, but two academic years.
mla bibliography maker

👍: 0 ⏩: 0

iAmAneleBiscarra In reply to ??? [2014-01-02 09:56:17 +0000 UTC]

how about embedding facebook posts? i found this "embed post" code from facebook and i wanted to embed it on my profile here on da, is that possible?

👍: 0 ⏩: 1

Astrikos In reply to iAmAneleBiscarra [2014-01-02 15:05:28 +0000 UTC]

I'm not sure, try it in a custom box and see if it works!

👍: 0 ⏩: 0

TheRockyCrowe In reply to ??? [2013-12-22 07:00:51 +0000 UTC]

Uhhh...thanks for the information...but so far these methods aren't working for me.;/ do you need a Premium Membership to do this??? 


Because up until my membership expired whenever I attempt to post thumbnails or Gifs, or..................oh God.........thats the problem isn't it....-^-

👍: 0 ⏩: 1

Astrikos In reply to TheRockyCrowe [2013-12-26 15:32:11 +0000 UTC]

I didn't think that Premium was required, but I think it is now. :C


Sadly, you can't really edit much code with out a premium. D: 

D:

👍: 0 ⏩: 1

TheRockyCrowe In reply to Astrikos [2013-12-27 01:44:01 +0000 UTC]

Yep..Just bought a Premium...and EVERYTHING is normal now... -^- ....but hey...they gotta make money somehow..lol

👍: 0 ⏩: 0

vanderWaardart In reply to ??? [2013-12-17 03:13:11 +0000 UTC]

Thanks very much for this. Extremely helpful and easy to follow!

👍: 0 ⏩: 1

Astrikos In reply to vanderWaardart [2013-12-21 20:57:08 +0000 UTC]

<3333

👍: 0 ⏩: 0

C4TP4WS In reply to ??? [2013-11-12 08:31:12 +0000 UTC]

how do i get text to sit next to an embedded gif?
on my page i want the gif to sit next to the writing but its not working???

👍: 0 ⏩: 1


<= Prev | | Next =>