title: Customise the WordPress gallery html layout
body: <p>When creating an image gallery in WordPress using the default Media Uploader, WordPress wraps the images in a bunch of HTML markup. </p>
  
  <p>How can I overwrite this before it's generated so that I can output the desired markup and change the way the gallery layout is created?</p>
  
  <p>Currently, WordPress is generating the code like this:</p>
  
  <pre><code>&lt;div id="container"&gt;
     &lt;div src="&lt;?php bloginfo('template_directory'); ?&gt;/images/small.jpg"&gt;
     &lt;div src="&lt;?php bloginfo('template_directory'); ?&gt;/images/medium.jpg" data-media="(min-width: 400px)"&gt;&lt;/div&gt;
     &lt;div src="&lt;?php bloginfo('template_directory'); ?&gt;/images/large.jpg" data-media="(min-width: 950px)"&gt;&lt;/div&gt;
     &lt;div src="&lt;?php bloginfo('template_directory'); ?&gt;/images/extralarge.jpg" data-media="(min-width: 1200px)"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>