Break-Down 'n Samples for Displaying Images on DA!

26 min read

Deviation Actions

x-Skeletta-x's avatar
By
Published:
10.8K Views


 This is an EXTENSION of my Flash Guide~!
PLEASE NOTE ALL THIS INFO IS BEFORE ECLIPSE !
I haven't used eclipse yet, until then, this might be outdated for those using eclipse now.

Displaying Images on DA: Thumb 'n IMG SRC Codes! by x-Skeletta-x


I've decided to move the written info to this journal so that I could offer an easier visual display to keep things apart. This is done so that you can copy-paste the code to make use of it instead of having to write it all one letter at a time. Of course you still can do that if you prefer, but if you're like me, the easiest option is always the best one~! :la: 

If you have a question about a code you are trying to get to work, the best way for me to help you is to see your code.

And to do that it is BEST if you write on my google document!

After that, write a comment here in this journal so I'll know to go look. ^^


Hover your mouse over the purple-like-buttons to see the code in action!


* * * Facts about the Thumb Code :: ~ Reminder on where to FIND the thumb code/numbers - CLICK HERE!

Pixel gemstones - Amethyst by Arrelline1.The thumb code works great when the original image is 150 pixels or smaller.
Pixel gemstones - Amethyst by Arrelline2.When the image is larger than 150 pixels it is better to use the DA:ID code; shown below! Reason why this is a great one to use for those larger images is because it also works as a link. It will let folks click it to go to that deviation where they can comment/fav and just see who made the piece. It makes this MUCH easier for giving credit to the artist as well without extra sentences!

Please be aware, if the image required a preview, the thumb code is useless because it will only show the preview image, not the original picture. For these situations it is HIGHLY recommended to use the DA:ID(shared below) code OR the IMG SRC Code(which is a bit further down this journal).

<da:deviation id="THUMBnumbersHERE">
Remember this is the PERFECT choice to go with for images that are LARGER than 150 pixels. Because it works the same as the thumb on the link-back to the original but displays the picture at full size.
Well full size within reason. If it's a really large picture and you try to insert into one of the boxes on your profile, it will be restricted to the width settings of those.
Samples:
      



Special DA:ID Thumb - Works great for large pieces. I use on my own profile. ^^

You can adjust the width and height numbers based on what you need. You wouldn't use 500 for both if the picture isn't even that big in the first place. To know what works best for the pic you want to use, you'll likely do trial and error a few times with different numbers until you get what you want!

<da:deviation width="500" height="500" id="thumbNUMBERShere">

 EHG Zircon by x-Skeletta-x


Pixel gemstones - Amethyst by Arrelline3.Now perhaps you have a hard time remembering the DA:ID code and would prefer to still use the thumb, well you can It's called BIG THUMB. Which is merely taking the thumb code and writing in the word BIG between the : and the T. Yup, it is that simple! If you do NOT add the word big to the thumbs of images that are larger than 150 pixel, the display will appear blurry and shrunken. It won't be at full quality; won't look as nice. These do NOT work in descriptions nor comments though. :c

:thumb513261561: =
See? It is blurry and ugly!
Melody Sprite by x-Skeletta-x  




:bigthumb513261561: =
See now? This looks MUCH better!
Melody Sprite by x-Skeletta-x



The Thumb Code WILL work ::
    Pixel gemstones - Sapphire by Arrelline Everywhere/Anywhere on Premium Member profiles.
    Pixel gemstones - Sapphire by Arrelline In Deviation Descriptions for Premium Members; a max of 6.
    Pixel gemstones - Sapphire by Arrelline In comments for ALL Members; a max of 5.
    Pixel gemstones - Sapphire by Arrelline Free Members you can use in the following boxes on your profile - Featured Deviation, Newest Deviation, Donate and Deviant ID!
    Pixel gemstones - Sapphire by Arrelline All members it will work in journals.
    Pixel gemstones - Sapphire by Arrelline Can use on group pages and group blogs; even without a group subby.

The Thumb Code will NOT work ::
    Pixel gemstones - Ruby by Arrelline Free members you can't use in deviation descriptions. (Plz accounts are a useful alternate option).
    Pixel gemstones - Ruby by Arrelline For those premium members who like to use thumbs in your deviation descriptions, the big thumb won't work so it is highly suggested that your stamps/buttons/thumbs are not bigger than 150 pixels so it shows clearly to make sure folks don't struggle to read it.
The DA:ID Thumb WILL work ::
Pixel gemstones - Sapphire by Arrelline in gallery folder descriptions for Core Members.
Pixel gemstones - Sapphire by Arrelline journals for ALL members.
Pixel gemstones - Sapphire by Arrelline Free Members you can use in the following boxes on your profile - Featured Deviation, Newest Deviation, Donate and Deviant ID!
Pixel gemstones - Sapphire by Arrelline At group pages and group blogs.

The DA:ID Thumb will NOT work ::
Pixel gemstones - Ruby by Arrelline in comments for all.
Pixel gemstones - Ruby by Arrelline deviation descriptions for all.
Pixel gemstones - Ruby by Arrelline 

When concerning the DA:ID code, if your image and thumb are different,

the DA:ID will display the main image (not the thumb aka preview). 

Example - If you take a look at the image I have here - Melody Sprite by x-Skeletta-x  (you are seeing the cat, blurry because its shrunken down to keep to the 150x but the original is larger)
Now if you look at this image - Melody Sprite by x-Skeletta-x you are now seeing it at it's original size (so it is not blurry and is now clear). This is displayed by using the BIGTHUMB.
Now if you was to click either one of those you'll see the image that has both the original size and the zoomed in size. If I want to display that directly here in this journal
that would look like so - Melody Sprite by x-Skeletta-x 
Now you are seeing the full image that display when you click on that deviation. And THAT is what the DA:ID will always display. So please keep this in mind when viewing/loading your works. 
For this particular piece, if Xesh wanted to display it, she'd use the BIGTHUMB code. 

I hope this makes clear the difference on what each one does and when it is best to use one or the other!

Facts about the IMG SRC Code ::
    Pixel gemstones - Topaz yellow by Arrelline This code is useful to use when the image you wish to display isn’t even loaded on DA to possess a thumb code. (Such as it’s a private pic so you keep it in photobucket or sta.sh.)
    Pixel gemstones - Topaz yellow by Arrelline Is great to be able to display an image when you want it to have a custom link to re-direct to.  * This is common for buttons linking to other Social Sites you use! Or Art Status buttons that link to your price/sample places. 
    Pixel gemstones - Topaz yellow by Arrelline I believe it works everywhere the thumb will work (yes even at groups).
    **** Except - premium member or free member, it will NOT work in deviation descriptions or comments.

How to grab the correct url to display your image ::

Remember you need to use the direct image url that ends in the file extension such as .png, .gif. jpeg etc. If the url doesn't end in the file extension type it won't work! I will try to example by using my heart and ribbon dividerUpon opening it's page, you might want to just copy the url at the top of your web browser. Looks like -
Am I right? Well that is the wrong one. You want to put your mouse OVER the actual picture, RIGHT CLICK and then select copy image url
That gives you this url (the one you need) - 
    http://fc04.deviantart.net/fs70/f/2013/115/4/c/heart_ribbon_blk_pur_by_drache_lehre-d62z84x.png
That is what you paste in the code, replacing where I put 'pictureurl' as shown next -
    <img src="http://fc04.deviantart.net/fs70/f/2013/115/4/c/heart_ribbon_blk_pur_by_drache_lehre-d62z84x.png">
Notice how the url now ends in .png? That is the direct image url and what you need in order for yours to work as shown below!

Important ::

I do want to stress only use images that grants permission from the artist/maker to do so! If it is not free to use, don't use it. Also same goes for the IMG SRC code. Some artists don't want this used for the work they share, so please do check their rules first before using this method. Following and respecting the artist's rules keeps them happy and what motivates them to continue sharing free resources with you. Thank you!

Caution Caution I do NOT want this method used for my resources. My rules state to use the thumb(big) code or the DA:ID code because then credit is automatically given to me. Thanks! Caution Caution 
Divider  :alert: :alert: :alert: :alert: :alert: 
Divider 
The only exception with my decor, is if you use Complex Code 2 , where the link you add brings folks either to my profile OR the piece in the gallery you are displaying.
Divider Only than i'd allow but if you are not familiar with coding, thumbs are the easiest to use! 


Basic Code – Only displays the image ::


  <img src="PictureURL"> =




Semi-Basic Code - Have the text wrap around your image instead of just being above or under!

Can change 'left' to 'right' if you prefer it to wrap that way! ^__^

<img align="left" src="PictureURL">Your Text Here!

Art by pennywereskunk Here you see two best friends who have become chibi-plush-ified who are also sitting on a bean-bag that looks like a mountain dew drink can! Hehe. And I hope this is enough words to get the concept across. xD


Complex Code - Shows image and a pop-up message when you put the mouse over it ::


<img src="PictureURL" title="PopUpMessageHere">



Complex Code 2 - Shows the image AND is click-able link to redirect you to another page ::

This is useful for those who want to use an Art Status Stamp/Button and have that click-able to take folks to their commissions page. :3

<a href="insertLinktogotohere"><img src="PictureURL"></a>



Complex Code 3 - Shows the image, click-able link AND a pop-up message ::


<a href="insertLinkhere"><img src="PictureURL" title="PopUPmsgHERE"></a>





Complex Code 4 - Shows the image , IS click-able link to redirect you to another page AND lets you control the actual size of the image! ::

This is useful for having a really large picture you want to display but don't want it quite at it's fullest size.

<a href="PlaceGOtowhenImageisClicked"><img src="PictureURLhere" width="400" height="300"></a>



   




If you ever have any questions that relates to this stuff, feel free to ask! You can comment here, on the flash guide deviation itself or send me a :note: If I don't know the answer I will do my best to guide you to proper source for it! But remember, I am no dA expert and thus don't know everything. What I do know is what I've learned thru my time spent on DA and I just like to share and help others too! <3


THANK YOU FOR READING! I HOPE IT WAS OF SOME HELP TO YOU!





Hashana - Birthday Gift by TwistedWytch
Skin by sergbel | Edits by x-Skeletta-x | Hover Box by SimplySilent
© 2013 - 2024 x-Skeletta-x
Comments99
Join the community to add your comment. Already a deviant? Log In
x-Skeletta-x's avatar

:redalert: :redalert:

Please take note, all of this content is BEFORE Eclipse. MOST of this, if not all, might be completely outdated and no longer true. I am not a fan of Eclipse and haven't tried to dabble on any decorating since it's been forced upon us. If I ever do give it a whirl again, I will update or make a new Break-Down to explain things. For now, this is just a piece of history of the good ole days!