HOME | DD
Astrikos — PE: How to embed things (WILL UPDATE FOR ECLIPSE)
Published: 2013-05-08 11:25:20 +0000 UTC; Views: 135804; 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; }
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, 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"> 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: Embedding a music player Good luck and happy embedding! If you have questions, you may comment below!
and select copy image URL. 
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>
Related content
Comments: 779
are you pasting the url or right-clicking and copying the 'image adress'? thats what worked for me. if you just paste the url it won't work.
👍: 0 ⏩: 3
your image is probably too large or too small, then.
👍: 0 ⏩: 0
That comment, most helpful thing I've ever read
👍: 0 ⏩: 0
I could kiss you right now
I was copying/pasting the URL from the address bar. Did what you said and it worked! 
👍: 0 ⏩: 1
of course!! i made the same mistake as well actually ^^' happy to help!
👍: 0 ⏩: 1
am I able to make a graphics image that links to somewhere else in the descrption's section when I post a deviation?
👍: 0 ⏩: 0
Is it possible to place an image in the description of the deviation? Using the thumb or HTML code does not work for me.
👍: 0 ⏩: 0
I'm having issues with this. Is it core only or does it only work in some widgets?
👍: 0 ⏩: 2
Honestly, both!
What are you specifically trying to do?
👍: 0 ⏩: 0
I've figured it out.
👍: 0 ⏩: 0
orig00.deviantart.net/82f3/f/2… >
I can't get it to work, for some reason. the image won't show up and the link disappears
👍: 0 ⏩: 1
Put the image in sta.sh and copy and paste it. It worked for me.
👍: 0 ⏩: 1
I'm still having issues. I copied and pasted it, but it didn't work. Were you copypasting the image, or the link?
👍: 0 ⏩: 1
I put it into sta.sh and used a pc to copy and past it. I got a link from right click(it might have been left click. I get left and right mixed up lol)
👍: 0 ⏩: 1
Wait, is this just for journals, or does it work in comments as well? I've been trying to use it in comments. I've seen other people post images in their comments, here, but I can't figure it out.
👍: 0 ⏩: 1
Ohh! For comments you use the thumb code. You have to use it from an uploaded image and it’s somewhere one the right hand side.
👍: 0 ⏩: 1
i’m currently having problems doing it on a submission
👍: 0 ⏩: 0
👍: 0 ⏩: 0
This helped me out so much!
Especially the image resizing tip!
Was having issues with blurry images on my profile but this helped alot!
👍: 0 ⏩: 1
Glad this 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
I'll make sure to check it out thanks! C:
👍: 0 ⏩: 0
I cant get it to work. In the description of art. It works fine in the comments.
👍: 0 ⏩: 1
I don't think it works in the description unless you have core membership, unfortunately!
👍: 0 ⏩: 1
Mm, what about images from the folders on our computer? Can those be embed?
👍: 0 ⏩: 1
I recommend uploading them to sta.sh or imgur first, then you can embed them!
Hope this article 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
Ah, thank you very much! Yes, I'll go see it.^^
👍: 0 ⏩: 0
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
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
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
i was actually crying for a good 4 minutes because i was so frustrated you just saved my life god bless
👍: 0 ⏩: 1
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
I have tried to change the size of this image, but it doesn't work ;-;
orig13.deviantart.net/f101/f/2…
Please help
👍: 0 ⏩: 1
What is the code you are using exactly? Can you copy paste for me?
👍: 0 ⏩: 1
I’ve figured it out already ^^ It’s okay
👍: 0 ⏩: 0
Ehhh wait..how do u put links from sta.sh to deviantart?
👍: 0 ⏩: 3
Right click and copy. If you are using sta.sh to host the image, click Copy Image URL (ends in .png/.jpg/etc)
👍: 0 ⏩: 0
<= Prev | | Next =>