Image Previews on Webpages

So one extra feature I’ve been wanting to add to my website posts is an image and gif preview, so that I can easily display memes¬†without putting media content inline with word content.

I added a Github repo for this feature so that others can integrate it with their websites. The script I edited cam from Will Boyd’s “mini-preview” shared on Codegena. This original was designed to add small iframes when hovering over links to other webpages. When I tried using this for my purposes in links to image/gif files, there were problems with sizing and styling. Instead of using iframes, the new script creates an <img> element with the image or gif and the opacity animates to show a preview of the image/gif.

One major problem was getting the wrapper <div> of the <img> to have the same height as the <img> after I set the wrapper height to auto. The height was set to auto to make sure the images show their full heights to maintain correct aspect ratio). Setting the wrapper heights to auto caused them to expand near the bottom of the page, past the bottom of the image it wrapped. After longs hours of searching why this happens and how to correct it, I found that the original creator set the iframe (in this case the image) to have a height and width of 400%. This was scaled down to 100% using a transform: scale(0.25) attribute. Unfortunately, this transform did not apply to the wrapper, so it’s height was 400% of what it had to be. I was relieved to find out I could correct this by simply getting this extended height and dividing by 4. Everything was set to be used… so I thought.

The second problem had to do with when the script would run. Using Firefox’s developer tools and console.log() in the script, I was able to see that I was getting the wrong height. I wasn’t able to see this before because the images were cached…

Took me about 10 minutes to solve where in the script I should capture and divide the correct height for the wrapper.

Here’s the link to my Github repo: