Deviant Login Shop  Join deviantART for FREE Take the Tour
×

:iconastrikos: More from Astrikos


More from deviantART



Details

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

Stats

Views
14,459 (5 today)
Favourites
489 (who?)
Comments
278
×

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:
Silver River by dekorAdum

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

Mini Youtube Player embeddable code by CypherVisor

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:
 
:iconirkeninvadergar:
IrkenInvaderGar Featured By Owner Aug 16, 2014  Hobbyist Digital Artist
Does the direct image embedding not work for your profile description? Because I'm having difficulties with that.
Reply
:iconerraticrhapsody:
ErraticRhapsody Featured By Owner Aug 13, 2014
... I wanted to learn the linking images thing... but the description doesn't make any sense.
There's just blank image things.
There's not even a break down as to where you put the direct url and then the url for what
you want the image to actually link to.
Reply
:iconastrikos:
Astrikos Featured By Owner Aug 13, 2014   General Artist
Alrighty, somehow the tutorial images vanished, because they were working before.
Now everything looks good and replaced by copy-pastable text.
Hopefully that helps, as the images were the breakdown lol. 
Reply
:iconerraticrhapsody:
ErraticRhapsody Featured By Owner Aug 14, 2014
Thanks so much. ;3 It's working now.
Reply
:iconastrikos:
Astrikos Featured By Owner 5 days ago   General Artist
:la: Yay!
Reply
:icontylee-fan:
tylee-fan Featured By Owner Aug 5, 2014  Student Digital Artist
I want to learn how to align images on the center but somehow I can't manage !
<img src="i61.tinypic.com/2znztwz.jpg" width="400">
Reply
:iconastrikos:
Astrikos Featured By Owner Aug 6, 2014   General Artist
Before that picture, you need to go <div align="center"> then your img tag and what not.
Hope this helps! 
Reply
:icontylee-fan:
tylee-fan Featured By Owner Aug 6, 2014  Student Digital Artist
im terrible at codes could you write the whole code?
Reply
:iconastrikos:
Astrikos Featured By Owner Aug 7, 2014   General Artist
<img src="i61.tinypic.com/2znztwz.jpg" width="400">

Hopefully that works for you.  :heart:
Reply
:iconmcbrayerdontcare:
McBrayerDontCare Featured By Owner Aug 3, 2014  Hobbyist General Artist
Do you know how to put html things in a journal?

I saw someone who had a countdown in there own journal but I cant remember who it was to ask them how they did it.

I cant save image url or anything it just gives me the html.

this is the site: countingdownto.com/countdown-w…
Reply
Add a Comment: