Properly size hover overlay to size of rendered photo
rhdesign opened this issue · comments
Using Wordpress 3.6 on firefox.
I am adding some custom styling in order for the contest entries to display a certain way in our website and I noticed that the hover overlay (which is used to trigger the full size image modal) is getting set to the size of the original image, not the size of the "a" tag with class="mycontestbox" that wraps around the image (which i needed set to a percentage width of the overall container for responsive layout).
I have attached a screenshot of the issue with my newly styled contest entries.
I would not resize images using css since the user still has to download the original size. I am adding in the next version the ability to change the size of the image. I am working to make myContest easier to customize to whatever that you like. Unfortunately, you will have to change the size of the image in myContest.php on line 789. You just need to change $width to whatever width that you would like:
$image = $this->aq_process( $url = $entry['img_url'], $width = 250, $height = null, $crop = true, $single = false );Note: This will be overwritten when you update though and must change again.
But sizing images with CSS is standard practice for responsive design. All of our websites need to work for screen resolutions of all sizes including tablet and mobile devices and also including live resizing of your browser window. I am aware that the full image has to load regardless but we are only loading in 300x300px base images so load time is miniscule.
I had a problem with the overlay and had to change it where it was calculated in myContest.php on line 847. I can look into changing this back to js (to fix your problem). I will play around with this and get back to you.
Personally, I try to stay away from css resizing since it does take processing and more data usage on the users side.
I fixed this by changing this function from php to js. I will test it tomorrow, adding it to the beta as 2.0.9.