In this article, we are going to learn how to add multiple images in ACF repeater images fields.
Here are the following steps to add multiple images in ACF repeater images fields.
Step 1: Create an ACF image repeater field.
Step 2: Create HTML form.
<html>
<meta charset="utf-8">
<head>
<title>images upload</title>
<style type="text/css">
form {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 300px;
display: flex;
flex-wrap: wrap;
}
input {
width: 100%;
margin-bottom:15px;
padding: 10px;
}
input[type="submit"] {
padding: 5px;
}
</style>
</head>
<body>
<form action = "" method = "POST" enctype = "multipart/form-data">
<h1>How to add multiple images using acf from frontside in wordpress</h1>
<input type="" name="title">
<input type="" name="content">
<input type = "file" name = "files1[]" multiple="multiple"/>
<input type = "submit"/>
</form>
</body>
</html>
Step 3: Attach required files for images upload.
include '../wp-config.php';
require_once('../wp-load.php' );
include( ABSPATH . 'wp-admin/includes/image.php' );
require_once( ABSPATH . 'wp-admin/includes/media.php' ); Step 4: Add WordPress insert query for post.
$my_post = array(
'post_title' => $_POST['title'],
'post_content' => $_POST['content'],
'post_status' => 'draft'
);
$pos_id=wp_insert_post( $my_post );
Step 5: Here is a function for upload multiple images upload.
foreach($_FILES as $value){
for ($i=0; $i <count($value['name']); $i++) {
$errors= array();
$file_name = $value['name'][$i];
$file_size = $value['size'][$i];
$file_tmp = $value['tmp_name'][$i];
$file_type = $value['type'][$i];
$file_ext=strtolower(end(explode('.',$value['name'][$i])));
if(empty($errors)==true) {
$wordpress_upload_dir = wp_upload_dir();
$profilepicture = $wordpress_upload_dir['path'].'/';
move_uploaded_file($file_tmp, $profilepicture.$file_name);
}else{
print_r($errors);
}
$file_name_and_location = $profilepicture.$file_name;
$file_title_for_media_library = $value['name'][$i];
$fildename = $value['name'][$i];
$arr_file_type = wp_check_filetype(basename($fildename));
$uploaded_file_type = $arr_file_type['type'];
$attachment = array(
'post_mime_type' => $uploaded_file_type,
'post_title' => addslashes($file_title_for_media_library),
'post_content' => '',
'post_status' => 'inherit',
'post_parent' => 0,
'post_author' => get_current_user_id(),
);
wp_read_image_metadata( $file_name_and_location );
$attach_id = wp_insert_attachment( $attachment, $file_name_and_location,true,false);
$attach_data = wp_generate_attachment_metadata($attach_id,$file_name_and_location );
wp_update_attachment_metadata( $attach_id, $attach_data );
$images[]= array("image" => $attach_id);
}
} Step 6: Add ACF field’s update query and add array of attach id.
$field_key = "images_fildes"; update_field($field_key,$images,$pos_id);
Here is the full code.
<html>
<meta charset="utf-8">
<head>
<title>images upload</title>
<style type="text/css">
form {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 300px;
display: flex;
flex-wrap: wrap;
}
input {
width: 100%;
margin-bottom:15px;
padding: 10px;
}
input[type="submit"] {
padding: 5px;
}
</style>
</head>
<body>
<form action = "" method = "POST" enctype = "multipart/form-data">
<h1>How to add multiple images using acf from frontside in wordpress</h1>
<input type="" name="title">
<input type="" name="content">
<input type = "file" name = "files1[]" multiple="multiple"/>
<input type = "submit"/>
</form>
</body>
</html>
<?php
include '../wp-config.php';
require_once('../wp-load.php' );
include( ABSPATH . 'wp-admin/includes/image.php' );
require_once( ABSPATH . 'wp-admin/includes/media.php' );
if(isset($_POST['title']) || isset($_POST['content'])){
$images= array();
$my_post = array(
'post_title' => $_POST['title'],
'post_content' => $_POST['content'],
'post_status' => 'draft'
);
$pos_id=wp_insert_post( $my_post );
foreach($_FILES as $value){
for ($i=0; $i <count($value['name']); $i++) {
$errors= array();
$file_name = $value['name'][$i];
$file_size = $value['size'][$i];
$file_tmp = $value['tmp_name'][$i];
$file_type = $value['type'][$i];
$file_ext=strtolower(end(explode('.',$value['name'][$i])));
if(empty($errors)==true) {
$wordpress_upload_dir = wp_upload_dir();
$profilepicture = $wordpress_upload_dir['path'].'/';
move_uploaded_file($file_tmp, $profilepicture.$file_name);
}else{
print_r($errors);
}
$file_name_and_location = $profilepicture.$file_name;
$file_title_for_media_library = $value['name'][$i];
$fildename = $value['name'][$i];
$arr_file_type = wp_check_filetype(basename($fildename));
$uploaded_file_type = $arr_file_type['type'];
$attachment = array(
'post_mime_type' => $uploaded_file_type,
'post_title' => addslashes($file_title_for_media_library),
'post_content' => '',
'post_status' => 'inherit',
'post_parent' => 0,
'post_author' => get_current_user_id(),
);
wp_read_image_metadata( $file_name_and_location );
$attach_id = wp_insert_attachment( $attachment, $file_name_and_location,true,false);
$attach_data = wp_generate_attachment_metadata($attach_id,$file_name_and_location );
wp_update_attachment_metadata( $attach_id, $attach_data );
$images[]= array("image" => $attach_id);
}
}
$field_key = "images_fildes";
update_field($field_key,$images,$pos_id);
} See Result:
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular