Shop Forum More Submit  Join Login

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:

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


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:
 
:iconkrystalizedstorm:
krystalizedstorm Featured By Owner Jul 22, 2018  Hobbyist Digital Artist
TYSM for explaining the embedding-link-in-image thing!!
Reply
:iconramonabanana:
RamonaBanana Featured By Owner Jul 15, 2018
Hallo Astrikos:iconastrikos:

1.I have some questions:
How I get into my stash writer my favorite font"Segoe print",
as NON-CORE member!?

2.Can I copy and paste stashimages or stash writer texts/journals!?

3.Why not Deviantart in a dark design(Dark grey/Black with white letters!?
I have for free,without complication Windows and thunderbird in dark design.
Dark deviantart design rule,would make Deviantart more popular by teens!
Reply
:iconstatikyu:
Statikyu Featured By Owner Jul 9, 2018  Hobbyist Digital Artist
mine is very small and bad quality, even if the pic is 1920x1080
Reply
:iconlynkofwinds:
LynKofWinds Featured By Owner Edited Jul 8, 2018
Would someone care to tell me how I can embed a video using the "film" option...?
EDIT Nevermind, I just wanted to be able to put a video on my profile that wasn't uploaded to YouTube, but I would not qualify as a professional film/animation artist for dA film access (^,:
Reply
:iconanimatedobjectsshows:
Animatedobjectsshows Featured By Owner Jul 4, 2018  Student Digital Artist
I'm still having trouble, I don't get it. When I click on Preview, I still get the link. I want this picture in my journal.

setosnicegirl.tumblr.com/post/…

i53.tinypic.com/qph5oo.jpg
Reply
:iconthe-sketchy-orca:
the-sketchy-orca Featured By Owner Jun 28, 2018  Hobbyist Traditional Artist
all it does is this:

<img src=i.imgur.com/VlIaPjP.gif>
Reply
:iconthe-sketchy-orca:
the-sketchy-orca Featured By Owner Edited Jun 28, 2018  Hobbyist Traditional Artist
i can't put images or gifs into status updates. can anyone help?
Reply
:iconhaloclimb:
Haloclimb Featured By Owner Jun 26, 2018  Hobbyist
Unfortunately not working for me to put pictures into descriptions of pieces I've submitted- I'm guessing you need core for that?
Reply
:iconperrylegocity60134:
perrylegocity60134 Featured By Owner May 28, 2018  Hobbyist Writer
Reply
:iconsakishithewolf:
SakishiTheWolf Featured By Owner May 22, 2018  Hobbyist Digital Artist
i tried the <img src="Direct Image URL"> thing and it doesn't work :(
Reply
:iconsakishithewolf:
SakishiTheWolf Featured By Owner Edited May 22, 2018  Hobbyist Digital Artist
Reply
:iconsupremevideogame:
SupremeVideoGame Featured By Owner May 27, 2018  Hobbyist General Artist
You have take of the speeck marks
Reply
:iconsakishithewolf:
SakishiTheWolf Featured By Owner May 22, 2018  Hobbyist Digital Artist
see?
Reply
:iconlinaija:
Linaija Featured By Owner May 10, 2018
Very helpful, ty <3
Reply
:iconastrikos:
Astrikos Featured By Owner May 16, 2018  Hobbyist Artist
Glad I could help! :la:
Reply
:iconxuro2dalusovee:
Xuro2DaLusovee Featured By Owner Edited Apr 30, 2018  Student Digital Artist
Reply
:iconsupremevideogame:
SupremeVideoGame Featured By Owner May 27, 2018  Hobbyist General Artist
Take of the speech marks
Reply
:iconxuro2dalusovee:
Xuro2DaLusovee Featured By Owner Apr 30, 2018  Student Digital Artist
Doesn't work
Reply
:iconastrikos:
Astrikos Featured By Owner May 16, 2018  Hobbyist Artist
What isn't? 
Reply
:iconkamikazaye:
Kamikazaye Featured By Owner Apr 24, 2018  Hobbyist Digital Artist
<imgsrc=" ">
Reply
:iconastrikos:
Astrikos Featured By Owner May 16, 2018  Hobbyist Artist
need a space between img and src! :heart:
Reply
:iconwings-0f-dawn:
Wings-0f-Dawn Featured By Owner Edited Apr 16, 2018  Hobbyist Digital Artist
When I put pictures side by side the formatting comes up all weird....I can't describe it.  Its really annoying because on my home page they look all skewed but when clicking on the journal they align kind of nicely? Also every time I go in to edit the pictures all disappear and I can't get them back unless I go through and put each one in again from my stash. It does the same for all the emoticons I use

This is the journal I've been slaving over and I just can't get the pictures to line up but I'm scared that if I try to edit them I'm gonna have to start all over again

Edit:Wait nvm Im just really really dumb xD
Reply
:iconastrikos:
Astrikos Featured By Owner May 16, 2018  Hobbyist Artist
Hmm, can you send me a link to the code you're using? I think you can give me the sta.sh link or just copy paste? 
Reply
:iconsunflower--queen:
Sunflower--Queen Featured By Owner Apr 7, 2018  Hobbyist Digital Artist
THANKS SO MUCH!! GONNA PUT A LOT OF COOL GIFS ON MY PROFILE :>>
Reply
:iconastrikos:
Astrikos Featured By Owner May 16, 2018  Hobbyist Artist
:eager:
Reply
:iconthewhitesorceress:
TheWhiteSorceress Featured By Owner Mar 22, 2018  Hobbyist General Artist
AAAAAAAAAAAAAHHHH IT ACTUALLY WORRRKSS!!!!!!!

DFJ HAPEOR YAOR U;EJ KCX; FO9RYPT7EGYR JHBGLI;GIU
Reply
:iconastrikos:
Astrikos Featured By Owner May 16, 2018  Hobbyist Artist
:love: Glad this helped!
Reply
:iconthewhitesorceress:
TheWhiteSorceress Featured By Owner May 17, 2018  Hobbyist General Artist
yes!
Reply
:iconperrylegocity60134:
perrylegocity60134 Featured By Owner Mar 8, 2018  Hobbyist Writer
Actually what happened to the comments?
it seems that I can't post a comment...
Reply
:iconperrylegocity60134:
perrylegocity60134 Featured By Owner Mar 8, 2018  Hobbyist Writer
<img src="http://25.media.tumblr.com/tumblr_lyhnrtNYq41r7e6yco1_250.gif" width="310" height="430">

Reply
:iconperrylegocity60134:
perrylegocity60134 Featured By Owner Mar 8, 2018  Hobbyist Writer
Reply
:iconsupremevideogame:
SupremeVideoGame Featured By Owner May 27, 2018  Hobbyist General Artist
Take of the speech marks 
Reply
:iconsniffeh:
Sniffeh Featured By Owner Feb 28, 2018
I can't get it to work. It just showed a link:


<img src="leadertank.files.wordpress.com…
Reply
:iconsupremevideogame:
SupremeVideoGame Featured By Owner May 27, 2018  Hobbyist General Artist
Take of the speech marks
Reply
:icon4ngryb1rd5numb3r10:
4ngryb1rd5numb3r10 Featured By Owner Mar 7, 2018  Student General Artist
Same here, I don't why! T_T
Reply
:iconinsaneadolescent1003:
InsaneAdolescent1003 Featured By Owner Feb 26, 2018  Hobbyist Writer
ah! i've tried this so much and it still hasn't worked, i must be really stupid :(

how do i put an image in a devation's description? i'd appreciate it so much if you could tell me. once again, thank you so much.
Reply
:iconamanda-kulp:
Amanda-Kulp Featured By Owner Feb 23, 2018  Student Digital Artist
I cant get it to work
Reply
:iconamanda-kulp:
Amanda-Kulp Featured By Owner Feb 23, 2018  Student Digital Artist
Reply
:iconjenndylyon:
JeNnDyLyOn Featured By Owner Feb 23, 2018  Hobbyist Digital Artist
Unfortunately, this doesn't work for me :( I'm trying to link stamps that I find to my social media pages, and even when I put the HTML codes in properly, they turn out like this:

Wtf by JeNnDyLyOn

I've tried saving them and uploading as stash links, same result.

I'm trying to put this in my "About Me" section.

Please help! :cries:
Reply
:iconrafadg:
RafaDG Featured By Owner May 30, 2018  Student Digital Artist
Same for me, but in right clicking on the image on stash and copying the from there.
Reply
:iconsatyrbones:
satyrbones Featured By Owner Feb 23, 2018  Hobbyist General Artist
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.
Reply
:iconxuro2dalusovee:
Xuro2DaLusovee Featured By Owner Apr 30, 2018  Student Digital Artist
IT STILL DIDN'T WORK
Reply
Add a Comment:
 
×

:iconastrikos: More from Astrikos


Featured in Collections


More from DeviantArt



Details

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

Stats

Views
94,358
Favourites
1,657 (who?)
Comments
863
×