0

I have a page template that allows users to create posts (for a custom post type) on the front end and upload (multiple) images. Currently it works fine but I would like to enhance it by adding the ability to give each photo a title/caption to be used on the single post page.

On top of my page I have code for saving the fields such as --

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

And -

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

Here's how I have it in a form on the submit post page template --

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

Here's how I have it on the 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); ?>
                  <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 -->

How can I attach a title to each photo?

UPDATE

I've been messing around with things and I now have my code setup as follows --

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

Then on my post page I was trying to output the titles.

At the top --

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

And then it outputs as a slider on my page, and I am trying to echo the titles --

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

So far I almost have it working using the script from above. On my front end form though I'm having an issue, as seen in the screenshot - error

This is how I have the code, which is almost working fine except for each photo/thumbnail, it's echoing the input field for the title incorrectly. This is how I currently have my code setup in my form --

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

This being the relevant field for the photo caption -

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

As mentioned already I have my code at top to save the field --

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

Seems to be saving because my next issue is echoing it on my post page, but it's echoing all the values instead of it echoing the relevant title to the picture being shown. Here's an example - title error - single post page

Here's my code for that ---

<!-- 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
    where is the logic that creates the post and uploads the images? – David Lee Oct 16 '17 at 5:04
  • I updated my question – Rich Oct 18 '17 at 18:24
0

WordPress stores the images as attachment post type, so it is possible to add the title to each of your gallery images.

For example,

 // $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   );

You can set your each gallery images Title as post title and can get the title using simple post function "get_the_title($your_attachment_id);".

For more details, example link

Hope this will help you.

  • I've updated my question, please take a look. – Rich Oct 18 '17 at 18:24
  • where is the image upload snippet in your update snippet? – Sunil Dora Oct 24 '17 at 9:41
  • Check my update – Rich Oct 24 '17 at 16:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.