0

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'>"+
        "<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>";

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.

0

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

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.