-
Posts
-
Hello Support,
I am having few problems with Gallery – Media Element which looks as if not working properly for me.
On my Home page, i am using Three 1/3 Gallery Elements (below Facebook like box and four 1/4 elements)1. The center one with Title “Harem Pants” is showing distorted / pixelated image (of Harem pant with model itself). Even though the actual image size is much bigger than the size i have choosen to be of 180 x 180 px (under gallery big preview image size).
The difference can be seen by comparing with the third gallery showing same image of Harem pant, for which i am using 495 x 400 px size. Here in third gallery, image is very clear.2. Big preview image sizes for the first one with Title “Indian Tapestries” and the second one “Harem Pants” Gallery images are showing almost of same size at frontend, even though i have set different sizes for both galleries.
First one is having 495 x 400 px and second one is having 180 x 180 px.
Although i understand that using firebug it shows the relevant sizes, but why at frontend they appears almost of identical sizes.3. In third Gallery (besides harem pants) If i Set “Yes, force the same size,” then the mouse hover animation effect (double headed brown color circle) is appearing at bottom of the image. It might be because of the different size images with different aspect ratios i am using.
But this don’t looks good at all and shifts way down.
How to maintain that mouse hover animation effect brown circle to be at center only.Kindly help me to fix these issues.
Thanks
Hi Labhanshi!
Here are my comments base on your site,
1. This image http://www.labhanshicreations.com/wp-content/uploads/2013/04/harem-pants-aladdin-yoga-pants-180×180.jpg ( is 180 x 180 ) the current container ( where the image is placed ) is 286 x 286 that’s the reason why your image is getting jagged/pixelated. Solution make a big one.
2. Images are being resize base on the column that has been defined before ( 1/3 ), the width in pixels is ~300px or ( 29.33333% ) of the screen, if you use an image that has 495px it will be forced to decrease to 300px on the given example, the reason why this needs to happen is because you need to have responsive images inside of every container, otherwise the image will overflow the container and cause a lot of layout problems. Solution scale your images properly to the column used, or increase the height if need to.
3. There is not an easy solution out of this, it comes down to, either make your images the same size ( width / height ) or play with your layout so it looks clean/nice, recommendation is to create resources (images) the same size, you will have a lot of headaches otherwise.
Mainly the issues are your current images, so if you can’t find larger ones use the width/height of the small one as your base structure.
Cheers!
DavidHello David,
Thanks for giving perfect explanation with technical reasons. :)
Although i have read and understand your each and every point, but for point 1 i wanted to know just one thing.Did you mean to say, that if i set the size of an image under “Gallery Big Preview Image Size” to be 300 x 300 px (instead of 180 x 180 which i used earlier), then it should show clear image for 1/3 layout element i am using (which is showing 286 x 286 px).
Because this size of image will be bigger than the container size and hence should display clear image.But when i tried with 300 x 300 also, then –
1. That not only distorts the image, but
2. It also shows the container size in portrait rather than square. Earlier it was showing square size when i used 180 x 180 px. (and 300 x 300 is also square)Note: Just for your experiments, the image i am using here has actually a size of 350 x 717 px
May be there could be some other reason for this, for which i would like you to help me the same way you did in earlier response.
Kindly help me to resolve this problem.By the way thanks again for clarifying the things :)
Hey!
If you want a clear image I recommend to choose a big thumbnail size for the “Gallery Big Preview Image Size”. Select the “No Scaling (Original Width X Original Height)” if you want to show the original image (without cropping, etc.).
Cheers!
PeterHey!
The problem is you’re using images with different ratio and dimension. The first images are square because, if I am not mistaken, the original image are close to being square. The only thing we can suggest is to resize the tall images close to the ratio that you want before uploading them.
Cheers!
IsmaelHello Ismael,
Thanks for bit more clarification. Although i did not get the actual response for what i am exactly looking for and facing troubles for.
But never mind, i will try to proceed as per the suggestions.
And yes, i understand this could be due to different images with different ratios.The ticket can be closed now.
Thanks for helping out :)
- The topic ‘Having few issues with Images using Gallery Element’ is closed to new replies.