Synfull's avatar

Placing text + an image side-by-side on dA

By Synfull
523 Favourites
108 Comments
16K Views
A couple of years ago I wrote a detailed tutorial about how to format images and text on dA. One of the most widely asked questions on that tutorial goes along the lines of "How do I place an image and text side-by-side in a custom box on my profile?"

With the help of Sapphire-Skillz (for linking to an example) and night--rabbit (who had an example on their page) I was about to look at the HMTL to learn how this was done.




Code


An example of the code is shown below. The items in bold will need to be replaced.

Note: It is recommended that you type the code yourself - do not copy and paste from this tutorial, as it includes extra formatting that often breaks the code.


<img src="Direct link to image" width="Width of image" align="Alignment"/>


Direct link to image


Once you have uploaded the image you want to use to a website (e.g. stash, photobucket etc), the URL (web address) for the image needs to be inserted into the code. This needs to be a Direct Link to the image, which shows the image is shown on a plain background.

To acquire this link,  right click on the image and select 'copy image URL/Location/Address'. (Dependant on web browser). For example:

http://i971.photobucket.com/albums/ae198/syns-stuff/Avatars/63.png
http://orig14.deviantart.net/d26c/f/2012/148/0/5/how_do_i_use_emotes_on_da__by_synfull-d2tjctc.png


Width of image


The width of the image (in pixels). This can be found using an art program such as MS paint.

Alignment


Can be set to right or left to specify which side you want the image to appear on.





Examples



The code above adds in the image. To add text to the side, simply type it out after the code. For example:

<img src="http://imageURL.png" width="150" align="left"/>This text will appear to the right hand side of the image linked before it.


You can also add extra formatting to this text, to change how it looks. For example, you can make it bold, underlined, small or even center align it. To do this, simply add in the appropriate HTML tags around the text. For example:

<img src="http://imageURL.png" width="150" align="left"/><b><small>This text will appear to the right of the image, and be small and in bold.</small></b>


When you use a real image URL, the finished code will look something like this:

<img src="http://orig14.deviantart.net/d26c/f/2012/148/0/5/how_do_i_use_emotes_on_da__by_synfull-d2tjctc.png" width="150" align="left"/><div align="center"><i>The image to the side shows the preview of another tutorial. This text will appear to the right of the image, be center aligned and italic</i></div>






Other tutorials



Formatting text and images on dA (HTML + dA codes) by Synfull    How do I use emotes on dA? by Synfull    Using custom emotes in comments (Stash Sidebar) by Synfull
IMAGE DETAILS
Image size
120x120px 5.57 KB
Published:
© 2016 - 2021 Synfull
Comments107
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In
NT64Productions's avatar
Yo. I ain't sure if this is factoring in the mobile app or mobile site,but I don't know what the hell paint is. Is it an app? DeviantArt paint? Beats me. Please assist me as soon as possible. Thanks!
Synfull's avatar
It's just an example of a free image editing software:
Hinakichu's avatar
What if I put two pictures on the left then the text on the right?
Synfull's avatar
I can't say I have much experience of that, sorry
Hinakichu's avatar
Don't worry I already got it covered XD
Hopeful-Bagel's avatar
This helped a lot, thank you!
witches-sword's avatar
How do I an image on the right with text, and then below on the opposite side? I've tried
and moving it down in the coding, but it's not spacing very well o(-< 
Screenshot linked: gyazo.com/03b7a1b4bdfb9b3c2e5a…

EDIT: Okay I got it to separate, the coding just needs to be REAAALLLY far apart from each other LOL. Is that what is supposed to happen?
Synfull's avatar
Sorry for the uber late response. dA can be a bit weird when it comes to coding - it thinks it knows what you want to do, when you really wanted to something completely different. Glad you managed to find some sort of solution though
Dream-Chaserz's avatar
I just wanted to put a picture in the center, not on the left, because it looked bad... How do I do that? I'm sorry if I missed something, I'm not the best when I'm tired.
Synfull's avatar
Surroound it with the code to centralise stuff. For example:

<div align="center"><img src="link to image"/></div>
LordBlackLotus's avatar
Thank you so much for this! I asked about doing something like this on the forums and they said it couldn't be done! I am forever grateful you did this tutorial!
Synfull's avatar
I wasn't sure it could be done until someone showed an example. Glad you found it useful :)
LordBlackLotus's avatar
Oh yeah! Glad it can be though, I was up a crick without a paddle so to speak and there were so many fruitless google searches xD; 
Selkra's avatar
This was very helpful! Thanks for sharing!
Kiramera's avatar
Could I have a bit of help?
The normal coding for center/align text worked for me before, but while making some adjustments to my deviantID I accidentally deleted the whole thing.
I could no longer center my text no matter what I did, but apparently using a different center code seemed to do the trick!
However the text IS aligned/centered now, but it's not centered at the middle of my deviantID.
Any tips on how to fix this? Thanks! :"0

Synfull's avatar
Hi. Sorry for the uber late reply. Did you manage to fix this?
Kiramera's avatar
No worries, I managed to figure it out already.
Thank you!
Creamcloudie's avatar
Do you know how to make text and text side by side? 
Synfull's avatar
Like two columns of text? I'm not sure if that is possible
Creamcloudie's avatar
Aww man >_<
Thanks so much for replying tho!
Chelsea-Scarlet's avatar
How do I change the text size?
Synfull's avatar
You can use the <sub> <sup> <small> and header tags (e.g. <h1>) but you don't get any more control than that (except in journals where you can use CSS)
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In