Canard theme – image scaling issue
-
hi, wondering, why did your designer make this theme where four out of five featured images are not scaling in the top grid?
The featured images show up cropped to the left or right of the image, and they are not scaled. Only the 1st post in the top grid scales fine. Is this not a flaw?
The blog I need help with is: (visible only to logged in users)
-
Hi @ismailimail,
This particular design requires the image ratios to match the box sizes in order to fill them completely.
For the 4 images that are not scaling properly, the boxes are using the maximum available height but since the image is mostly in width most of the image seems to be cut.
If you change or modify the images to be more square (for the 2 images on the right of the page) they will look much better.
For the images at the bottom of the 1st image, since they are wider, the current images look good.
If you need help from a staff member, you can add the modlook tag to this topic and they’ll be happy to assist you further.
I hope I’ve helped,
Onur
-
I have added the modlook.
Above explanation does not seems logical. The theme has defined a specific width/height dimension for featured images. It should scale as the posts move from top spot to the next four spot in the grid, and then eventually to the bottom sections. All of these images on the top featured grid do not scale – not even on mobile.
-
Interestingly, the images do actually scale as the posts move off of the top featured grid. All the posts look fine with properly scaled images when the post reaches the bottom section.
This tells me that the top featured image grid is not well structured, or at least it isn’t structured to scale the images. Looking at Canard’s demo site, I see the same behaviour. It is just so that demo site’s images look good because their sample of images are so few. But if one were to open the individual posts, one can see that the featured image on the index page does not do good service to the real full sized images as they are in the post.
Given the fact that the mobile site shows all top five images in an unscaled manner, I say this is a flaw in the design.
-
@ismailimail, in most cases theme demos use the sizes to show them in the best possible way. Unfortunately there are only a few ways to display the images in a box:
– Fill the available space in the box with the image and then crop from any direction (top-left or center in most cases but other ways are possible), this is the current look on the page.
– Change the dimensions of the box to fit the image at the risk of breaking the layout (not at all recommended but possible)
– Fit the image completely and fill the empty remaining space in the box with a color. This change can be done with CSS but will affect all the boxes and will not look very nice.If you have any suggestions or requirements regarding any changes, I’ll be happy to try and help you with some CSS hacks to accommodate your needs.
-
At the moment I don’t have CSS upgrade but I am contemplating. I am looking for two things:
1) Have CSS auto-scale the images for me in the featured post grid, so they appear centralized (like how they currently do, when the post drops to the bottom section of the blog).
2) Remove this darkened layer which is showing up in the featured image grid at the top. I’m looking to have my grid show up in its original color. Currently, it has a layer which darkens the images.
You think above two are easily achievable goals?
-
Hello again,
That’s great, however if you would need any changes regarding the CSS feel free to write back and I’ll be happy to help as best as I can.
Happy blogging!
- The topic ‘Canard theme – image scaling issue’ is closed to new replies.
WordPress.com Forums 