Joomla Templates Club 406,261 posts

[palos Friend palosJoin date: January 2013Posts: 369Downloads:37Uploads:8 Thanks: 125 Thanked: 27 times in 7 posts]

#193581

How should I override some css if I want the image galleries on the frontpage FILL TO GRID instead of the current FIT TO GRID

If I do not use square format images in the galleries at the frontpage then a rectangle image (lets say a 3:2 format) will be fitted to the top of the square format grid… leaving a 1/3 empty space at the bottom of that grid.

Of course I would prefer not squeezing but cutting the left/right edges and showing e.g the center of the image.

I think it will be somewhere:

.fixel-grid .items

and maybe adding these rows to the wrapper should solve the problem:

background-size: cover;
background-position: center center;

Thank you!

[palos Friend palosJoin date: January 2013Posts: 369Downloads:37Uploads:8 Thanks: 125 Thanked: 27 times in 7 posts]

#517839

Maybe somewhere here?

.fixel-grid .grid-1x1 .item-gallery-wrap .item
.fixel-grid .carousel-inner> .item
.carousel-inner > .item > img,
.carousel-inner > .item

any idea?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#517887

Could you provide me with the url of the site you’re working on and tell me the grid you wish to change? Meanwhile, set Optimize CSS option in template manager to No. I will have a closer look for troubleshooting.

[palos Friend palosJoin date: January 2013Posts: 369Downloads:37Uploads:8 Thanks: 125 Thanked: 27 times in 7 posts]

#517925

Hi Saguaros!

PM sent. Thank you in advance,
palos

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#518014

Hi Palos,

Could you send me screenshot highlighting the article you want to change and how it should be? As I can see, all your articles look fine now: http://prntscr.com/2i25yr

1 user says Thank You to Saguaros for this useful post

1. palos

[palos Friend palosJoin date: January 2013Posts: 369Downloads:37Uploads:8 Thanks: 125 Thanked: 27 times in 7 posts]

#518036

Hi Saguaros!
Thank you but it is not so good as it seems 😉
Just check the portrait gallery at left under the big white square in your screenshot and you can see the images are distorted from aspect ratio 3:2 to 1:1. All the other gallery filled up with 1:1 square format images and that is why they look fine.
The distortion simply caused by my faulty modified css:
.fixel-grid .grid-1×1 .item-gallery-wrap .item img {
width: 300px !important;
height: 300px !important;
}

Fixel’s initial design is: FIT TO GRID :((
My faulty one is: SCALE TO GRID >:(
My wish would be: FILL TO GRID :-*
please check this tutorial

Thank you,
palos

An additional issue also found: it seems that the grid have to be feeded by 300*300px images but they will be used just 299*299px scaled ones and give them two times 1px border so 1+299+1=301px the result. That is why the quality worse a bit.
I started to feed the grid with 299*299px images – avoiding quality loss – and they appearing surprisingly downscaled to 296*296px and the result is 1+296+1=298px.:confused:

[palos Friend palosJoin date: January 2013Posts: 369Downloads:37Uploads:8 Thanks: 125 Thanked: 27 times in 7 posts]

#518147

Just botched a solution for the 3:2 landscape case:
.fixel-grid .grid-1×1 .item-gallery-wrap .item img {
width: 450px !important;
height: 300px !important;
max-width: 150% !important;
position: relative;
left: -25%;

So a 450*300px landscape image is showing its center at 300*300px.
Not so nice but does the job for this case.

Still would be happy to see THE solution 😀

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#518250

Hi Palos,

You can apply that solution as images looks nice in your site now.

<blockquote>
An additional issue also found: it seems that the grid have to be feeded by 300*300px images but they will be used just 299*299px scaled ones and give them two times 1px border so 1+299+1=301px the result. That is why the quality worse a bit.
I started to feed the grid with 299*299px images – avoiding quality loss – and they appearing surprisingly downscaled to 296*296px and the result is 1+296+1=298px.
</blockquote>
Actually, the size will be calculated and scaled by percentage. This will guarantee to keep grid with ratio 1:1 or 2:2, etc… set in backend when viewing your site in different screen resolution.

1 user says Thank You to Saguaros for this useful post

1. palos

[palos Friend palosJoin date: January 2013Posts: 369Downloads:37Uploads:8 Thanks: 125 Thanked: 27 times in 7 posts]

#518276

Hi Saguaros,

I just do not know the reason why my grid and its images changed to 296px.
I see that the default(?) descale from 300px to 299px is also make their quality worse and that is why I started to fiil up the grid with 299px images but they scaled again to 296px. So strange and I cannot follow its logic at all!
:((

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#518372

Hi Palos,

I agree that when being scaled, images will not be perfect but this is really hard to control as it will be scaled automatically due to screen resolution.

[palos Friend palosJoin date: January 2013Posts: 369Downloads:37Uploads:8 Thanks: 125 Thanked: 27 times in 7 posts]

#518428

Hi Saguaros,

No, it is not caused by the screen resolution nor the browser window size.
I cannot believe that the template has been designed over native 2560×1440 nor 1920×1200 (which I use) so I should see the full site at native 100%. If I check it on smaller resolution monitor or decrease the browser window size then it decrease too as usual.
If I inspect element it in chrome then I see all the images are 296×296 pixels (natural 300x300pixels).
default issue: The 300px images in the grid are scaled to 299px
my worse issue: The 300px images in the grid are scaled to 296px
:((

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#518634

Hi Palos,

I’m sorry if my explanation was not clear enough. Your site includes multiple grids; based on the screen resolution, the web browser will render by percentage (the size value of image: 299px, 296px,..like you see in browser was round up because it will not display something like 33.34567%) to make sure that all grids display correctly.. However, the way of rendering is different between browsers. If you view your site in Firefox, you will see that the image will have different size.

[palos Friend palosJoin date: January 2013Posts: 369Downloads:37Uploads:8 Thanks: 125 Thanked: 27 times in 7 posts]

#518857

Hi Saguaros,

I am afraid of that I was not clear.

• Descaling by resolution is OKAY!!! I do not mind it.
• At the demo you use 300x300px nice images for the grid. It is OK.
• At the downloadable package those nice images changed (of course) for 300x300px white images with diagonal text ~300px. It is OK.
• The template basically were designed for 1280×1024 by YOU. It is OK.
• I use larger resolution screens so the site design remains as you designed it (I have more empty spaces) It is OK.
• The “300px” grid (wrapper) is coded to only 299px and that is why its contant (the images) get worse by descaling EVEN AT THE FULL VIEW… IT IS BAD.

So strange but this is not enough. I am sad with the 299px but somehow my site now uses only 296px even at full view.
Please help to find why my site not only BAD (by this way) but WORSE.>:(

[Author]

Posts