Gallery Field: how to make thumbnails responsive (adapt dimensions)?

Quote

Total posts: 392
27 Nov 2014 11:58

Hello guys, it's been a while...

I am starting a new project and I have an issue with gallery field thumbnails. I'd like them to be responsive, to change size depending on the user screen size, but I can't find a way to make this work.

Just to try, in the full article template I tried to insert the gallery field inside a dive witha custom class

<div class="cb-img"><?php echo $item->fields_by_id[30]->result; ?></div>

and the CSS class

.cb-img img{width:100%;
    }

    .cb-img {width:50%;
        height:50%;
    }

this resizes the div, but the image inside it does not adapts to it

I must admit that it's been months since the last time I worked on some CSS code, so I may have been lost the grip on what I am doing here... eheh

Feel free to inspect the code here Click here to link...

Thank you, Nic

Last Modified: 28 Nov 2014

Quote

nican

Total posts: 392
27 Nov 2014 12:02

mhhh... looking at the code more closely I just noticed that the gallery thumbnail is insrted as a background image and not as a normal image, this could be why I cannot resize it

Quote

nican

Total posts: 392
27 Nov 2014 12:10

SOLVED! You just need to change the .image-wrapper class (which is a class around the thumbnail image)

    .image-wrapper {background-size: 100%;}

this will resize the thumbnail according with its container size, cool :-)

Quote

pepperstreet VIP

Total posts: 3,837
27 Nov 2014 13:43

oloccina this will resize the thumbnail according with its container size, cool :-)

Sorry, doesn't work for me. (latest Safari/webkit)

Just had a quick look on the example URL. I see 2 images in the page source:
1 background, 1 img below with opacity=0 (?)

The background image does NOT adjust. It stays on initial size and overflows the border and content area, as soon as I resize the screen.

Applied some different borders to visualize the 3 containers:

Bildschirmfoto 2014-11-27 um 14.35.24

Background Image thougths & links

Backgrounds with background-size have two (responsive) extra properties: cover , contain.
Related Article 3/2012
Related Article - How to Create a Background Image that Scales with the Browser Window
Youtube Video demonstration (german, but easy to see the results!)

But as usual and even 2+ years later: The CSS3 property is not supported on all browsers and devices.
Often Javascript is the last resort. Hence the fork of "backstretch" called "anystretch.js"

img tag

BTW, why does it have the "opacity=0" setting? I had success with this temporary changes in the browser...

removed opacity
image-wrapper width: 100%; position: relative;

Conclusion - The width is mandalatory! :D ;)

The most important thing is the width of the image-wrapper. It does also work with the background-image and size property!

Quote

nican

Total posts: 392
27 Nov 2014 14:19

Hi, Pepper... you're like the MintJoomla angel, you always there, and you have always solutions in your pocket :-)

Just had a quick look on the example URL. I see 2 images in the page source: 1 background, 1 img below with opacity=0 (?)

I think this is how the gallery field works, maybe to prevent image download? Anyway I applied your fix and it worked like a breeze

.image-wrapper {width: 100%; 
            position: relative;
            background: none !important;}

        .image-element {opacity:1 !important;}

Thank you so much!

Quote

pepperstreet VIP

Total posts: 3,837
27 Nov 2014 15:58

oloccina I think this is how the gallery field works, maybe to prevent image download?

Probably. I thought is was a special temporary markup of your custom output. For demonstration purposes.

I did not work with the gallery field in a real project. So, I am not aware of the markup and purpose. Also keep an eye on the results, if you change the output style. The other gallery scripts might behave different or strange.

oloccina Pepper... you're like the MintJoomla angel, you always there, and you have always solutions in your pocket :-)

:) You're welcome! Glad I could help you out.

Quote

Sergey

Total posts: 13,748
28 Nov 2014 09:07

I am glad you are back!

Quote

nican

Total posts: 392
28 Nov 2014 14:37

Sergey I am glad you are back!

Thanks Sergey :-) I am tired of doing web-design stuff... this is why I disappeared, I am selling my little company and moving from Italy to London to seek fortune as an artist and graphic designer, but I will continue to use Cobalt for personal projects for sure!

Background Image thougths & links

img tag

Conclusion - The width is mandalatory! :D ;)

Login (copy)