PDA

View Full Version : Thumbnail in 'Comments Popup' questions


owen-b
08-28-2006, 04:10 PM
Hey,

I've been hacking my comments popup so that it displays my 'notes' at the top, alongside a thumbnail of the image, then a section with the EXIF, and then the comments. Sort of like they do over at mysteryme.com, moodaholic.com and chromasia.com.

My problem is is getting the thumbnail to do the following:

1) I want it to sit in the same section as the 'notes', on the right hand side, but with a definite (transparent) border around it so that the text doesn't go right up to the edge of the picture. I've tried using the 'float right' code which sends the image over to the right, where I want it, but how do I instigate the border? Do I need to tell the text to have a border round it on the right hand side?

2) Any way of making the thumbnail open that full sized image on the ORIGINAL page (ie, NOT the comments popup, which I know you can do using the IMAGE_THUMBNAIL tag)? This is because my comments have a navbar at the top for next and previous and if someone surfs through the comments looking at the thumbnails and sees one they'd like to see full sized, they currently have to go back to the original page and manually surf backwards or forwards, which is a pain.

Many thanks!

PS All my work is being done on the DARK theme of my blog, so if you go have a look at it, make sure you're viewing that theme. Cheers!

Owen

GeoS
08-30-2006, 12:15 AM
My fast answer - keywords to read about:

1) CSS: margin and padding - this is solution

2) Javascript can handle windows navigation.

owen-b
08-30-2006, 06:15 PM
Thank you Geos - I actually managed to work it out in the end myself, using just that solution - padding and margins! :) I was going to post but figured as nobody had replied anyway that it wouldn't be missed...

I used the 'float right' command in the html page, as well as some padding in the stylesheet ;)

kriepl
02-06-2008, 03:28 PM
i know this thread is almost 2 yrs old, but for the sake of not starting a new thread with just a similar topic i will continue on this one.
I need to do the same sort of thing however my problem is different.

Currently I have a thumbnail in the info/comments section, however...being that I have my thumbnails set to crop to 90x90px, which i need for my browse/archive page, the thumbnail in the comments section is cropped as well. (understandably so)

My question is...is there a way to get the thumbnail, in the comments section only, to have the same aspect ratio as the image....so it is not cropped? I have a feeling there is no quick way to solve this, because I presume that the comment thumbnail is the same thumbnail used elsewhere on the site.

Also, whether the above is solved or not, I'd like a border around the thumbnail that is located in the comment section. I don't understand why there is not, since all thumbs are bordered on the browse page....isn't it pulling the same code to display the thumb in comments?

thanks.
Kevin

kevincrafts
02-07-2008, 03:49 AM
You can use the fullsize image and just resize it. I did that on the Supaclean template - I have a javascript function that will scale the photo to a particular size but is still in the correct aspect ratio. Making a similar function is not difficult.

kriepl
02-07-2008, 04:06 AM
ok thanks.
however, i am in no way fluent in js, or css.
I am piecing together bit by bit to get where i am now with the 'horizon' template. via w3schools.com
Not only do i have that thumbnail issue..which i doubt i will be able to make js as you did.
I also can NOT for the life of me figure out how to get my comment blind to sit and stay ON TOP of the photo.
I've tried using the wrapper function but I am not sure i am putting it in the correct place or doing it correct AT ALL.
If you would like to check my site: gathering of pixels (http://www.gatheringofpixels.com), you'll see what i mean. And if you could offer any tips/advice I would greatly appreciate it.

Thank you kindly,
Kevin

Dkozikowski
02-07-2008, 02:01 PM
Also, whether the above is solved or not, I'd like a border around the thumbnail that is located in the comment section. I don't understand why there is not, since all thumbs are bordered on the browse page....isn't it pulling the same code to display the thumb in comments?


Add class="thumbnails" to your <img /> tag and it should now apply the same border as the browse page.

kriepl
02-11-2008, 05:40 PM
You can use the fullsize image and just resize it. I did that on the Supaclean template - I have a javascript function that will scale the photo to a particular size but is still in the correct aspect ratio. Making a similar function is not difficult.

would it be possible for you to assist me on this?
is it something I can pull from your Supaclean template and place in the delicious template I am using?

thanks kevin,

kevin

kriepl
02-11-2008, 11:45 PM
found a temporary way to get the thumbnail aspect ratio for the info section to work.
i am using the markdown ability of the comment window with reg HTML
using this-

<img src="/images/image_name.jpg " align ="right" width="30%"></img>

seems to be working...yeah it's one extra step, but i just type it in when i add my notes on the image.

see here:

RED TREE (http://gatheringofpixels.com/index.php?showimage=164)