Responsive Gallery

+1

Why not use the inherent capabilities within Omega to simply switch the Gallery style to a smaller version? I made a "micro gallery" which is dinky and can be made even smaller. With Omega, switching to that style is a snap.

What about galleries that are floated inside the content with text wrappage?

Using "micro galleries" and features inside of themes such as Omega would solve the problem.

1. The site/owner has to CARE about whether or not the site looks good or performs well on a phone! On many sites I work on, only an idiot would try to use the site in a dinky little phone, and the owners don't care about providing that capability because the content/entirety of their site applications are simply too big and too costly to try and make the site conform to such and idiotic usage.

2. If the site owners do want mobile compatibility and usefulness, simply switching to different outputs via styles with mechanisms in themes like Omega solves the problem.

3. There are three OS's for mobile; iPhone, blackberry and android. They all announce themselves... so using the responsive grid with different styles would solve the problem. ALL of them do scaling... even if you try your hardest to say "do exactly this"... they still are not going to! User settings, you cannot know about (ones that are not "public" meaning, sent as part of the connection information... there are too many variables so those applications do a lot of nuts and bolts inside THEIR OWN applications to do MAJOR handling of web site presentation.

4. Gallery controls.... how to define those logically when using floating percentages on the image wrapper? We could eliminate the thumbnail scrollers in those cases (again, via styles switched on the fly with a theme like Omega, or any theme if the themerrrrr knows what they are doing ;))... then you dont have problem of EXTREME microscopic thumbnail carousels with even smaller left/right controllers.

So to me, with the responsive grid and ability to switch on the fly, I don't see why a happy medium cannot be realized RIGHT NOW. No phone is EVER going to display your "exact" dimensions 100% of the time. Using micro-gallerys for phones, pads etc to me seems to be available right now...

*I need to be educated on this I guess* My own commercial websites can display on a phone.... but really I only need a couple sections that a customer might want to use with a phone... and they display just fine, with variance from device to device but "very good" I would say. The rest of the sites, in my view, only an idiot would try to use it from a phone... iPad, maybe but there's no problem with that.... see what I be sayin?

jQuery.noConflict();
jQuery(document).ready(function(){

	jQuery('#selector img, #selector2 img, etc......').each(function(){
        jQuery(this).removeAttr('width')
        jQuery(this).removeAttr('height');
        /* jQuery(this).removeAttr('style'); */
    });

});

You could easily clean that up and do a loop so you don't have to have a bunch of comma separated selectors. But for one or two, that always does the trick for me. Folks that can't load javascript usually are on such old browsers that the responsive grid won't resize anyway. So I don't mind doing it in javascript.

I've also went in and done it with imageapi. But I was hacking the core on an experimental site. Would be easy to throw into a module that contribs to imageapi and rips out the width="" and height="" elements of each selected image.

+1

#2 DRIVE sums up the state of things nicely.

At a certain size it would be nice to drop the thumbnails and default greenarrows and use the inline slide arrows instead. I've just spent a little bit of time trying to insert max-width: 100%; to make the main slide scale nicely. No joy. Until I become cleverer, would someone please have a crack at making this formatter truly awesome on the little screen?

+1 will be nice

The better module for responsive image is http://drupal.org/project/resp_img is really god and like native module too.

This module have compatibility with:

Full support for image fields
Full support for colorbox
Partial support for field_slideshow
Doesn't need any changes to .htaccess / nginx
Supports page caching per size
Can do an automatic reload if the cookie isn't set
Can do an automatic reload if the window size is changed
Supports expire module, so the cache gets cleared for all defined suffixes
Supports the Context Module
Supports the Media Module
Supports images within blocks (can be disabled on the settings page)
Supports images within entity textfields (must be enabled in the settings of the field)
Clone image styles for all defined suffixes
Support Retina displays

I think this is a really god solution

Just for future reference:

Picture is becoming the standard for responsive images in Drupal. Along with breakpoints. It is the successor to resp_img project mentioned in #8.

I have a couple of comments on this too. I've used gallery formatter on a number of projects in the past but do agree that its jQuery rendering is a little tricky to style and customize (notably for responsive needs). In some regards this has led me to build (and adopt within my own projects) a different solution that leverages a 3rd party javascript library whos primary purpose is responsive presentation (Juicebox).

It seems there are several pieces that need to come together for a proper responsive gallery in Drupal:

1. A way to tap into Drupal content structures (field, views, etc.) and extract/structure image data into galleries (of course this part is generic and not specific to just responsive gallery design).
2. A way to dynamically re-size the source images (the raw image scale that is sent to the browser independent of its final presentation).
3. A way to render and present all this as a final responsive gallery within a Drupal page, with thumbnails, navigation controls, etc. that are also responsive.

There are many existing solutions in Drupal to do #1 (such as Gallery formatter) and #2 (ais, picture, responsive image styles), but I never found a "go-to" solution for #3 that did not involve lots of custom work. I think some of Drive's comments (in comment 2) also related to this shortcoming. What I did find however was a 3rd-party project that focus primarily on this need: http://www.juicebox.net, and so I decided to create a Drupal integration module for it.

I'm certainly not advocating one module over another (my responsive design needs may not be your responsive design needs), I'd just be interested to know what "recipe" others look for when it comes to building responsive galleries. Ultimately I think that's what it comes down to, the right recipe. Is it possible to have all 3 of the pieces I noted above with a recipe that uses Gallery Formatter? Is that just a matter of making the module's jQuery and CSS responsive? If so I'd like to follow along with this and see how it relates to my own development efforts (with both Juicebox and my personal responsive web projects in general).

Here, a gallery style and a tpl that will make your gallery responsive.

The thing is: you only have fixed aspect ratio.

Copy the tpl to your theme dir (templates subdir) and the style dir to gallerystyles dir into module location.

Select the formatter as responsive and you are done.

Dont expect it to be 100% correct. It's just a hack.

Thank you :)

Thank you very much, metal696heart!
Everything is working, but now does not display image Title and Alt

In the responsive.css file look for :

.galleryformatter-responsive .gallery-slides .panel-overlay {
    color: white;
    left: 0;
    position: absolute;
    bottom: 0.5em;
    width: 100%;
}

and change the bottom value or theme as you need.

You might need to use some @media queries conditions for different sizes, for example:

@media screen and (max-width: 600px) {

.galleryformatter-responsive .gallery-slides .panel-overlay {
top:0.5em;
font-size:80%;

etc:etc etc etc ;

}

}

Hi all
sorry, I'm newbie and I've missed something

- I've downloaded the galleryformatter_responsive_style.zip and I've unzipped
- I have copied "galleryformatter.tpl.php" in /var/www/mywebsite.com/sites/all/themes/best_responsive/templates (then chown)

# ls -l sites/all/themes/best_responsive/templates
totale 84
-rwxrwxrwx 1 www-data www-data  2413 27 feb 20.16 block.tpl.php
-rwxrwxrwx 1 www-data www-data  4012 27 feb 20.16 comment.tpl.php
-rwxrwxrwx 1 www-data www-data  2034 27 feb 20.16 comment-wrapper.tpl.php
-rw-rw-r-- 1 www-data www-data  2208  7 ago 13.44 galleryformatter.tpl.php
-rwxrwxrwx 1 www-data www-data   572 27 feb 20.16 html.tpl.php
-rwxrwxrwx 1 www-data www-data  1817 27 feb 20.16 maintenance-page.tpl.php
-rwxrwxrwx 1 www-data www-data  5361 27 feb 20.16 node--forum.tpl.php
-rwxrwxrwx 1 www-data www-data  5280 27 feb 20.16 node.tpl.php
-rwxrwxrwx 1 www-data www-data 10794  3 apr 15.21 _original_page.tpl.php
-rwxrwxrwx 1 www-data www-data 10040  3 lug 11.32 page.tpl _backup_.php
-rwxrwxrwx 1 www-data www-data 10954  3 lug 14.40 page.tpl.php
-rw-r--r-- 1 www-data www-data   965 29 mag 17.04 _pezzo_page.tpl.php
-rwxrwxrwx 1 www-data www-data   139 27 feb 20.16 region.tpl.php

- I have copied "responsive.css" and the "images" directory in /var/www/mywebsite.com/sites/all/modules/galleryformatter/gallerystyles/ (then chown)

# ls -l sites/all/modules/galleryformatter/gallerystyles/
totale 12
drwxr-xr-x 3 www-data www-data 4096  9 mag 10.17 greenarrows
drwxr-xr-x 2 www-data www-data 4096  7 ago 12.36 images
-rw-rw-r-- 1 www-data www-data 3540  7 ago 12.36 responsive.css

- I went in the content type with the gallery inside and I've changed in "manage display - format - setting" the style from "greenarrow" to "responsive"

The gallery now appear the same as "no style"

What's wrong with my steps?

Thank you
Paolo

Clear theme registry cache ?

Sorry for long time...
I was on holiday and I cut off all connections between me and know world!!

I tryed to clear the cache but it doesn't works
Did I have put the files in the right directories?

I'll be uploading some fixes that worked for a site testing the responsive style for jQuery Slider.

Please test the following responsive.css and galleryformatter.tpl.php files by backing up your current responsive folder and then copying the files in the attached zip file into the responsive folder in the GalleryFormatter module (galleryformatter/gallerystyles/responsive).

I made what I thought to be improvements to the responsive.css and removed the inline styles from the galleryformatter.tpl.php
How does it work for you?

#19 works if the attribute style="width: auto;" remains on line 46 of galleryformatter.tpl.php (as originally put in #11). If it's not there, the size of the thumbs is the same as the main image.

  <div class="gallery-thumbs">
    <div class="wrapper">
      <ul>
        <?php foreach ($thumbs as $id => $data): ?>
          <li class="thumb slide-<?php print $id; ?>" style="width: auto;">
          <a href="#<?php print $data['hash_id']; ?>"><?php print $data['image']; ?></a></li>
        <?php endforeach; ?>
      </ul>
    </div>
  </div>

Not related: doesn't it make more sense to switch the h3 and h4 tag in the overlay? I changed mine to:

<?php if ($data['alt']): ?><h3><?php print $data['alt']; ?></h3><?php endif; ?>
<?php if ($data['title']): ?><h4><?php print $data['title']; ?></h4><?php endif; ?>

Instead of

<h4>alt</h4>
<h3>title</h3>

Thank you metal696heart! You've made my day.

This is sad, it is not working for me. There is no responsive behaviour of the images using the suggested files. the width of the formatter gets cut when minimizing the window (so the slider image gets cut too, the thumbs break to the next line). If someone else has a suggestion I would be very grateful.

#19 and #20 together do work for fine for me. However, I do notice a few problems:
1) the caption (.panel-overlay in the css) gets stuck somewhere halfway through the main picture, and wanders when resizing screen (absolute positioning problem?)
2) the thumbnail div overlaps bottom of the main picture if that picture has different ratio from letterbox? Again I suspect and absolute positioning issue? Usual solutions of floats and margins does nil here.

3) also, after 'updating' my gallery formatter files to the responsive version, my Views created page breaks when I switch on jQuery 1.8 (back in 1.7 it works)!

Any help on the above very welcome. Other than that this saved me nights of blood sweat and tears so thanks!

If you mean the page in which you create/configure the views, you can avoid this by checking the option to use jQuery 1.5 for admin-pages (jQuery Update).

@knalstaaf: Thanks for your suggestion, but I am afraid in meant that if I switch jQuery to 1.8, the output of the view (so the page a visitor sees, not the admin page) is broken.. I can only use the responsive version of the gallery when jQuery is 1.5 or 1.7 :(

metal 696 - it works perfect!!!! it even fixed the RTL issue of formatter!!!!!

metal696 thank you, your responsive style works fine for me. Only one request, it's possible to center the main image because it appear at the left side, I try to use margin: auto; but only center the image vertically instead i'd like to center the main image horizontally.

Thanks

Thank you all #19 & #20 worked well for main image. This is a great fast fix solution for making images mobile friendly. However have lost the thumbnails and the scroll arrows. Would be grateful for advice on how to get these back. I have used jquery gallery extensively across my site and I would love to continue with this as a fast and simple solution, but do need some help to restore the thumbs and scrolls. Thanks in advance :)

OK, slide arrows on main image I now have and 1 thumbnail. Found that I had not copied the images forlder the the galleryformatter/gallerystyles folder.

The only issue remaining now are the thumbs. Only 1 thumb is showing and its position is partly overlaying the main image. This may be a simple fix but unfortunately I do not have knowledge of CSS code and would ne grateful for advice. Once again thanks in advance :)

awesome addition to this module which may help with the changes Google have coming looking for sites that are responsive/mobile friendly and the updated ranking system coming into play

works for me also, however, as pointed out in #27 and down, possibly a couple of tweaks to do to make it 100%

thanks

Missing Scroll Arrows!

The responsive style seems to have dropped the scroll arrows. It shows the main image and the thumb carousel fine, but I'm unable to scroll on either direction.

Any ideas on how to get these back?

Never mind. I had to adjust my css.

Can you provide the code in the form of a patch so we can properly work on it please.
https://www.drupal.org/node/707484

I have made a few changes to the files as proposed in #11 to make this patch as compatible as possible.

The biggest change is that there is no need for any template files anymore. This was achieved by adding several !important lines to the CSS. It is a bit hackish, but until there is support for different template files per gallery style, it is the only way to make this work out of the box.

I have also removed a lot of the absolute positioning from the module to make the positioning of the thumbnails more predictable (no more overlay as indicated in #29 and centered the image as requested in #27.

It is not yet perfect, changing the window size does not correctly position the thumbnails (yet), but that could be fixed with javascript as well...

So far I have tested it with square images only, but I suppose it would work with other images as well.

@Manuel Garcia, the patch formatting does not support binary files, so the images need to be downloaded from #11 manually.

Thank you @Neograph734 for the patch!

I will bookmark this and have a deep look into it when I get a decent chunk of time to properly test it. For now just my thoughts on this approach:

I am not terribly excited about the idea of using !important, could you explain why making use of the preceding css class .galleryformatter-responsive in the css selector is not enough?

And a quick review on the patch itself:

1. +++ b/gallerystyles/responsive/responsive.css
   @@ -0,0 +1,133 @@
   +.galleryformatter-responsive .gallery-thumbs .back { ¶
   

   Trailing whitespace

2. +++ b/gallerystyles/responsive/responsive.css
   @@ -0,0 +1,133 @@
   +.galleryformatter-responsive .gallery-slides,  ¶
   +.galleryformatter-responsive .gallery-slide,  ¶
   

   Trailing whitespace

3. +++ b/gallerystyles/responsive/responsive.css
   @@ -0,0 +1,133 @@
   +  /*height: auto !important;*/
   

   If we don't need this, we should not add it as a commented line

4. +++ b/gallerystyles/responsive/responsive.css
   @@ -0,0 +1,133 @@
   +	position: relative !important;
   +	top: 0;
   +	left: 0;
   

   Indentation.

I am not terribly excited about the idea of using !important, could you explain why making use of the preceding css class .galleryformatter-responsive in the css selector is not enough?

Certainly, that is because the default template forces a width in the style tags, Javascript in turn defines some heights. Using !important is the only way to override that behavior.

Other ways would be to change the template file (as was done in #11 and #19), but that would require users to move templates around after installation, or the default template processing logic would need to be adapted, which with high probability would break the default greenarrow theme. As explained in my previous post it would be best if each theme could define its own template file, but since that is not supported I found this to be the least intrusive way.

Sorry about the whitespace. As for issue 3, I was playing with it. Ideally we want the height to be automatic so the thumbnails line up nicely, but it would collapse to 0 pixels because of the absolute positioning of the slides (which I realize I might have broken with the relative positioning below, it might have to be reverted to absolute).

+.galleryformatter-responsive .gallery-slides,  
+.galleryformatter-responsive .gallery-slide,  
+.galleryformatter-responsive .img {
+  position: relative;

I've had sometime today and played around with the style being proposed here.
I think it is close, however I've got a few concerns about it:
1. The JS handling the thumbnails is not thought out for responsive. It was built before that was a thing, so I'm not sure it will ever support this paradigm without users finding bugs.
2. The CSS itself using !important - thanks for the explanation @Neograph734, makes sense with how the module is right now.

I attach the patch with the code styling issues fixed.

So I think we need to make deeper changes to the module in order to accommodate for this, in order to expand the styles to allow for:

• Adding your own template.
• Adding your own JS.

Unfortunately I have no time to take care of this, nor to support the backwards compatibility issues that would arise, since this module is being used on production for some time on a lot of sites. I'm struggling to find the time to do a proper port of this to D8 as it is...

So unless someone is willing to put in the time to support the 7.x branch I am not going to commit this, since I would not have the time to support it.

Thanks for the extended reply @Manuel Garcia,

I understand your critique. Unfortunately I won't be able to look into this anytime soon either. The backwards compatibility could be solved with a 7.x-2.x and maintaining the 1.x branch too (the core of the module could remain the same for both versions). But still it would be more work.

As for a Drupal 8 version. You might want to try to ship with with a responsive default theme instead (no direct need to change the template system, just CSS and Javascript). Drupal 7 is 6.5 years old and the web has changed. Not being responsive is almost a no-go nowadays with all the mobile devices, etc. After all Drupal 8 core is responsive as well. (But that is just my opinion, use it as you like ;) )

I was unable to get the above patches to work. However I did come up with a simple CSS solution that displays Gallery Formatter on call phones and desktops by changing the size of the slides and thumbnails based on screen size. While this does not dynamically resize the images it does display correctly on my cell phone and desktop and its easy. Using the original module without the above patches Simply add the following code to one of your style sheets.

/* GalleryFormater default size for cell phones */
.gallery-slides, .gallery-slides img {width:300px !important; height:187px !important;}
.gallery-thumbs {width:300px !important;}

/* GalleryFormater Desktop size */
@media only screen and (min-width: 33.25em) {
.gallery-slides, .gallery-slides img {width:500px !important; height:312px !important;}
.gallery-thumbs {width:500px !important;}
}

Thanks aaronus - css solution is a good workaround

Not sure if it is still relevant, but I had the same issue with slide images not been responsive. Using Bootstrap theme, my images have img-responsive class. This module besides applying the dimensions from the image styles, it adds a container (gallery-images) with the same dimensions.

I was able to get rid of the fix dimension using jquery and applying an auto width to the container.
$('.gallery-slides').css('width', 'auto');

@yaach, I'm having the same problem with bootstrap, can you tell me exactly how to change it as I'm just starting to learn drupal, thanks!

D7 reached its EOL back in January 2025, and there is no active release for D7 for this module anymore.
Development or support is not planned for D7. All D7-related issues are marked as outdated in a bunch.