Placing additional images beneath the profile picture Options

[Reidar]

Greetings.

I'd like to have two or three small thumbnails lined up beneath my profile picture. I know the html for the thumbnails and the images, but I'm uncertain as to where I would place this so it's positioned where I want it to be (in the profile).

Much appreciated.

[talcumpowder]

If you want them directly under your profile picture, that's not possible. The closest you'll get is putting them in expertise and hiding the text.

[threepointone]

about to go to sleep, so no time to code it--if you or someone else here is very familiar with javascript, the code should be something like this:

var myimg=document.createElement("img")
myimg.src="http://somewhere.com/blah.jpg"
getelement(ProfileModule1_lblImage).appendElement(myimg)

[threepointone]

the instructions are in the code.

CODE

<script language="JavaScript" type="text/javascript">
<!--
/*
this code inserts images directly below your profile image
by threepointone @ createblog.com
*/
/*
Note: to add more than one image, simply copy & paste another instance of this script, and modify as necessary. The images will be inserted BACKWARDS from the order of the scripts. */



var myimg=document.createElement("img")
myimg.src="http://www.xanga.com/images/xangalogo.gif" // set the URL here
myimg.style.height="60px" // set image height here (highly recommended, but not necessary)
myimg.style.width="200px" // set image width
// if you know javascript, you can also set whatever styles, properties, etc... for the image here


var tgtelement=document.getElementById("ProfileModule1_lblImage")
tgtelement.parentNode.insertBefore(myimg, tgtelement.nextSibling)
tgtelement.parentNode.insertBefore(document.createTextNode(" "), tgtelement.nextSibling)



-->
</script>

[Reidar]

Awesome, thanks. Couple questions:
1. how would I make that a thumbnail? I tried but I can't get it right.
2. would it be possible to somehow <br> or <p></p> it or something so that the pictures beneath have some space seperating them from the profile image?

[threepointone]

this should be much more flexible to work with. You don't need to use a DIV tag, like it is in this example; just make sure it has the

CODE

id="profilepiccontent" style="display:none"

attributes set. The profilepiccontent element and everything in it will be automatically moved under the profile picture.

CODE

<div id="profilepiccontent" style="display:none">
<!-- INSERT YOUR HTML HERE -->
</div>

<script language="JavaScript" type="text/javascript">
<!--
/*
this code inserts content directly below your profile image
v2.0
by threepointone @ createblog.com
*/
/*
HOW TO USE: create any element with an id="profilepiccontent" and insert your HTML in that element. Preferably, the element should have style="display:none" to reduce flicker while the page loads. The HTML will be copied automatically under the profile.
*/

var myobj = document.getElementById("profilepiccontent")
var tgtelement=document.getElementById("ProfileModule1_lblImage")
tgtelement.parentNode.insertBefore(myobj, tgtelement.nextSibling)
document.getElementById("profilepiccontent").style.display = ""

-->
</script>

[Reidar]

Thanks a lot, threepoint one; it's working perfectly. Well, just one thing: any idea on why there's a white border around the thumbnails? It looks odd with my dark background. Thanks for helping out with my coding incompetence, and once again, much appreciated.

[threepointone]

you probably have to set border="0" or style="border-style: none" on your images and on the DIV; it's probably left over from some of the other css on your page