Многократная загрузка фотографий с надписью на лицевой стороне для пользовательского типа сообщения

У меня есть шаблон страницы, который позволяет пользователям создавать сообщения (для персонализированного типа сообщений) на лицевой стороне и загружать (несколько) изображений. В настоящее время он отлично работает, но я хотел бы улучшить его, добавив возможность давать каждой фотографии заголовок / подпись, которые будут использоваться на одной странице.

В верхней части моей страницы у меня есть код для сохранения полей, таких как –

$property_sights_value = get_post_meta($Property_Id, 'imic_property_sights', false); 

А также –

 if (!empty($_FILES['sightMulti']['tmp_name'][0])) { $i = 1; $files = $_FILES['sightMulti']; foreach ($files['name'] as $key => $value) { if ($files['name'][$key]) { $file = array( 'name' => $files['name'][$key], 'type' => $files['type'][$key], 'tmp_name' => $files['tmp_name'][$key], 'error' => $files['error'][$key], 'size' => $files['size'][$key] ); $_FILES = array("sight" . $i => $file); $newuploadMulti = sight("sight" . $i, $pid); if ($i == 1) { update_post_meta($pid, '_thumbnail_id', $newuploadMulti); } add_post_meta($pid, 'imic_property_sights', $newuploadMulti, false); } $i++; } } } 

Вот как я получил его в форме на шаблоне отправки страницы –

 <!-- Photo Upload --> <div class="full-divsn mbottom2"> <h4 id="expanderHead2" class="dctops" style="cursor:pointer;margin-bottom: 0 !important;">Photos <span id="expanderSign2" class="exSign">+</span> </h4> <div id="expanderContent2" class="openall" style="display:none"> <div class="col-md-12 col-sm-12"> <label><?php _e('Upload Images', 'framework'); ?></label> <p><?php _e('Upload images that are best clicked for better appearance of your property', 'framework'); ?></p> </div> <div class="row" id="multiplePhotos" style="margin-top:15px;"> <div class="col-md-12 col-sm-12"> <?php echo'<div class="image-placeholder" id="photoList">'; if (!empty($property_sights_value)) { foreach ($property_sights_value as $property_sights) { $default_featured_image = get_post_meta($Property_Id, '_thumbnail_id', true); if ($default_featured_image == $property_sights) { $def_class = 'default-feat-image'; } else { $def_class = ''; } echo '<div class="col-md-2 col-sm-2">'; echo '<div id="property-img"><div id="property-thumb" class="' . $def_class . '"><a id="feat-image" class="accent-color default-image" data-original-title="Set as default image" data-toggle="tooltip" style="text-decoration:none;" href="#"><div class="property-details" style="display:none;"><span class="property-id">' . $Property_Id . '</span><span class="thumb-id">' . $property_sights . '</span></div><img src="' . wp_get_attachment_thumb_url($property_sights) . '" class="image-placeholder" id="filePhoto2" alt=""/></a>'; if (get_query_var('site')) { echo '<input rel="' . $Property_Id . '" type="button" id="' . $property_sights . '" value="Remove" class="btn btn-sm btn-default remove-image">'; } echo '</div></div>'; echo '</div>'; } } echo '</div>'; ?> <input id="filePhotoMulti" type="file" name="sightMulti[]" multiple onChange="previewMultiPhotos();"> </div> </div> </div> </div> <!-- End Photo Upload --> 

Вот как я нахожусь на одной странице страницы –

 <!-- Home Pictures --> <div class="property-slider"> <?php $property_sights = get_post_meta(get_the_ID(),'imic_property_sights',false); ?> <?php if ($property_sights) { ?> <div id="property-images" class="flexslider"> <ul class="slides"> <?php foreach($property_sights as $property_sight) { $image = wp_get_attachment_image_src($property_sight,'600-400-size',''); ?> <li class="item"> <img src="<?php echo $image[0]; ?>" alt=""> </li> <?php } ?> </ul> </div> <?php if(count($property_sights)>1) { ?> <div id="property-thumbs" class="flexslider"> <?php $property_sights = get_post_meta(get_the_ID(),'imic_property_sights',false); ?> <ul class="slides"> <?php foreach($property_sights as $property_sight) { $image = wp_get_attachment_image_src($property_sight,'600-400-size',''); ?> <li class="item"> <img src="<?php echo $image[0]; ?>" alt=""> </li> <?php } $author_id = $post->post_author; ?> </ul> </div><?php } ?> <?php } else { ?> <img src="/wp-content/uploads/2016/01/canstockphoto3113775-v4.jpg" alt=""> <!--<img src="<?php bloginfo('stylesheet_directory'); ?>/images/default.jpg"> --> <?php } ?> </div> <!-- End Home Pictures --> 

Как я могу прикреплять заголовок к каждой фотографии?

ОБНОВИТЬ

Я уже возился с вещами, и теперь у меня есть настройка кода следующим образом:

 <script> $( "img" ).wrapAll( $( ".doublediv" ) ); window.onload = function () { var fileUpload = document.getElementById("filePhotoMulti"); fileUpload.onchange = function () { if (typeof (FileReader) != "undefined") { var dvPreview = document.getElementById("dvPreview"); dvPreview.innerHTML = ""; var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/; for (var i = 0; i < fileUpload.files.length; i++) { var file = fileUpload.files[i]; if (regex.test(file.name.toLowerCase())) { var reader = new FileReader(); reader.onload = function (e) { var img = document.createElement("IMG"); var textbox = document.createElement('input'); var div2 = document.createElement('div'); div2.className = "ipt-box"; textbox.type = 'text'; textbox.name = 'tag_line[]'; textbox.placeholder = 'Enter image tag line'; img.height = "100"; img.width = "100"; img.src = e.target.result; dvPreview.appendChild(div2); div2.appendChild(img); div2.appendChild(textbox); } reader.readAsDataURL(file); } else { alert(file.name + " is not a valid image file."); dvPreview.innerHTML = ""; return false; } } } else { alert("This browser does not support HTML5 FileReader."); } } $("#dvPreview img").each(function(index) { $(this).next("input").andSelf().wrapAll("<div class='form-element-wrapper' />") }); }; </script> <div id="dvPreview"> </div> <div class="file has-name is-boxed" style="width: 100%;"> <label class="file-label" style="width: 100%; height: 250px; border: 2px dashed #ccc;"> <input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" /> <input id="filePhotoMulti" type="file" class="file-input" name="sightMulti[]" multiple /> <span class="file-cta" style="background: #fff; border: none;"> <span class="file-icon" style="height: 6em; width: 100%;"> <img src="/wp-content/uploads/2017/10/upload-1.png" /> </span> <span class="file-label" style="background: #828282; padding: 5px 30px 7px 30px; font-size: 15px; margin-top: 1em; color: #fff; font-weight: 500;"> Upload Photos </span> </span> <span style="width: 100%;margin: 0px auto;text-align: center;">Select one or more files from your computer or drag and drop them here.</span> <span class="file-name" id="filename" style="border: none;width: 100%;margin: 0px auto;text-align: center;"> Files must be JPG or PNG. </span> </label> 

Затем на моей странице сообщения я пытался выводить заголовки.

На вершине —

 $pictagline = get_post_meta($Property_Id, 'tag_line', true); 

И затем он выводится как слайдер на моей странице, и я пытаюсь повторить заголовки –

 <!-- Home Pictures --> <div class="property-slider"> <?php $property_sights = get_post_meta(get_the_ID(),'imic_property_sights',false); ?> <?php if ($property_sights) { ?> <div id="property-images" class="flexslider"> <ul class="slides"> <?php foreach($property_sights as $property_sight) { $image = wp_get_attachment_image_src($property_sight,'600-400-size',''); ?> <li class="item"> <img src="<?php echo $image[0]; ?>" alt=""> </li> <?php } ?> </ul> </div> <?php if(count($property_sights)>1) { ?> <div id="property-thumbs" class="flexslider"> 

  <ul class="slides"> <?php foreach($property_sights as $property_sight) { $image = wp_get_attachment_image_src($property_sight,'600-400-size',''); ?> <li class="item"> <img src="<?php echo $image[0]; ?>" alt=""> </li> <?php } $author_id = $post->post_author; ?> </ul> </div><?php } ?> <?php } else { ?> <img src="/wp-content/uploads/2016/01/canstockphoto3113775-v4.jpg" alt=""> <!--<img src="<?php bloginfo('stylesheet_directory'); ?>/images/default.jpg"> --> <?php } ?> </div> <!-- End Home Pictures --> 

ОБНОВЛЕНИЕ 2

До сих пор я почти работал, используя скрипт сверху. На моем лицевом конце формы, хотя у меня есть проблема, как видно на скриншоте – ошибка

Вот как у меня есть код, который почти отлично работает, за исключением каждой фотографии / миниатюры, он неправильно отображает поле ввода для заголовка. Вот как у меня в настоящее время моя настройка кода в моей форме –

  <div id="multiplePhotos"> <?php echo'<div class="image-placeholder" id="photoList">'; if (!empty($property_sights_value)) { foreach ($property_sights_value as $property_sights) { $default_featured_image = get_post_meta($Property_Id, '_thumbnail_id', true); echo '<div class="ep-img-box">'; if ($default_featured_image == $property_sights) { $def_class = 'default-feat-image'; <!-- THE SELECTED DEFAULT IMAGE --> echo '<div id="property-img"><div id="property-thumb" class="' . $def_class . '"><a id="feat-image" class="accent-color default-image" data-original-title="Set as default image" data-toggle="tooltip" style="text-decoration:none;" href="#"><div class="property-details" style="display:none;"><span class="property-id">' . $Property_Id . '</span><span class="thumb-id">' . $property_sights . '</span></div><img src="' . wp_get_attachment_thumb_url($property_sights) . '" class="image-placeholder" id="filePhoto2" alt=""/></a>'; } else { $def_class = ''; echo '<div id="property-img"><div id="property-thumb" class="' . $def_class . '"><div class="property-details" style="display:none;"><span class="property-id">' . $Property_Id . '</span><span class="thumb-id">' . $property_sights . '</span></div><img src="' . wp_get_attachment_thumb_url($property_sights) . '" class="image-placeholder" id="filePhoto2" alt=""/>'; } foreach( $pictagline as $ptl){ echo '<div class="tline"><input type="text" name="tag_line[]" style="height:30px;" value="' . $ptl . '"></div>'; } if (get_query_var('site')) { echo '<button type="button" rel="' . $Property_Id . '" id="' . $property_sights . '" value="Remove" class="remove-image">x</button>'; } echo '</div></div>'; echo '</div>'; } } echo '</div>'; ?> </div> 

Это подходящее поле для заголовка фотографии –

 foreach( $pictagline as $ptl){ echo '<div><input type="text" name="tag_line[]" value="' . $ptl . '"></div>'; } 

Как уже упоминалось, у меня есть код вверху, чтобы сохранить поле –

 $pictagline = get_post_meta($Property_Id, 'tag_line', true); 

Кажется, нужно сохранить, потому что моя следующая проблема вторит ему на моей странице, но она вторит всем значениям, а не вторит соответствующему заголовку на отображаемое изображение. Вот пример – ошибка названия - отдельная страница

Вот мой код для этого —

 <!-- Home Pictures --> <div class="property-slider"> <?php $property_sights = get_post_meta(get_the_ID(),'imic_property_sights',false); ?> <?php if ($property_sights) { ?> <div id="property-images" class="flexslider"> <ul class="slides"> <?php foreach($property_sights as $property_sight) { $image = wp_get_attachment_image_src($property_sight,'600-400-size',''); ?> <li class="item"> <img src="<?php echo $image[0]; ?>" alt=""> </li> <?php } ?> </ul> </div> <?php if(count($property_sights)>1) { ?> <div id="property-thumbs" class="flexslider"> <?php $property_sights = get_post_meta(get_the_ID(),'imic_property_sights',false); ?> <?php $pictagline = get_post_meta( $post->ID, 'tag_line', true ); foreach( $pictagline as $ptl){ ?><?php echo $ptl; ?><?php } ?> <ul class="slides"> <?php foreach($property_sights as $property_sight) { $image = wp_get_attachment_image_src($property_sight,'600-400-size',''); ?> <li class="item"> <img src="<?php echo $image[0]; ?>" alt=""> </li> <?php } $author_id = $post->post_author; ?> </ul> </div><?php } ?> <?php } else { ?> <img src="/wp-content/uploads/2016/01/canstockphoto3113775-v4.jpg" alt=""> <!--<img src="<?php bloginfo('stylesheet_directory'); ?>/images/default.jpg"> --> <?php } ?> </div> <!-- End Home Pictures --> 

WordPress сохраняет изображения в виде вложений типа вложений, поэтому можно добавить заголовок для каждого из ваших изображений галереи.

Например,

  // $filename should be the path to a file in the upload directory. $filename = '/path/to/uploads/2013/03/filename.jpg'; // The ID of the post this attachment is for. $parent_post_id = 37; // Check the type of file. We'll use this as the 'post_mime_type'. $filetype = wp_check_filetype( basename( $filename ), null ); // Get the path to the upload directory. $wp_upload_dir = wp_upload_dir(); // Prepare an array of post data for the attachment. $attachment = array( 'guid' => $wp_upload_dir['url'] . '/' . basename( $filename ), 'post_mime_type' => $filetype['type'], 'post_title' => preg_replace( '/\.[^.]+$/', '', basename( $filename ) ), 'post_content' => '', 'post_status' => 'inherit' ); // Insert the attachment. $attach_id = wp_insert_attachment( $attachment, $filename, $parent_post_id ); 

Вы можете установить каждое изображение в галерее Заголовок в качестве заголовка сообщения и получить заголовок с помощью простой функции post «get_the_title ($ your_attachment_id)».

Для получения дополнительной информации см. Ссылку на ссылку

Надеюсь, что это поможет вам.