Quite often when integrating a 3rd party HTML template into WordPress there is a need to be able to control some of WordPress’ default behaviour

The Gallery shortcode, that WordPress uses when you Add Media to a post, creates it’s own default HTML output but a lot of the time I want to be able to control that output

add_filter('post_gallery','customFormatGallery',10,2);

function customFormatGallery($string,$attr){

$output = "<div id=\"container\">";
$posts = get_posts(array('include' => $attr['ids'],'post_type' => 'attachment'));

foreach($posts as $imagePost){
$output .= "<div src='".wp_get_attachment_image_src($imagePost->ID, 'small')[0]."'>";
$output .= "<div src='".wp_get_attachment_image_src($imagePost->ID, 'medium')[0]."' data-media=\"(min-width: 400px)\">";
$output .= "<div src='".wp_get_attachment_image_src($imagePost->ID, 'large')[0]."' data-media=\"(min-width: 950px)\">";
$output .= "<div src='".wp_get_attachment_image_src($imagePost->ID, 'extralarge')[0]."' data-media=\"(min-width: 1200px)\">";
}

$output .= "</div>";

return $output;
}

https://stackoverflow.com/questions/14585538/customise-the-wordpress-gallery-html-layout