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-9s_\.-:])+(.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 –
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 –
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 -->