Joomla Templates Club 406,261 posts

[darengr Friend darengrJoin date: January 2012Posts: 108Downloads:112Uploads:30 Thanks: 4 Thanked: 1 times in 1 posts]

#843123

Hi, I have a requirement to display the images in isotope layout with a given width to height ratio of 1.6, for example if in a screen of 1200 pixels width, the half for each of the 2 images is 600, so the height of the image must be 600/1.6=374 pixels (or 600 image width/374 image height=1.6 ratio). is this possible and how? thanks

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#844381

Hello darengr
images height width is defined on the container size . Could u provide us the details with help of screenshots and share your a temp. super user account details of your site . It will help us to know what exactly u want to change .

[darengr Friend darengrJoin date: January 2012Posts: 108Downloads:112Uploads:30 Thanks: 4 Thanked: 1 times in 1 posts]

#844449

The layout starts with the screen width, correct? The it tries to fit 2 images side by side within this screen width.

So if a have a laptop with 1200 pixels wide screen, in this area (assuming 100% width is used to cover the whole screen) there must fit 2 images side by side in each row in isotope. So each image would be 600 wide.

My need is that wherever the width is calculated as above, then the height of the image should not be a fixed value (for example 320 pixels as i saw in css), but a value that is calculated from the width divided by 1.6.

So in this example, 600 pixels is the image width / 1.6 = 374 pixels for the image height.

I will try to make a drawing with what I mean and post again, but more or less, it is the above description.

thanks

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#845100

Hi
Image are already using the width and height 100% > http://prntscr.com/9p1bye
In this case you only can define the height and width as 100% > http://prntscr.com/9p1ciz
You can change the height here but define width in as u want needed pretty heavy custom work in js and css files as isotop layout does not have option to set article and other options .
sorry for not much help in this case

[darengr Friend darengrJoin date: January 2012Posts: 108Downloads:112Uploads:30 Thanks: 4 Thanked: 1 times in 1 posts]

#845250

This reply has been marked as private.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#845392

Hi
You i tried a lot on template to modify the style as per you needs but , i am not able to get exactly , you can only change the static height size

In this case you only can define the height and width as 100% > http://prntscr.com/9p1ciz
By this code in custom.css file

.articles-list.ja-isotope-wrap.packery .item {
height: 320px;
}

And grid size is 50% till 768px; width

@media (min-width: 768px){
.articles-list.ja-isotope-wrap .grid-sm-2 .item {
width: 50%;
} }

It take high custom work and define new rules to complete your expectation , i am afraid it is something out of support scope . You can hire a developer for such customization . It hard to change a pre designed template style .

[darengr Friend darengrJoin date: January 2012Posts: 108Downloads:112Uploads:30 Thanks: 4 Thanked: 1 times in 1 posts]

#845397

ok then,
thanks a lot for your efforts,
regards

[Author]

Posts