WordPress repeating image input

Many custom WordPress themes will require some custom meta box where you can add a picture and, let’s say, its title and description. You may use a great number of plugins available, and most of them have a great amount of functionality. Which is not always good. I like simple code, which does no more and no less than what you need. Therefore, I’ll cover three simple ways to solve this problem.

The first method I propose to you is a straightforward single file plugin I found on stackoverflow, and improved. It will save the image id, so you can use wp_get_attachment_image with a custom image size, for example. You can also define on which post types and on which page templates the meta box will appear.

Here’s the code, just add it to your plugins directory:

<?php
/**
 * Plugin Name: Repeatable image fields
 * Plugin URI:   http://stackoverflow.com/a/36456957/4800442
 * Description: Repeatable image fields in a meta box. Handles edits for slideshows.
 * Author:      brasofilo
 * License:     GPLv3
 */

add_action( 'admin_init', 'add_post_gallery_so_14445904' );
add_action( 'add_meta_boxes_page', 'add_page_gallery_so_14445904' );
add_action( 'admin_head-post.php', 'print_scripts_so_14445904' );
add_action( 'admin_head-post-new.php', 'print_scripts_so_14445904' );
add_action( 'save_post', 'update_post_gallery_so_14445904', 10, 2 );

// Make it work only in selected templates
$rep_fields_templates = array('page-aboutus.php');
$rep_fields_posts 	  = array('service',
							  'style',
							  'brand');

/**
 * Add custom Meta Box
 */

// Add meta box to custom posts 
function add_post_gallery_so_14445904() 
{
	global $rep_fields_posts;		
	add_meta_box(
		'post_gallery',
		'Slideshow Gallery',
		'post_gallery_options_so_14445904',
		$rep_fields_posts,
		'normal',
		'core'
	);
}

// Add meta box to custom page templates
function add_page_gallery_so_14445904() 
{		
	global $post, $rep_fields_templates;
	if ( in_array( get_post_meta( $post->ID, '_wp_page_template', true ), $rep_fields_templates ) ) {
		add_meta_box(
			'post_gallery',
			'Slideshow Gallery',
			'post_gallery_options_so_14445904',
			'page',
			'normal',
			'core'
		);
	}
}

/**
 * Print the Meta Box content
 */
function post_gallery_options_so_14445904() 
{
    global $post;
    $gallery_data = get_post_meta( $post->ID, 'gallery_data', true );

    // Use nonce for verification
    wp_nonce_field( plugin_basename( __FILE__ ), 'noncename_so_14445904' );
	?>

    <div id="dynamic_form">
    
        <div id="field_wrap">
        <?php 
        if ( isset( $gallery_data['image_url'] ) ) 
        {
            for( $i = 0; $i < count( $gallery_data['image_url'] ); $i++ ) 
            {
            ?>
    
            <div class="field_row">
    
              <div class="field_left">
                <div class="form_field">
                  <!--<label>Image URL</label>-->
                  <input type="hidden"
                         class="meta_image_url"
                         name="gallery[image_url][]"
                         value="<?php esc_html_e( $gallery_data['image_url'][$i] ); ?>"
                  />
                  <input type="hidden"
                         class="meta_image_id"
                         name="gallery[image_id][]"
                         value="<?php esc_html_e( $gallery_data['image_id'][$i] ); ?>"
                  />
                </div>
                <div class="form_field" style="margin-bottom: 20px">
                  <label>Description</label>
                  <textarea
                         class="meta_image_desc"
                         name="gallery[image_desc][]"
                         rows="3"
                         style="width: 100%"><?php esc_html_e( $gallery_data['image_desc'][$i] ); ?></textarea>
                </div>
                <input class="button" type="button" value="Choose File" onclick="add_image(this)" />&nbsp;&nbsp;&nbsp;
                <input class="button" type="button" value="Remove" onclick="remove_field(this)" />
              </div>
    
              <div class="field_right image_wrap">
                <img src="<?php esc_html_e( $gallery_data['image_url'][$i] ); ?>" />
              </div>
              <div class="clear" /></div> 
            </div>
            <?php
            } // endif
        } // endforeach
        ?>
        </div>
    
        <div style="display:none" id="master-row">
        <div class="field_row">
            <div class="field_left">
                <div class="form_field">
                    <!--<label>Image URL</label>-->
                    <input class="meta_image_url" value=""  name="gallery[image_url][]" />
                    <input class="meta_image_id" value=""  name="gallery[image_id][]" />
                </div>
                <div class="form_field" style="margin-bottom: 20px">
                    <label>Description</label>
                    <textarea class="meta_image_desc" name="gallery[image_desc][]" rows="3" style="width: 100%"></textarea>
                </div>
                <input type="button" class="button" value="Choose Image" onclick="add_image(this)" />&nbsp;&nbsp;&nbsp;
                <input class="button" type="button" value="Remove" onclick="remove_field(this)" />
            </div>
            <div class="field_right image_wrap">
            </div>
            <div class="clear"></div>
        </div>
        </div>
    	
        <div id="add_field_row">
          <input class="button" type="button" value="Add Image" onclick="add_field_row();" />
        </div>
        <?php if ( 'trend' == get_post_type( $post->ID ) ) { ?>
		<p style="color: #a00;">Make sure the number if images you add is a <b>multiple of 5</b>.</p>
		<?php } ?>
    </div>
  	<?php
}

/**
 * Print styles and scripts
 */
function print_scripts_so_14445904()
{
    // Check for correct post_type
    global $post, $rep_fields_templates, $rep_fields_posts;
	if ( !in_array( get_post_meta( $post->ID, '_wp_page_template', true ), $rep_fields_templates ) && 
		 !in_array( get_post_type( $post->ID)							, $rep_fields_posts ) )
		return;
    ?>  
    <style type="text/css">
      .field_left {
        float:left;
		width: 75%;
		padding-right: 20px;
		box-sizing:border-box;	
      }
      .field_right {
        float:left;
        width: 25%;
      }
	  .image_wrap img {
		  max-width: 100%;
	  }
      #dynamic_form input[type=text] {
        width:100%;
      }
      #dynamic_form .field_row {
        border:1px solid #cecece;
        margin-bottom:10px;
        padding:10px;
      }
      #dynamic_form label {
        display: block;
		margin-bottom: 5px;
      }
    </style>

    <script type="text/javascript">
		function add_image(obj) {
	
			var parent=jQuery(obj).parent().parent('div.field_row');
			var inputField = jQuery(parent).find("input.meta_image_url");
			var inputFieldID = jQuery(parent).find("input.meta_image_id");
			var fileFrame = wp.media.frames.file_frame = wp.media({
				multiple: false
			});
			fileFrame.on('select', function() {
				var selection = fileFrame.state().get('selection').first().toJSON();
				inputField.val(selection.url);
				inputFieldID.val(selection.id);
				jQuery(parent)
				.find("div.image_wrap")
				.html('<img src="'+selection.url+'" />');
			});
			fileFrame.open();
		//});
		};
	
		function remove_field(obj) {
			var parent=jQuery(obj).parent().parent();
			parent.remove();
		}
	
		function add_field_row() {
			var row = jQuery('#master-row').html();
			jQuery(row).appendTo('#field_wrap');
		}
	</script>
    <?php
}

/**
 * Save post action, process fields
 */
function update_post_gallery_so_14445904( $post_id, $post_object ) 
{
    // Doing revision, exit earlier **can be removed**
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )  
        return;

    // Doing revision, exit earlier
    if ( 'revision' == $post_object->post_type )
        return;

    // Verify authenticity
    if ( !wp_verify_nonce( $_POST['noncename_so_14445904'], plugin_basename( __FILE__ ) ) )
        return;

    global $rep_fields_templates, $rep_fields_posts;
	if ( !in_array( get_post_meta( $post_id, '_wp_page_template', true ), $rep_fields_templates ) && 
		 !in_array( get_post_type( $post_id)							, $rep_fields_posts ) ) 
		return;

    if ( $_POST['gallery'] ) 
    {
        // Build array for saving post meta
        $gallery_data = array();
        for ($i = 0; $i < count( $_POST['gallery']['image_url'] ); $i++ ) 
        {
            if ( '' != $_POST['gallery']['image_url'][ $i ] ) 
            {
                $gallery_data['image_url'][]  = $_POST['gallery']['image_url'][ $i ];
				$gallery_data['image_id'][]  = $_POST['gallery']['image_id'][ $i ];
                $gallery_data['image_desc'][] = $_POST['gallery']['image_desc'][ $i ];
            }
        }

        if ( $gallery_data ) 
            update_post_meta( $post_id, 'gallery_data', $gallery_data );
        else 
            delete_post_meta( $post_id, 'gallery_data' );
    } 
    // Nothing received, all fields are empty, delete option
    else 
    {
        delete_post_meta( $post_id, 'gallery_data' );
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

<?php

/**

* Plugin Name: Repeatable image fields

* Plugin URI: http://stackoverflow.com/a/36456957/4800442

* Description: Repeatable image fields in a meta box. Handles edits for slideshows.

* Author: brasofilo

* License: GPLv3

add_action( 'admin_init', 'add_post_gallery_so_14445904' );

add_action( 'add_meta_boxes_page', 'add_page_gallery_so_14445904' );

add_action( 'admin_head-post.php', 'print_scripts_so_14445904' );

add_action( 'admin_head-post-new.php', 'print_scripts_so_14445904' );

add_action( 'save_post', 'update_post_gallery_so_14445904', 10, 2 );

// Make it work only in selected templates

$rep_fields_templates = array('page-aboutus.php');

$rep_fields_posts = array('service',

'style',

'brand');

/**

* Add custom Meta Box

// Add meta box to custom posts

function add_post_gallery_so_14445904()

{

global $rep_fields_posts;

add_meta_box(

'post_gallery',

'Slideshow Gallery',

'post_gallery_options_so_14445904',

$rep_fields_posts,

'normal',

'core'

);

}

// Add meta box to custom page templates

function add_page_gallery_so_14445904()

{

global $post, $rep_fields_templates;

if ( in_array( get_post_meta( $post->ID, '_wp_page_template', true ), $rep_fields_templates ) ) {

add_meta_box(

'post_gallery',

'Slideshow Gallery',

'post_gallery_options_so_14445904',

'page',

'normal',

'core'

);

}

/**

* Print the Meta Box content

function post_gallery_options_so_14445904()

{

global $post;

$gallery_data = get_post_meta( $post->ID, 'gallery_data', true );

// Use nonce for verification

wp_nonce_field( plugin_basename( __FILE__ ), 'noncename_so_14445904' );

<?php

if ( isset( $gallery_data['image_url'] ) )

{

for( $i = 0; $i < count( $gallery_data['image_url'] ); $i++ )

{

<input type="hidden"

class="meta_image_url"

name="gallery[image_url][]"

value="<?php esc_html_e( $gallery_data['image_url'][$i] ); ?>"

<input type="hidden"

class="meta_image_id"

name="gallery[image_id][]"

value="<?php esc_html_e( $gallery_data['image_id'][$i] ); ?>"

</div>

<label>Description</label>

<textarea

class="meta_image_desc"

name="gallery[image_desc][]"

rows="3"

style="width: 100%"><?php esc_html_e( $gallery_data['image_desc'][$i] ); ?></textarea>

</div>

</div>

</div>

</div>

<?php

} // endif

} // endforeach

</div>

</div>

<label>Description</label>

</div>

</div>

</div>

</div>

</div>

<?php if ( 'trend' == get_post_type( $post->ID ) ) { ?>

<p style="color: #a00;">Make sure the number if images you add is a <b>multiple of 5</b>.</p>

<?php } ?>

</div>

<?php

}

/**

* Print styles and scripts

function print_scripts_so_14445904()

{

// Check for correct post_type

global $post, $rep_fields_templates, $rep_fields_posts;

if ( !in_array( get_post_meta( $post->ID, '_wp_page_template', true ), $rep_fields_templates ) &&

!in_array( get_post_type( $post->ID) , $rep_fields_posts ) )

return;

.field_left {

float:left;

width: 75%;

padding-right: 20px;

box-sizing:border-box;

}

.field_right {

float:left;

width: 25%;

}

.image_wrap img {

max-width: 100%;

}

#dynamic_form input[type=text] {

width:100%;

}

#dynamic_form .field_row {

border:1px solid #cecece;

margin-bottom:10px;

padding:10px;

}

#dynamic_form label {

display: block;

margin-bottom: 5px;

}

</style>

function add_image(obj) {

var parent=jQuery(obj).parent().parent('div.field_row');

var inputField = jQuery(parent).find("input.meta_image_url");

var inputFieldID = jQuery(parent).find("input.meta_image_id");

var fileFrame = wp.media.frames.file_frame = wp.media({

multiple: false

});

fileFrame.on('select', function() {

var selection = fileFrame.state().get('selection').first().toJSON();

inputField.val(selection.url);

inputFieldID.val(selection.id);

jQuery(parent)

.find("div.image_wrap")

.html('<img src="'+selection.url+'" />');

});

fileFrame.open();

//});

};

function remove_field(obj) {

var parent=jQuery(obj).parent().parent();

parent.remove();

}

function add_field_row() {

var row = jQuery('#master-row').html();

jQuery(row).appendTo('#field_wrap');

}

</script>

<?php

}

/**

* Save post action, process fields

function update_post_gallery_so_14445904( $post_id, $post_object )

{

// Doing revision, exit earlier **can be removed**

if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )

return;

// Doing revision, exit earlier

if ( 'revision' == $post_object->post_type )

return;

// Verify authenticity

if ( !wp_verify_nonce( $_POST['noncename_so_14445904'], plugin_basename( __FILE__ ) ) )

return;

global $rep_fields_templates, $rep_fields_posts;

if ( !in_array( get_post_meta( $post_id, '_wp_page_template', true ), $rep_fields_templates ) &&

!in_array( get_post_type( $post_id) , $rep_fields_posts ) )

return;

if ( $_POST['gallery'] )

{

// Build array for saving post meta

$gallery_data = array();

for ($i = 0; $i < count( $_POST['gallery']['image_url'] ); $i++ )

{

if ( '' != $_POST['gallery']['image_url'][ $i ] )

{

$gallery_data['image_url'][] = $_POST['gallery']['image_url'][ $i ];

$gallery_data['image_id'][] = $_POST['gallery']['image_id'][ $i ];

$gallery_data['image_desc'][] = $_POST['gallery']['image_desc'][ $i ];

}

if ( $gallery_data )

update_post_meta( $post_id, 'gallery_data', $gallery_data );

else

delete_post_meta( $post_id, 'gallery_data' );

}

// Nothing received, all fields are empty, delete option

else

{

delete_post_meta( $post_id, 'gallery_data' );

}

You have full control of how the images are displayed in your theme. This is another thing I really like, as most WordPress gallery plugins need a lot of overwriting. Here’s an example of how easy you can output the images and their description in your theme:

<?php 
if ( '' != get_post_meta( get_the_ID(), 'gallery_data', true ) ) { $gallery = get_post_meta( get_the_ID(), 'gallery_data', true ); }

if ( isset( $gallery['image_id'] ) ) :

    for( $i = 0; $i < count( $gallery['image_id'] ); $i++ ) { 
        if ( '' != $gallery['image_id'][$i] ) {
            echo wp_get_attachment_image( $gallery['image_id'][$i], 'gallery_large' );
            if ( isset($gallery['image_desc'][$i]) ) echo $gallery['image_desc'][$i];
        }   
    }

endif; 
?>

<?php

if ( '' != get_post_meta( get_the_ID(), 'gallery_data', true ) ) { $gallery = get_post_meta( get_the_ID(), 'gallery_data', true ); }

if ( isset( $gallery['image_id'] ) ) :

for( $i = 0; $i < count( $gallery['image_id'] ); $i++ ) {

if ( '' != $gallery['image_id'][$i] ) {

echo wp_get_attachment_image( $gallery['image_id'][$i], 'gallery_large' );

if ( isset($gallery['image_desc'][$i]) ) echo $gallery['image_desc'][$i];

}

endif;

Add your custom HTML and CSS and you’re set.

In the next post, I’ll continue with an even simpler method to add a few custom image boxes.

Ethernaly says:

October 6, 2019 at 8:28 pm

Is there a way to add 2 images at same time?
Wordpress Multiple Image Inputs | Royalsoft - Blog says:

April 12, 2019 at 10:13 am

[…] a previous post, I was showing a way to add repeating image inputs to a WordPress post or page. Now let’s do something more […]
WordPress Multiple Image Inputs | Royalsoft – Blog says:

May 15, 2017 at 12:54 pm

[…] a previous post I was showing a way to add repeating image inputs to a wordpress post or page. Now let’s to something more […]

Da un share daca ti-a placut articolul

Vali Munteanu

Articole similare

Top 25 pluginuri WordPress pentru magazinul tău online

Colaborarea cu o agenție de web design | Ce trebuie să știi?

Cum monitorizezi traficul pe site? Află de unde vin clienții

WordPress repeating image input

Da un share daca ti-a placut articolul

Vali Munteanu

Aboneaza-te la newsletter

Abonat!

Articole similare

Top 25 pluginuri WordPress pentru magazinul tău online

Colaborarea cu o agenție de web design | Ce trebuie să știi?

Cum monitorizezi traficul pe site? Află de unde vin clienții

Aboneaza-te laNewsletter-ul Nostru

Abonat!