I would like to create a responsive photo-gallery in business catalyst. BC's photo gallery module automatically renders thumbnails, which I would like to preserve as it shortens my workflow. When you are creating the photo gallery, it allows you to set a fixed width and height, and I would like to create jQuery that can change the photo attributes to fit the screen. I have tried with CSS, but it only distorts the thumbnail.
For some context I am using bootstrap, and I would like create a fluid grid(with no margin). Col-LG-3, Col-MD-4, Col-SM-6, Col-xs-12.
When the gallery is rendered the code shows up like this:
<img src="/images/jully-black-in-concert-10.jpg?Action=thumbnail&Width=400&Height=330&Algorithm=fill_proportional&USM=1" alt="" border="0">
In order for the Thumbnails to work the I must have the follow attributes in the code:
Width=400&Height=330
Can someone help create code that automatically changes the values above to adapt to bootstrap's grid system?
So what I did to fix this issue, since I didn't get any response, I create some jQuery to wrap the pictures into div's with the bootstrap classes.
$('#photos a').wrap("<div class='col-lg-3 col-md-3 col-sm-6 col-xs-12 overflow img-responsive '></div>");
I set the pictures to be bigger than the div's themselves, and used jQuery to apply img-responsive class.
It wasn't the greatest solution but it worked for me.