多张照片上传，前端有标题，用于定制帖子类型

时间：2017-10-06 作者：730wavy

我有一个页面模板，允许用户在前端创建帖子（自定义帖子类型）并上传（多个）图像。目前它运行良好，但我想通过添加为每张照片提供标题/说明的功能来增强它，以便在单个帖子页面上使用。

在我的页面顶部，我有保存字段的代码，例如--

  $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 -->
如何为每张照片附加标题？

UPDATE

我一直在胡闹，现在我的代码设置如下--

<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 -->

UPDATE 2

到目前为止，我几乎可以使用上面的脚本工作。在我的前端表单上，虽然我有一个问题，如屏幕截图所示-error

这就是我的代码，除了每张照片/缩略图外，它几乎工作正常，它错误地回显了标题的输入字段。这就是我目前在表单中设置代码的方式--

 <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);
似乎正在保存，因为我的下一期是在我的帖子页面上重复它，但它重复了所有的值，而不是重复显示的图片的相关标题。这里有一个例子-title error - single post page

这是我的密码---

<!-- 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 -->

1 个回复
SO网友:Sunil Dora

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   );
您可以将每个库图像标题设置为帖子标题，并可以使用简单的帖子功能“获取\\u标题（$your\\u attachment\\u id）；”获取标题。

有关更多详细信息，example link

希望这对你有帮助。

结束
标签： custom-post-types   custom-field   front-end   images   uploads   小码农  

相关推荐

Organizing media uploads

我的一个客户想把他的WordPress网站转移到我的服务器上。问题是他的网站没有在他的上传文件夹中使用子文件夹，而他上传文件夹的根目录中有超过1000000个文件。有没有一种方法可以将他的所有帖子上传到文件夹中，而不会丢失帖子中的附加链接和特色图片？