Announcement

Collapse
No announcement yet.

Making default wordpress gallery responsive?

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Making default wordpress gallery responsive?

    I need to add a number of images, to be shown as a grid, in different posts (and would like to do it responsive without using additional plugins. I have been using the default WP gallery but is not responsive. I would like the result would show a number of image columns (3 for example) on large devices and resize the images/reduce the number of columns on smaller devices.

    Is there any easy way of doing so?

    Thanks
    Last edited by rgval; 05-24-2016, 03:42 PM.

  • #2
    You could also have a look at the free version of Foo Gallery - it is responsive and has a number of nice features.

    Comment


    • #3
      I too recently used the WP Gallery and was surprised it was not responsive.

      However If all of your images are same size. You can write some custom CSS, to make it responsive.

      This will center all image in one row:

      #gallery-1 .gallery-item {
      float: none;
      width: auto;
      }

      Or this will set them in rows of two, with every other row having a single image.

      #gallery-1 .gallery-item {
      width: 50%;
      }

      Comment


      • #4
        Thanks SiGa and Sogwap

        I liked Foo Gallery but is not integrated into the default WP gallery. I was searching for a solution that doesn't involve a plugin external to the default gallery (can be free or paid). Any other suggestion...

        I will try the CCS solution as well and let you know
        Last edited by rgval; 04-03-2015, 02:28 PM.

        Comment


        • #5
          Somehow the CSS added to the dynamik css panel does not affect the content.
          I am using the last version of WP, 4.1.1

          I tried adding this code to functions to be able to style the gallery:
          //* Remove the default galley style.
          add_filter( 'use_default_gallery_style', '__return_false' );

          but even so I'm not sure where to place the css to make it work. It seems that the style in media.php is default and even adding !important does not work.

          Any advice please?

          Comment


          • rgval
            rgval commented
            Editing a comment
            It didn't work because a conflict with another plugin, the css works now but it is not easy to format as SiGa explains below

        • #6
          Also I have Content Views Pro active. It uses bootstrap and works perfectly, it would be great to be able to style the default gallery with this. Do you guys know of any simple way to do so?

          Comment


          • SiGa
            SiGa commented
            Editing a comment
            Third party plugin, not related to DWB.... you might want to ask this in their forum maybe?

          • rgval
            rgval commented
            Editing a comment
            Thanks SiGa. I meant that the plugin works great to show a grid of posts with wp featured images, but not sure if you can use it to make galleries of images as post content. I will ask them.

        • #7
          I am using Shareprints (http://freakplugins.com/shareprints/). Commercial plugin (aint cheap)

          It uses the regular Wordpress media library... beautifully responsive, mobile friendly, easy to use and edit right from within the post... not super customizable but super easy which suits me great.

          Comment


          • #8
            Not sure if you are aware what it means, regarding that task, that there is a selectable number of columns for each gallery and you need to write write media queries for each possible number of columns selectable to care for every possibility. Else the CSS will break the gallery if you decide to change from 3 to four columns later.
            Also: In the gallery code, there is a clearing br added after each pre-defined number of items per column - you´d have to handle that, too, to make it all work when the number of columns changes at a certain point (= the problem I can see right now when I look at your site). That´s quite an amount of code to write....
            So no, there is most likely no easy/simple way to do so except you´re able to find and copy some CSS from somebody who did that before.

            You can start with taking the CSS selectors for the default gallery here (and tweak the media queries from there on):
            http://theme.fm/2011/06/how-to-style...ss-gallery-43/

            To get a bootstrap version of default gallery I think you´d have to rewrite the output of it (via PHP) to get the HTML required, as the default gallery actually outputs tables (dl/dt). Don´t think this is worth all the effort, compared to a plugin. A plugin output is easily "portable" to any other theme, a re-written function and enqueued CSS files (or custom CSS) in your current theme is not. Something to consider maybe, too, else your gallery will break if ever you decide to change the theme.
            Last edited by SiGa; 04-05-2015, 09:18 PM.

            Comment


            • rgval
              rgval commented
              Editing a comment
              Completely agree... the main problem is the br after each pre-defined item per column. I will try Foo again and check Shareprints

          • #9
            I am using jQuery Colorbox and it is responsive on both default WordPress and NextGen galleries. You need to set the width, height and re-size settings in Colorbox.

            Comment


            • #10
              You could try removing the br with jQuery

              Code:
              <script>
              jQuery(function() {
                      jQuery( "div.gallery br" ).remove();
              });
              </script>

              Comment


              • #11
                Thanks all! that worked perfectly. I used the jq to remove the br and this CSS to format the gallery:

                Dynamik Custom > Main CSS

                .gallery {
                margin: auto -6px;
                padding: 6px 0px;
                line-height: 1;
                overflow-x: hidden;
                }

                .gallery .gallery-item {
                float: left;
                margin: 0px;
                text-align: center;
                padding: 6px;
                box-sizing: border-box;
                }

                .gallery-columns-3 .gallery-item {
                width: 33.333%;
                }



                Dynamik Design > Responsive > Tablet Portrait to Tablet Landscape Specific @media query (3rd)

                .gallery-columns-3 .gallery-item {
                width: 50%;
                }


                Dynamik Design > Responsive > Tablet Portrait Cascading @media query (4th)
                Dynamik Design > Responsive > Mobile Landscape to Tablet Portrait Specific @media query (5th)

                .gallery-columns-3 .gallery-item {
                width: 100%;
                }



                Hope this helps someone else

                Comment


                • #12
                  I know this is an old thread, so I'm hoping my post here gets seen!

                  I'm trying to implement the code above, and have a question - where would the jQuery code get inserted? Under the "js" tab in Dynamik > Custom? And if yes, do you include the <script> tags? I tried that and it isn't working but I'll keep plodding along. Still cannot believe the default WP gallery is not responsive.

                  Comment


                  • SiGa
                    SiGa commented
                    Editing a comment
                    JS goes to Dynamik Custom - JS or, if you work with a skin, Dynamik Design - Skins - Your Skin - JS button. Read the comments there carefully. In both cases, you don´t need script tags.

                  • HollyKnott
                    HollyKnott commented
                    Editing a comment
                    Thanks, Siga. I followed rgval's tips above from the 5-12-2015 post and it isn't working for me. Strange! I have a gallery with 3 columns, but on my phone it's still displaying with 3 columns, not one, as I expected to see.
                Working...
                X