Click behavior of embedded images in Humor Thread posts

[JKalchik]

Note from Moderator: This is a question regarding the click behavior of images in The Humor Thread.

Guess this is as good of a time as any.....

@Chris Allingham What's the difference between the images in post 11,165 and post 11,168? The image in 11,165 isn't any active image, i.e. it's just displayed in the post. 11,168 is an active image, clicking on the image pulls it up as an overlay (Javascript, I'm assuming) and a few other neat tricks. Quoting the posts doesn't reveal anything to me about why there's a difference, and I'd like to understand why.

 

[BFletcher]

Guess this is as good of a time as any.....

@Chris Allingham What's the difference between the images in post 11,165 and post 11,168? The image in 11,165 isn't any active image, i.e. it's just displayed in the post. 11,168 is an active image, clicking on the image pulls it up as an overlay (Javascript, I'm assuming) and a few other neat tricks. Quoting the posts doesn't reveal anything to me about why there's a difference, and I'd like to understand why.

You have to at least click the Like emoji, now.

I don't know the technology but in case this offers a clue, I use a few varying methods of inserting images here: 1) insert a saved image from my local drive 2) copy an image from another source and paste here and 3) snip an image to the Clipboard and paste it here.

 

[JKalchik]

You have to at least click the Like emoji, now.

I don't know the technology but in case this offers a clue, I use a few varying methods of inserting images here: 1) insert a saved image from my local drive 2) copy an image from another source and paste here and 3) snip an image to the Clipboard and paste it here.

As I noted, that works in the 2nd post I referenced. It does not work in the first post. Aside from obvious change in behavior, how do I know? And probably at least as important, how do I make sure that if I want to add an image, what method do I use when creating the post?

 

[Chris Allingham]

@Chris Allingham What's the difference between the images in post 11,165 and post 11,168?

I can't explain the difference. Maybe it's how they were attached to the post.

Here's the underlying code for each attachment. The second image contains a width parameter, but I temporarily removed it and it did not change the click behavior.

Image 11165: [ATTACH type="full" size="320x400"]96231[/ATTACH]
Image 11168: [ATTACH type="full" width="682px" size="1024x872"]96242[/ATTACH]

 

[JKalchik]

<scratches head> I see a couple of major differences. The first is the obvious image size, and the second is that 11168 has an additional width attribute. Has to be a size issue triggering behavior.

 

[DanHoo]

I've found that the board will resize and adjust very large images but when the image is small to start with ( like 320x400 ) it may not scale up well.

This may also be a PNG vs JPEG thing.

If you are on chrome and right click on the image to "inspect" it you can see the nuance of the image.

 

[LMichaels]

From the code one attachment looks like it's got way more pixels than the other. If the first one is 320x240 there is no way to make it activate to a larger image

 

[Chris Allingham]

11168 has an additional width attribute

As I mentioned, I tried deleting that attribute and it did not change the click behavior. Setting width to 682px only makes the image smaller in my browser than it would normally be.

This may also be a PNG vs JPEG thing.

In this instance, both images have .png extensions.

So maybe it does have something to do with the overall image size. Let me try this:





Both are .jpgs and both were inserted into the page using the Insert Image button. The little one is not clickable, the big one is. I guess we have our answer.

 

[JKalchik]

Interesting. Perfect test.