Searching JQuery arrays of taxonomy terms for word matches in frontend images upload

I have a need to search through 4 different Taxonomy terms for matches of image tags. Using Jquery.

Having hundereds of images to upload and tag and the theme I'm usings back end has a problem(multiple posting for each post type), I have added a hook to the wordpress exif imagemeta data, using the copyright exif tag.

function hk_filter_add_exif($meta, $file, $sourceImageType)
{
    if ( is_callable('exif_read_data') 
        in_array($sourceImageType, apply_filters('wp_read_image_metadata_types', array(IMAGETYPE_JPEG, IMAGETYPE_TIFF_II, IMAGETYPE_TIFF_MM)) ) )
    {
        $exif = @exif_read_data( $file );

        if (!empty($exif['Copyright']))      $meta['tags'] = $exif['Copyright'] ;

        return $meta;
    }
}

and (Short Term) adding to function wp_prepare_attachment_for_js in media.php

 $ptags = $meta['image_meta']['tags'];

 'PWTags'      = $ptags,

This makes tagging the images on computer in bulk so much easier than one at a time, in admin.

so for example, in the copyright EXIF tag, I put childrens,white,pink,contempory.

Bedroom, being the room, childrens being a feature pink being a color and contempory being a style.

Each have a taxonomy.

Now when I upload an image from front end, I get the following in the console.log:

PWTags:"childrens,white,pink,contempory"
alt:""
author:"3"
authorName:"Gabpy"
caption:"bedroom"
title:"chpk2171134-3"
type:"image"
uploadedTo:0
uploading:false
url:"http://**************/wp-content/uploads/chpk2171134-3.jpg"
width:1600

PWTags:"childrens,white,pink,contempory" being the key of this request for help. I might add that the number of tags could be multiple for each taxonomy, like PWTags:"childrens,white,pink,contempory" giving 1 feature, 2 colors and and one style..

I need to search through the four taxonomies terms for a match for each word in PWTags, if found, pushed together and then inserted into the input values below.

      jQuery.each( attachments,function(key,value){

        var full = value.sizes.full.url,
        imageID = value.id,
        thumbnail =  value.sizes.thumbnail.url,
        name = value.name,
        title = value.title,
        room_type = value.caption,
        pwTags = value.PWTags;


        holder += "li class='gallery-thumb'" +
        "div class='gallery-thumb-holder'" +
        "a class='mark-featured' data-property-id='0' data-attachment-id='"+imageID+"' href='#mark-featured'i class='fa fa fa-star-o'/i/i/a" +
        "span class='my_delete1' data-attachment-id='"+imageID+"'i class='fa fa-times-circle'/i/span" +
        "img src='"+thumbnail+"' exif='true'/" +
        "input class='dt-image-name' type='text' name='items_name[]' value='"+title+"' /" +
        "/div" +
        "div class='input-holder'"+
        "labelTags/labelinput class='dt-image-tags' type='text' name='items_tags[]' value='"+pwTags+"'/" +
        "labelRoom Type/labelinput class='dt-image-colors' type='text' name='items_image_room_group[]' value='"+room_type+"' /" +
        "labelColors/labelinput class='dt-image-colors' type='text' name='items_image_colors[]' value='"+colors+"' /" +
        "labelFeatures/labelinput class='dt-image-colors' type='text' name='items_image_features[]' value='"+features+"' /" +
        "labelStyles/labelinput class='dt-image-colors' type='text' name='items_image_styles[]' value='"+styles+"' /" +
        "input type='hidden' name='items[]' value='"+full+"' /" +
        "input type='hidden' name='items_thumbnail[]' value='"+thumbnail+"' /" +
        "input type='hidden' name='items_id[]' value='"+imageID+"' /" +
        "/li";

I have created four localized variables containing each list of taxonomy terms, for example: (Not sure if this is the right way to go, but only way I could think of getting the terms to searchable via Jquery)

var imageColors = ["black","blue","brown","colourful","cream","green","grey","pink","red","white","yellow"];
var imageRooms = ["bathroom","bedroom","kitchen","outdoor-space","reception"];
var imageFeatures = ["childrens","feature-fireplace","feature-lighting","feature-staircase","great-view","home-office","hotel-chic","loft-living","open-plan","outdoor-living","small","statement-bath","statement-wallpaper","statement-wallpraper","swimming-pool"];
var imageStyles = ["contemporary","country","quirky","traditional"];

And have been trying to search each taxonomy variable with pwTags, all to no avail, not being very converse in JQuery, its a struggle. Hope thats not too confusing and as always, any help is greatly appreciated.

Topic plupload custom-taxonomy jquery Wordpress

Category Web

1
answered at

Answering own questions is becoming a habit :)

But hope this helps others after finding a solution that worked for me.

First defining the three variables I needed in the upload function:

      var features = "";
      var colors = "";
      var styles = "";

Then, added the following to prevent error if pwTags was empty:

     if (pwTags != null) {
       pwTags = pwTags;
     }else{
     pwTags = room_type;
     }

Then the following function to checkcompare each string for matches:

  function stringToCheck (arr1,arr2) {
    var common = new Array();
      for (var i = 0, n = arr1.length, j = 0, k = arr2.length; (i < n) && (j < k); i ++){
       if (arr1[i] == arr2[j]){
          common.push(arr1[i]);
          j ++;
        }
       else if (arr1[i] > arr2[j]){
          j ++;
          i --;
       }
    }
  return common.toString();
}

Next The call to create each matched words into string:

   var Tags = pwTags.split(",").sort();

    var roomGroupTerms = imageroom_group.split(",").sort();
    var roomGroup = stringToCheck(Tags,roomGroupTerms);

    var colorTerms = imagecolors.split(",").sort();
    var colors = stringToCheck(Tags,colorTerms);

    var featuresTerms = imagefeatures.split(",").sort();
    var features = stringToCheck(Tags,featuresTerms);

    var styleTerms = imagestyles.split(",").sort();
    var styles = stringToCheck(Tags,styleTerms);

Finally in the jQuery plupload function, the following return on each image upload:

  holder += "<li class='gallery-thumb'>" +
        "<div class='gallery-thumb-holder'>" +
        "<a class='mark-featured' data-property-id='0' data-attachment-id='"+imageID+"' href='#mark-featured'><i class='fa fa fa-star-o'></i></i></a>" +
        "<span class='deleteAttachment' data-attachment-id='"+imageID+"'><i class='fa fa-times-circle'></i></span>" +
        "<img src='"+thumbnail+"' exif='true'/>" +
        "<input class='dt-image-name' type='text' name='items_name[]' value='"+title+"' />" +
        "</div>" +
        "<div class='input-holder'>"+
        "<label>Tags</label><input class='dt-image-tags' type='text' name='items_tags[]' value='"+pwTags+"'/>" +
        "<label>Room Type</label><input class='dt-image-colors' type='text' name='items_image_room_group[]' value='"+room_type+"' />" +
        "<label>Colors</label><input class='dt-image-colors' type='text' name='items_image_colors[]' value='"+colors+"' />" +
        "<label>Features</label><input class='dt-image-colors' type='text' name='items_image_features[]' value='"+features+"' />" +
        "<label>Styles</label><input class='dt-image-colors' type='text' name='items_image_styles[]' value='"+styles+"' />" +
        "<input type='hidden' name='items[]' value='"+full+"' />" +
        "<input type='hidden' name='items_thumbnail[]' value='"+thumbnail+"' />" +
        "<input type='hidden' name='items_id[]' value='"+imageID+"' />" +
        "</li>";

For the PHP to create jQuery strings for each taxonomy, first placed the following into theme footer:

if( is_page_template('tpl-dashboard-admin.php')):
  echo "\n<script type='text/javascript'>\n";
  echo "/* <![CDATA[ */\n";;
  echo pw_get_taxonomies_for_attachments();
  echo "/* ]]> */\n";
  echo " </script>\n";
endif;

And the function itself:

  function pw_get_taxonomies_for_attachments( $output = 'names') {
    $taxonomies = array();
    $out='';
    $termsOut='';
      foreach ( get_taxonomies( array(), 'objects' ) as $taxonomy ) {
         foreach ( $taxonomy->object_type as $object_type ) {
           if ( 'attachment' == $object_type || 0 === strpos( $object_type, 'attachment:' ) ) {
              if ( 'names' == $output ){
                 $image_terms = get_terms( $taxonomy->name, array('hide_empty' => false,) );
                   if ( ! empty( $image_terms ) && ! is_wp_error( $image_terms ) ){
                      $out .= 'var image'.$taxonomy->name.' = "';
                      $image_terms = array_values($image_terms);
                        for($cat_count=0; 
                         $cat_count<count($image_terms); $cat_count++) {
                          $out .= $image_terms[$cat_count]->slug;
                           if ($cat_count<count($image_terms)-1){
                              $out .= ',';
                           }
                         }
                        }
                           $out .= '"'."\n";
                   }else{
                     $taxonomies[ $taxonomy->name ] = $taxonomy;
                    break;
              }
           }
         }
      }

    return $out;
  }

Hope it helps someone

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.