Shortcode parameters

parameter possible values usage
type
  • rgg (Default) – Use the Responsive Gallery Grid
  • native – Use the native WordPress gallery
[gallery type=”native” ids=”1,2,3″]
class An additional CSS class you would like to add to the gallery container. [gallery class=”my-custom-class” ids=”1,2,3″]
rel
    The rel attribute you would like to add to all of the anchor tags in the gallery. Useful in combination with some light boxes to group images.
    Default value: “rgg”
[gallery rel=”my-group” ids=”1,2,3″]
image_size Deprecated as of version 1.3.1. Use size instead
ids A comma seperated list of media IDs.
This is generated by WordPress if you create a Gallery with Add Media. If this parameter is omitted, the gallery will show all images that are attached to the current post.
[gallery ids=”1,2,3″]
margin A positive integer value indicating the number of pixels you want to appear between the images in the Responsive Gallery.
Default value: 2
[gallery margin=”10″ ids=”1,2,3″]
scale A positive decimal value indicating the factor by which the image-size is multiplied on mouse over.
Default value: 1.1
[gallery scale=”1.25″ ids=”1,2,3″]
maxrowheight A positive integer value indicating the maximum height, in pixels, of each row in the Responsive Gallery Grid.
Default value: 200
[gallery maxrowheight=”150″ ids=”1,2,3″]
intime A positive integer value indicating the time, in milliseconds, it will take for the mouse over animation to complete.
Default value: 100
[gallery intime=”200″ ids=”1,2,3″]
outtime A positive integer value indicating the time, in milliseconds, it will take for the mouse out animation to complete.
Default value: 100
[gallery outtime=”200″ ids=”1,2,3″]
captions
  • title (Default) – Use the captions as a title attribute on the gallery hyperlinks
  • off – Don’t display captions
[gallery captions=”off” ids=”1,2,3″]
New since version 1.3.1
parameter possible values usage
orderby
  • menu_order (Default) – Use the order you chose manually
  • ID Order by media ID
  • title – Order by title
  • date – Order by the date and time the image was uploaded
  • modified – Order by the date and time the image was last modified
  • rand – Random order
[gallery orderby=”rand” ids=”1,2,3″]
order
  • ASC (Default) – Order the images ascending
  • DESC Order by ID – Order the images descending (reverse order)
[gallery orderby=”DESC” ids=”1,2,3″]
id A valid Post ID. id will only be used if the ids parameter is omitted.
Fills the gallery with all images attached to the post with the provided ID.
Default value is the ID of the post in which the gallery is inserted.
[gallery id=”15″]
size
    The size of the images to load as the tiles of the grid.

    • thumbnail – Use the WordPress generated thumbnail images as image sources.
    • medium (Default) – Use the WordPress generated medium images as image sources.
    • large – Use the WordPress generated large images as image sources.
    • full – Use the original images as image sources.
    • Any other image size, previously defined by add_image_size()
[gallery size=”thumbnail” ids=”1,2,3″]
include A comma seperated list of media IDs of additional images to include in the gallery. [gallery include=”4,5″ ids=”1,2,3″]
exclude A comma seperated list of media IDs of images to exclude from the gallery. [gallery exclude=”4,5″ ids=”1,2,3,4,5″]

89 thoughts on “Shortcode parameters

  1. YvesD

    Have a documentation (like PDF) of all the shortcodes with examples or can I open all the sliders of that pages?

    Reply
    1. Jules Post author

      good idea. i will make a pdf and also modify this page to a table layout tomorrow.

      ::EDIT::

      Done. The PDF will be for another time because I’m still adding new parameters. So a fixed document right now would just make things confusing later on.

      Reply
  2. Oksana

    Hey, Jules!

    Thank you for all your work! I sent an issue on the WordPress forum. Not sure you had time to see it yet. Anyways, I wanted to ask you, if it is in any way possible to link not to the image or attachment page, but to a custom page (let’s say using the gallery custom links plugin). Its author was kind enough to provide his suggestions (adding $output = apply_filters('post_gallery', '', $attr);
    if ( $output != '' )
    return $output;

    befor ethe gallery shortcode in the gallerygrid.php. But while it does link to the custom link, as I need, it does not re-direct it there. It starts opening it in the box. I’d really appreciate your suggestions!

    Thank you :)
    Oksana

    Reply
  3. Pingback: Responsive Gallery Grid wordpress premium plugins | wordpress plugins

  4. Sue

    Hi! Great plugin in, however when I have it enabled, my columns=”4″ is being completely ignored :(
    Any suggestions?

    Reply
    1. Jules Post author

      Yes, the plugin doesn’t work that way. If you would always want 4 columns it kind of looses the the point of the tiled-layout. You can tweak the image sizes by using the maxrowheight parameter.

      I might miss something though, what exactly would you expect to happen if you set columns? I might implement it later, if there’s a good use-case for it.

      Reply
  5. Sue

    Ah yes, now that you mention it, I suppose it would lose the point…My poorly thought out question was based on my need to have the default landing page gallery have 4 columns on the PC. Yet, I decided to use this plug-in due to its wonderful responsiveness for viewing my site on smaller screens and different resolutions. The maxrowheight parameter worked perfectly thank you!!

    Reply
  6. ysh

    Hi,
    When I activate this plugin, my facebook like window plugin starts going awry, errors appear on the page. Deactivating brings back the house in order again. Any idea?

    Reply
    1. Jules Post author

      i just released an update minutes ago. There might be something wrong.. Could you send me a link to a page with the the problem?

      Reply
  7. dolores

    Really nice plugin!
    One question though, can it somehow open an external link on click, instead of a full size image?

    Reply
      1. spizzy

        can you give me the code to make this work? i want my galleries to stay the same but want the grid to not link to the image at all. is there a way to prevent a link totally?

        Reply
        1. Jules Post author

          You could add some jquery. Try to add something like this right before </head> in your theme’s header.php file:
          jQuery(document).ready(function(){ jQuery('.rgg_imagegrid a').removeAttr('href') }));

          Reply
    1. Jules Post author

      Not yet, I’m still thinking about the best way to do this without getting ugly results with long descriptions. It will be possible sometime soon though. Keep an eye out for updates.

      Reply
  8. Livia

    Hi, I am trying to use the “full” versions of the photos but it is not tiling the images in their original sizes – it is displaying them as thumbnails. This is the code I am using: [gallery image_size="full" ids"1521,3344,5568,221,3714,3323,236,152,1133"]. Can you spot what I’m doing wrong? Thanks!

    Reply
    1. Jules Post author

      Hi, looks correct. You are only missing an equals-sign after ids. Changing the image size to full will not have a visible effect unless you are also increasing the maximum row height of the grid. Try this code instead: [gallery image_size="full" maxrowheight="500" ids="1521,3344,5568,221,3714,3323,236,152,1133"]

      Reply
      1. Livia

        Thank you Jules, this tip was helpful. Unfortunately the images still don’t look like they fit into a puzzle for me, as they do on the demo page. Also, is there a way to select which images I would like to appear larger and which ones I would like to appear smaller? This is the website I am working on, if you could let me know your thoughts I would be very grateful! http://livingmaxwell.com/shop-new

        Thanks!

        Reply
        1. Jules Post author

          Hi Livia, the problem is the original sizes of your images are almost all squares.. Your image of the wildbar for example has a lot of additional whitespace on top and below the actual image. http://livingmaxwell.wpengine.netdna-cdn.com/wp-content/uploads/2009/11/wildbar.jpg. If possible, you should crop all these images in photoshop or another image editor to get rid of the unnecessary whitespace, and upload them again. The results will look much more puzzly if your image aspect ratios differ a lot. Hope this helps. Don’t hesitate to ask for further assistance.

          Reply
  9. Eduardo Suastegui

    Jules – A couple of suggestions
    1) Add an option for the separation width (space between images), e.g., image_spacing. I would like it to be thinner when I display small images, but right now I have no way to customize that. Along these lines, you might consider that by default (i.e., when the user doesn’t specify it), the image spacing should be proportional to the image display size. Right now it seems to always be the same.
    2) When loading many images for the first time (186 in one of my pages: http://imagesbyeduardo.com/main/event-los-angeles/saint-jeanne-de-lestonnac-class-2013-graduation/), the images show up large first, and don’t resize until the browser has loaded all images. I recommend developing some smarter code that resizes each row (at least preliminarily) as soon as you have enough images to render/display that row. That will be more visually pleasing. You can always “re-snap” and adjust all sizes once the full set of images is available.

    BTW, as a work-around for #2, I split my gallery short-code into 2, one for the first 6 images, and another for the remaining 180. Not ideal because now I have a larger gap between the 1st 6 images and the remainder 180.

    Reply
    1. Jules Post author

      1. Are you looking for margin?
      2. I agree, I should be able to get the image-sizes from wordpress before the images are loaded. I initially wanted to code the plugin as a 100% jQuery plugin, so I haven’t thought of that yet. Thanks for the tip.

      Reply
  10. kavitha

    can you please tell me how to display images as a slideshow when clikced on an image and not to be displayed on a seperate page.i want the images to be displayed on the same page like normal galleries…

    Reply
  11. joseph

    How can I get this to work with to be used in a custom page template. I just cant get it to work like I have with other plugins.

    Any pointers would be great.

    All I want to do is make a hidden post with the gallery inside of it. then call that post/gallery onto my custom page using the shortcode. Its important that I am able to put the gallery into its own ‘div’ so I can place it where I need it with CSS.

    THANK YOU!

    Reply
      1. Jules Post author

        So it’s solved then? I don’t think I understand completely… Anyway, you should be able to put the shortcode inside a div without any problems…
        If it’s still not solved could you email me a link to your website and some login info so I can have a look?

        Reply
    1. Jules Post author

      finally:) I thought nobody was going to ask about the drop shadow. The simple answer is you can’t.
      I will remove it in my next update, so people can add it with CSS themselves if they want.

      Reply
  12. B Michael

    I would first like to mention that I love your plugin and appreciate your work. I was wondering if you could give some pointers on integrating this bootstrap gallery ( http://blueimp.github.io/Bootstrap-Image-Gallery/ ) with your plugin. I was able to get all of the correct markup, but for some reason it would not work. The only functionality I tried integrating was the modal & prev/next buttons. Your insight would be greatly appreciated. I would even donate a few beers (or $) your way just because :)

    Thanks again!

    Reply
    1. Jules Post author

      I think I can, but that’s a pretty specific request, so I don’t think I will implement it anytime soon. I think it would make more sense if the author of the plugin you mentioned would support generating galleries by media-category. Then you could just update the generated gallery with any RGG parameters you like.

      Reply
  13. David

    I’m running RGG 1.3.1 in WP 3.5.1 using the following shortcode and parameters:

    [gallery size="full" type="rgg" maxrowheight="200" ids="4086,4088"]

    Even though I am not including a parameter to specify a number of columns, the WordPress gallery defaults to three columns. this prevents me from achieving the variable image width “puzzle” effect shown in your demos.

    Any advice?

    Thanks,

    David

    Reply
    1. Jules Post author

      Could you drop me a link? I suspect you images all have the same dimensions. In that case the grid will of course look like a simple fixed column grid. Try including both landscape and portret oriented pictures to your gallery if you want the puzzle look.

      Reply
  14. Daniel

    I’m working my brains out. Is there something I’m missing or the removing of the dropshadow is done with .custom-class img:hover {box-shadow: none;} ?

    Reply
  15. Angela

    I saw someone above asked these questions, but I didn’t totally understand the answers…

    To change the margin in between photos, is the only way to do that by adding a “margin” shortcode into the actual code of the gallery or is there a way to add this into css so that the margin is the same default width for all galleries.

    Also, is there a way to change the rounded corners when you roll over the images?

    Thanks!

    Reply
    1. Jules Post author

      For the moment it’s not encouraged to add margins to the images with css, as margins are not taken into account when calculating the image sizes. If you add margins to your images this may break the grid from displaying correctly. I will however add the possibility to define default settings (including margins) in the WordPress admin panel, which can be overwritten with the shortcode. Stay tuned for updates.

      Rounded corners are defined in my theme’s CSS, They aren’t a property of RGG, so just go ahead and remove them from your stylesheets if you don’t want them.

      Reply
      1. Urs

        Hi Jules
        Great Plugin! Almost perfect for me! Almost, because i’d like to set some default settings for the plugin parameters for the whole wp site, instead of define them every time in the shortcode. Do you have some news concerning the admin panel? At the moment, the only chance i see to define the parameters only once, is to write a php filter for the wp gallery short code to add these parameters (like height of row, image size, margin, …). Or did i missed something?
        Thanks & regards,
        Urs

        Reply
        1. Urs

          great thanks!

          so far, i do it this way – note: it’s very quick & dirty ;-)

          /**
          *
          * responsive grid gallery (rgg)
          *
          * adding some default shortcode parameters, so that
          * they haven’t to be written in posts shortcode everytime.
          * this modifier will be used, until it’s possible to set
          * defaults in the admin panel of rgg.
          *
          */

          add_shortcode( ‘gallery’, ‘rggmod_gallery_shortcode’ );

          function rggmod_gallery_shortcode( $atts )
          {
          $shortcode_atts_arr = array(
          // site defaults parameters goes here …
          ‘size’ => ‘thumbnail’,
          ‘margin’ => ’10′,
          ‘maxrowheight’ => ’80′
          // … maybe some more …
          );
          return gallery_shortcode( $shortcode_atts_arr );
          }

          Reply
  16. Ovidiu

    Just curios if the css to make the pop-out (magnified) image slightly transparent comes from your plugin?
    I’d like to have the image that pops-out when I hover over it solid, not transparent.

    Reply
    1. Jules Post author

      Nope. The only css that get’s added by RGG is the drop shadow. The rest must be defined in your theme’s stylesheet. Drop me a link if you would like me to have a look.

      Reply
      1. Ovidiu

        Thanks, you can take a look here: http://www.exclusive-jumping.co.za/gallery/galerie-1-the-renovations/

        And here is a screen shot: http://screencast.com/t/PgwgEr60xc
        Unfortunately the opacity is found inline so I’m unsure which plugin added it. I use Fancybox plugin and it has opacity settings but they default to 0.7 and the one found inline is 0.85 so its not FancyBox…

        Any help/idea is appreciated otherwise I’ll have to live with the way it is right now :-)

        Reply
        1. Jules Post author

          I get “http://www.exclusive-jumping.co.za is coming soon ”

          You could alway try to add this rule to your CSS file:
          .bbg_img { opacity:1 !important; filter:alpha(opacity=100) !important; }

          Reply
          1. Ovidiu

            Really sorry about that, totally forgot its still not publicly accessible.

            I tweaked it a bit but still not there:

            .bbg_img:hover {
            opacity:0.90 !important; filter:alpha(opacity=90) !important;
            }
            .bbg_img {
            opacity:0.75 !important; filter:alpha(opacity=75) !important;
            }

            I basically thought I’d go with opacity of 75 and less say 90 of the overlay but the :hover doesn’t seem to do the trick yet basically the 90 is ignored, maybe its not :hover but something else to address the “hover-effect”?

            =>http://screencast.com/t/cfSBw6Y2Haw

          2. Jules Post author

            Yeah, well it’s probably some javascript in your theme or a plugin that is causing this. I would suggest you to leave it as it is if you don’t want to spend too much time figuring out what is happening. You could disable the zooming effect with the scale parameter. Just set scale=1.

  17. Eugen Andres

    Just a hint:

    if you want to use prettyPhoto with this Plugins and you want the previus and next buttons, simply add this code to your shortcode: rel=”prettyphoto[galleryname]”

    By the way: this gallery plugin is incredible!! ;-)

    Reply
    1. Jules Post author

      RGG doesn’t support nice captions for the moment. I will be working on this soon, and make sure the captions support basic HTML tags like the anchor tag.

      Reply
    1. Jules Post author

      Seems like you have disabled the plugin for now. Also, it looks like your theme is overriding the gallery or something. Please let me know if you want me to check again.

      Reply
    1. Jules Post author

      I’d love to help you on this, but this seems like a standard WordpPess problem if you ask me. I’m guessing it doesn’t work with the native WordPress gallery either? Maybe file a bug report at WordPress?

      Reply
  18. Dave Herries

    I have not disabled the Responsive Gallery Grid. However, I have figured out that it really prefers images that are square. If they are wide and not very high the system does not like to spread them out when they are displayed on a smart phone. Also, I have noticed that when you look at the current site on the smartphone in landscape mode it only puts 3 images on one line and put the 4th on the second line. Any suggestions?

    Reply
  19. Jay

    Hi, It is a super plugin. Only I have one thing that I want to edit but can not get to fix it. I want to take out the links under the pictures that link to the next gallery.
    How can I take those away? I am editting in a TwentyTwelve Child theme.

    Hope you can help me out!!

    Thank you in advance.

    Reply
    1. Jules Post author

      Links to previous and next galleries are not a default WordPress Gallery feature. This has nothing to do with the plugin so I’m afraid I can’t help you. Try contacting the theme author.

      Reply
  20. Laurens

    Hey Jules,

    Love the idea and the way i think it should look, but unfortunately i can only get it like this with gaps everywhere. What should basically happen i think is that images get the same height or interlock like a puzzle. However i cant get that to happen. Is this not what the option maxrowheight is supposed to do? Also the size parameter doesnt help either. Thumbnail size is the only way that all of the pictures are of the same height but then everything is square and not like i want it. Here is the shortcode i use:

    [gallery ids="399,398,397,338,331,329,326,327,324" maxrowheight="150" margin="10" scale="1.02" type="slideshow" orderby="rand"]

    and the page itself: http://www.shortsightedarchitecture.com/test-2/

    Thanks in advance!

    Reply
    1. Jules Post author

      could you please send me the theme you are using as a zip file and a list of all your installed plugins? Your theme (or a plugin) seems to override the wordpress gallery in a manner that doesn’t allow for other plugins to hook into it. I would like to investigate further if you could send me the theme files.

      Reply
  21. Shawn

    Hi Jules,
    I love this plugin. It works great on a friend site that I loaded it on but when I went to load it on my site it does not work right. The site is a Parallax Responsive site that I purchased. They are very little help so I was hoping you could take a look and maybe see what is going on.

    The gallery is the very last page at the bottom.

    The theme is this one. http://themeforest.net/item/the-road-parallax-responsive-wordpress-theme/3939553?WT.ac=portfolio_item&WT.seg_1=portfolio_item&WT.z_author=SakuraPixel

    Thanks,
    Shawn

    Reply
  22. Amy

    Hi – is there any way to change it so that when you click on a photo from the grid, it opens into a new window? Thanks!

    Reply
      1. Amy

        I don’t have any lightbox plugins installed… any other suggestions on how to make the pictures open in a new window?

        Also – does this plugin have a tendency to make sites run slow? Mine has slowed down tremendously and I’m trying to figure out why….

        Thanks! Amy

        Reply
    1. Jules Post author

      Nope, the plugin uses the native wordpress gallery. So all images have to be present in the media library. You can however add images to the media library by URL.

      Reply
  23. Urs

    Hi Jules
    i have a problem with my ‘self-made’ wp-theme. I use Isotope/Masonry in combination with infinite scroll. Everything with rgg works perfect as long i select the pages (previous posts and next posts) in the blog manually. But if the new pages (previous posts) are added to the masonry container as a callback to infinite scroll, the styling of the images is not complete.

    Example for html, rendered with manual change of the page (page 1 or page n, by selecting n times ‘previous posts’), or in a single page:

    And this is what i get in html, if the page is loaded thru infinite scroll (ajax) and isotope/masonry:

    In the second example, the complete styling for the rgg images is missing.

    I think i have to call a rgg function again as a callback to masonry, if there were more items added to the container. Or bind a rgg function to the masonry container.
    But which one? Do you have any idea?

    Thanks a lot and best regards
    Urs

    Reply
    1. Urs

      Sorry, here the two html examples, stripped out in the post before:

      Example for html, rendered with manual change of the page (page 1 or page n, by selecting n times ‘previous posts’), or in a single page:
      img class=”attachment-thumbnail bbg_img bbg_image” width=”85″ height=”85″ alt=”bewegt-04″ src=”http://weit-weiter-weg.ch/wp-content/uploads/2012/09/bewegt-04-89×89.jpg” style=”left: 219px; top: 0px; position: absolute; max-width: none; width: 62px; height: 63px; z-index: auto; box-shadow: none;”
      img class=”attachment-thumbnail bbg_placeholder” width=”85″ height=”85″ alt=”bewegt-04″ src=”http://weit-weiter-weg.ch/wp-content/uploads/2012/09/bewegt-04-89×89.jpg” style=”visibility: hidden; display: block; float: left; margin-bottom: 10px; margin-right: 0px; height: 63px; width: 62px; position: relative;”

      And this is what i get in html, if the page is loaded thru infinite scroll (ajax) and isotope/masonry:
      img class=”attachment-thumbnail” width=”85″ height=”85″ alt=”IMG_1104″ src=”http://weit-weiter-weg.ch/wp-content/uploads/2013/09/IMG_1104-89×89.jpg”

      Reply
  24. Ronny

    Hi Jules,
    just wanted to let you know: A-w-e-s-o-m-e plugin! I really love it; finally WP galleries look stunning.
    Thanks & again: Awesome work.

    Reply
    1. Jules Post author

      It’s kind of hard for the moment, but I’m rewriting the plugin to depend more on css animations and effects instead of setting them with JavaScript. This will allow to overwrite the styles more easily. Please keep an eye out for the next update and check out the release notes to learn how to customize the plugin to your needs.

      Reply
  25. Kaylynn

    Great plugin! I was wondering if you would ever provide an update that would let the gallery images be sorted by tags? Ie. Photography, Web Design, or other categories where the photos can be filtered? Just a thought

    Reply
  26. Selrond

    Hello!
    Your plugin is great, except of the fact, it somehow overwrites my plugin
    meaning that when clicked on image, it just opens up a new tab where it displays the image itself… So the functionality of Responsive Lightbox plugin is dead…
    Is it possible to repair it?
    Also, when I try to use [gallery size="thumbnail" ids="509,508,507,506,505,504,503,502,501,500"], it doesn’t change anything on my gallery, those small images stay the same – blurry ones… what am I doing wrong?
    Thanks!

    Reply
    1. Jules Post author

      RGG doesn’t include a lightbox. There are plenty of third party lightbox plugins that should work fine with RGG already. Give this one a shot: http://wordpress.org/plugins/jquery-colorbox/

      Your thumbnail size is set to a very small size. Try using `size=”medium”` or `size=”large”`, if this doesn’t change anything it means the images you uploaded in the first place are too small.

      Reply
  27. Jim

    Is there a way to make the grid populate in columns with fixed widths as opposed to rows with fixed heights? As in more like a pinterest type style?

    Reply
    1. Jules Post author

      Nope, there are plenty of masonry based galleries out there that work like this. I created this plugin just because I found none that had fixed row heights, which I believe makes more sense as people tend to read horizontally (rtl or ltr) first, and vertically (top to bottom) second.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA Image

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>