Посещая наш сайт, вы соглашаетесь с нашей политикой конфиденциальности в отношении файлов cookie, статистики отслеживания и т. д.

Главная » Вопросы и ответы » Wordpress

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

На чтение 16 мин Опубликовано
Содержание
  1. Вопрос или проблема
  2. Ответ или решение
  3. 1. Изменение формы загрузки изображений
  4. 2. Сохранение заголовков при отправке формы
  5. 3. Отображение заголовков на однотипной странице
  6. Заключение

Вопрос или проблема

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

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

  $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++;
                    }
                }
        }

Вот как у меня это выглядит в форме на странице отправки записи —

<!-- Загрузка фотографий -->
<div class="full-divsn mbottom2">
<h4 id="expanderHead2" class="dctops" style="cursor:pointer;margin-bottom: 0 !important;">Фотографии <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('Загрузить изображения', 'framework'); ?></label>
                                            <p><?php _e('Загрузить изображения, которые лучше всего отображают вашу собственность', '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="Установить как изображение по умолчанию" 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="Удалить" 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>
<!-- Конец загрузки фотографий -->

Вот как у меня это выглядит на странице отдельной записи —

<!-- Фотографии дома -->
             <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="https://wordpress.stackexchange.com/questions/282117/<?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="https://wordpress.stackexchange.com/questions/282117/<?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>
<!-- Конец фотографий дома -->

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

ОБНОВЛЕНИЕ

Я поигрался с разными вещами и теперь у меня код настроен следующим образом —

<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="Введите строку тега изображения";
                        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 + " не является допустимым изображением.");
                    dvPreview.innerHTML = "";
                    return false;
                }
            }
        } else {
            alert("Этот браузер не поддерживает 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="https://wordpress.stackexchange.com/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;">
        Загрузить фотографии
      </span>
    </span>
<span style="width: 100%;margin: 0px auto;text-align: center;">Выберите один или несколько файлов с вашего компьютера или перетащите их сюда.</span>
 <span class="file-name" id="filename" style="border: none;width: 100%;margin: 0px auto;text-align: center;">
Файлы должны быть JPG или PNG.
    </span>
  </label>

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

Вверху — 

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

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

<!-- Фотографии дома -->
             <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="https://wordpress.stackexchange.com/questions/282117/<?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="https://wordpress.stackexchange.com/questions/282117/<?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>
<!-- Конец фотографий дома -->

ОБНОВЛЕНИЕ 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";

<!-- ВЫБРАННОЕ ИЗОБРАЖЕНИЕ ПО УМОЛЧАНИЮ -->
     echo '<div id="property-img"><div id="property-thumb" class="' . $def_class . '"><a id="feat-image" class="accent-color default-image" data-original-title="Установить как изображение по умолчанию" 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="Удалить" 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);

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

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

<!-- Фотографии дома -->
             <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="https://wordpress.stackexchange.com/questions/282117/<?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="https://wordpress.stackexchange.com/questions/282117/<?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>
<!-- Конец фотографий дома -->

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

Например,

 // $filename должен быть путем к файлу в директории загрузок.
 $filename="/path/to/uploads/2013/03/filename.jpg";

 // ID записи, для которой это вложение.
 $parent_post_id = 37;

 // Проверьте тип файла. Мы будем использовать это как 'post_mime_type'.
 $filetype = wp_check_filetype( basename( $filename ), null );

 // Получите путь к директории загрузок.
 $wp_upload_dir = wp_upload_dir();

 // Подготовьте массив данных поста для вложения.
 $attachment = array(
    'guid'           => $wp_upload_dir['url'] . "https://wordpress.stackexchange.com/" . basename(  $filename ), 
    'post_mime_type' => $filetype['type'],
    'post_title'     => preg_replace( '/\.[^.]+$/', '', basename( $filename ) ),
    'post_content'   => '',
    'post_status'    => 'inherit'
  );

 // Вставьте вложение.
  $attach_id = wp_insert_attachment( $attachment, $filename, $parent_post_id   );

Вы можете установить каждый заголовок изображений вашей галереи как заголовок записи и получить заголовок, используя простую функцию поста “get_the_title($your_attachment_id);”.

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

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

Ответ или решение

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

1. Изменение формы загрузки изображений

Первым шагом будет обновление вашей формы для загрузки изображений, чтобы включить текстовые поля для заголовков каждого изображения. Изменим вашу функцию JavaScript, чтобы каждое загружаемое изображение сопровождалось полем для ввода заголовка.

<script>
document.getElementById("filePhotoMulti").onchange = function () {
    var fileUpload = this;
    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");
                img.height = "100";
                img.width = "100";
                img.src = e.target.result;

                var textbox = document.createElement('input');
                textbox.type = "text";
                textbox.name = "tag_line[]";
                textbox.placeholder = "Введите заголовок изображения";

                var div = document.createElement('div');
                div.className = "ipt-box";
                div.appendChild(img);
                div.appendChild(textbox);

                dvPreview.appendChild(div);
            }
            reader.readAsDataURL(file);
        } else {
            alert(file.name + " не является допустимым изображением.");
        }
    }
};
</script>

2. Сохранение заголовков при отправке формы

Теперь, когда ваши заголовки поддерживаются на фронтенде, необходимо изменить обработку на серверной стороне для сохранения заголовков в метаданных записи. Обновите вашу логику сохранения, чтобы сохранить заголовки вместе с загруженными изображениями.

if (!empty($_FILES['sightMulti']['tmp_name'][0])) {
    $i = 1;
    $files = $_FILES['sightMulti'];
    $tags = $_POST['tag_line']; // Получаем массив заголовков.
    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 (isset($tags[$key]) && !empty($tags[$key])) {
                update_post_meta($pid, 'tag_line_' . $newuploadMulti, sanitize_text_field($tags[$key]));
            }

            if ($i == 1) {
                update_post_meta($pid, '_thumbnail_id', $newuploadMulti);
            }
            add_post_meta($pid, 'imic_property_sights', $newuploadMulti, false);
        }
        $i++;
    }
}

3. Отображение заголовков на однотипной странице

Теперь нужно отобразить заголовки на странице однопостового просмотра. Мы будем извлекать заголовки на основании ID изображений, сохраненных в метаданных.

<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 esc_url($image[0]); ?>" alt=""/>
                <?php 
                // Получаем заголовок изображения.
                $caption = get_post_meta(get_the_ID(), 'tag_line_' . $property_sight, true);
                if ($caption): ?>
                    <div class="caption"><?php echo esc_html($caption); ?></div>
                <?php endif; ?>
            </li>
        <?php endforeach; ?>
        </ul>
    </div>
    <?php else: ?>
        <img src="/wp-content/uploads/2016/01/canstockphoto3113775-v4.jpg" alt=""/>
    <?php endif; ?>
</div>

Заключение

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

Надеюсь, данные рекомендации помогут вам реализовать желаемую функциональность!

custom-field custom-post-types front-end images uploads
Оцените материал
Добавить комментарий

Капча загружается...

© 2025 IZ6.RU
*В материалах сайта упоминаются социальные сети Фейсбук / Инстаграм, принадлежащие Meta Platforms Inc., деятельность которой запрещена на территории РФ в части реализации данных социальных сетей на основании осуществления ею экстремистской деятельности