{"id":1644,"date":"2017-04-19T16:01:13","date_gmt":"2017-04-19T23:01:13","guid":{"rendered":"https:\/\/www.bellazon.com\/blog\/?page_id=1644"},"modified":"2018-07-22T18:26:54","modified_gmt":"2018-07-23T01:26:54","slug":"image-search","status":"publish","type":"page","link":"https:\/\/www.bellazon.com\/blog\/image-search\/","title":{"rendered":"Image Search"},"content":{"rendered":"<p>[raw]<\/p>\n<style>\n<p>        .row::after {\n            display: table;\n            content: \" \";\n            clear: both;\n        }<\/p>\n<p>        .image-match-container\n        {\n            width: 100%;\n            text-align: center;\n            margin: 0 auto;\n            color: #333;\n        }<\/p>\n<p>        .image-match-container h1\n        {\n            font-size: 42px;\n            font-weight: 300;\n            color: #0f3c4b;\n            margin-bottom: 40px;\n        }\n        .image-match-container h1 a:hover,\n        .image-match-container h1 a:focus\n        {\n            color: #39bfd3;\n        }<\/p>\n<p>        .another-search {\n            display: none;\n        }<\/p>\n<p>        .another-search h2 a{\n            color: #333;\n            font-size: 24px;\n            text-decoration: underline;\n            transition: none;<\/p>\n<p>        }\n        .another-search h2 a:hover,\n        .another-search h2 a:focus\n        {\n            color: #39bfd3;\n        }\n        .page-description {\n            text-align: center;\n            margin-top: 20px;\n        }\n        .image-match-container h3 {\n            font-size: 26px;\n            font-weight: 700;\n            margin: 5px 0 0 0;\n        }<\/p>\n<p>        .image-match-container p {\n            margin: 5px 0 0 0;\n        }<\/p>\n<p>        .image-match-container nav\n        {\n            margin-bottom: 40px;\n        }\n        .image-match-container nav a\n        {\n            border-bottom: 2px solid #3c6994;\n            display: inline-block;\n            padding: 4px 8px;\n            margin: 0 5px;\n        }\n        .image-match-container nav a.is-selected\n        {\n            font-weight: 700;\n            color: #39bfd3;\n            border-bottom-color: currentColor;\n        }\n        .image-match-container nav a:not( .is-selected ):hover,\n        .image-match-container nav a:not( .is-selected ):focus\n        {\n            border-bottom-color: #0f3c4b;\n        }<\/p>\n<p>        .image-match-container footer\n        {\n            color: #92b0b3;\n            margin-top: 40px;\n        }\n        .image-match-container footer p + p\n        {\n            margin-top: 1em;\n        }\n        .image-match-container footer a:hover,\n        .image-match-container footer a:focus\n        {\n            color: #39bfd3;\n        }<\/p>\n<p>        .upload-box\n        {\n            font-size: 1.25rem; \/* 20 *\/\n            background-color: #fff;\n            position: relative;\n            padding: 40px 10px;\n        }\n        .upload-box.has-advanced-upload\n        {\n            outline: 2px dashed #3f535e;\n            outline-offset: -10px;<\/p>\n<p>            -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;\n            transition: outline-offset .15s ease-in-out, background-color .15s linear;\n        }\n        .upload-box.is-dragover\n        {\n            outline-offset: -20px;\n            outline-color: #c8dadf;\n            background-color: #fff;\n        }\n        .box__dragndrop,\n        .box__icon\n        {\n            display: none;\n        }\n        .upload-box.has-advanced-upload .box__dragndrop\n        {\n            display: inline;\n        }\n        .upload-box.has-advanced-upload .box__icon\n        {\n            width: 100%;\n            height: 65px;\n            fill: #6189af;\n            display: block;\n            margin-bottom: 25px;\n        }<\/p>\n<p>        .upload-box.is-uploading .box__input,\n        .upload-box.is-success .box__input,\n        .upload-box.is-error .box__input\n        {\n            visibility: hidden;\n        }<\/p>\n<p>        .box__uploading,\n        .box__success,\n        .box__error\n        {\n            display: none;\n        }\n        .upload-box.is-uploading .box__uploading,\n        .upload-box.is-success .box__success,\n        .upload-box.is-error .box__error\n        {\n            display: block;\n            position: absolute;\n            top: 50%;\n            right: 0;\n            left: 0;<\/p>\n<p>            -webkit-transform: translateY( -50% );\n            transform: translateY( -50% );\n        }\n        .box__uploading\n        {\n            font-style: italic;\n        }<\/p>\n<p>        .box__restart\n        {\n            font-weight: 700;\n        }\n        .box__restart:focus,\n        .box__restart:hover\n        {\n            color: #39bfd3;\n        }<\/p>\n<p>        .js .box__file\n        {\n            width: 0.1px;\n            height: 0.1px;\n            opacity: 0;\n            overflow: hidden;\n            position: absolute;\n            z-index: -1;\n        }\n        .js .box__file + label\n        {\n            max-width: 80%;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            cursor: pointer;\n            display: inline-block;\n            overflow: hidden;\n        }\n        .js .box__file + label:hover strong,\n        .box__file:focus + label strong,\n        .box__file.has-focus + label strong\n        {\n            color: #39bfd3; \n        }\n        .js .box__file:focus + label,\n        .js .box__file.has-focus + label\n        {\n            outline: 1px dotted #000;\n            outline: -webkit-focus-ring-color auto 5px;\n        }\n            .js .box__file + label *\n            {\n                \/* pointer-events: none; *\/ \/* in case of FastClick lib use *\/\n            }<\/p>\n<p>        .no-js .box__file + label\n        {\n            display: none;\n        }<\/p>\n<p>        .no-js .box__button\n        {\n            display: block;\n        }\n        .box__button\n        {\n            font-weight: 700;\n            color: #e5edf1;\n            background-color: #39bfd3;\n            display: none;\n            padding: 8px 16px;\n            margin: 40px auto 0;\n        }\n        .box__button:hover,\n        .box__button:focus\n        {\n            background-color: #0f3c4b;\n        }\n        .image-match-container {\n            margin: 20px;\n        }<\/p>\n<p>        .image-match-container .box__uploading img {\n            opacity: 0.5;\n            vertical-align: middle;\n            width: 25px;\n            height: 25px;\n            display: inline-block;\n            margin-top: -5px;\n            margin-right: 10px;\n        }<\/p>\n<p>        .image-match-container .image-match-origin-image {\n            margin-top: 20px;\n            border-bottom: 2px solid #5785b1;\n            display: none;\n        }\n        .image-match-container .query-thumb {\n            width: 25%;\n            text-align: center;\n            float: left;\n            padding: 10px;\n            color: #777;    \n        }<\/p>\n<p>        .image-match-container .query-thumb img {\n            max-width: 100%;\n            height: auto;\n            max-height: 160px;<\/p>\n<p>        }\n        .image-match-container .search-details {\n            text-align: left;\n            float: left;\n            font-size: 14px;\n        }<\/p>\n<p>        .image-match-container .image-match-results {\n            display: flex;\n            flex-wrap: wrap;\n            font-size: 14px;\n        }<\/p>\n<p>        .image-match-container .result-item {\n            width: 18%;\n            padding: 20px 1%;\n        }<\/p>\n<p>        .image-match-container .result-item a {\n            width: 100%;\n            padding: 20px 1%;\n        }<\/p>\n<p>        .image-match-container .result-item img {\n            width: 80%;\n            height: auto;\n        }<\/p>\n<p>        @media screen and (max-width: 900px) {\n            .image-match-container .result-item {\n                width: 30%;\n            }\n        }<\/p>\n<p>        @media screen and (max-width: 600px) {\n            .image-match-container .result-item {\n                width: 98%;\n            }<\/p>\n<p>            .image-match-container .query-thumb {\n                width: 100%;\n            }<\/p>\n<p>            .image-match-container .query-thumb img {\n                max-height: none;<\/p>\n<p>            }<\/p>\n<p>            .image-match-container .search-details {\n                width: 100%;\n                margin-bottom: 20px;\n                text-align: center;\n            }<\/p>\n<p>        }<\/p>\n<\/style>\n<div class=\"ad-tag\" data-ad-name=\"leaderboard_1\" data-ad-size=\"auto\" ><\/div>\n<p><script data-cfasync=\"false\" src=\"\/\/tags-cdn.deployads.com\/a\/bellazon.com.js\" async ><\/script><br \/>\n<script data-cfasync=\"false\" >(deployads = window.deployads || []).push({});<\/script><\/p>\n<div class=\"page-description\">\nReverse Image Search: Upload your image and we will search in our huge index of images to try and find the thread in which it appear as well as any higher resolution images available\n<\/div>\n<div class=\"image-match-container\" role=\"main\">\n<form method=\"post\" action=\"https:\/\/css-tricks.com\/examples\/DragAndDropFileUploading\/\/?\" enctype=\"multipart\/form-data\" novalidate class=\"js upload-box\">\n<div class=\"box__input\">\n<p>\t\t\t<svg class=\"box__icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"50\" height=\"43\" viewBox=\"0 0 50 43\"><path d=\"M48.4 26.5c-.9 0-1.7.7-1.7 1.7v11.6h-43.3v-11.6c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v13.2c0 .9.7 1.7 1.7 1.7h46.7c.9 0 1.7-.7 1.7-1.7v-13.2c0-1-.7-1.7-1.7-1.7zm-24.5 6.1c.3.3.8.5 1.2.5.4 0 .9-.2 1.2-.5l10-11.6c.7-.7.7-1.7 0-2.4s-1.7-.7-2.4 0l-7.1 8.3v-25.3c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v25.3l-7.1-8.3c-.7-.7-1.7-.7-2.4 0s-.7 1.7 0 2.4l10 11.6z\"\/><\/svg><br \/>\n\t\t\t<input type=\"file\" name=\"image\" id=\"file\" class=\"box__file\" data-multiple-caption=\"{count} files selected\" multiple \/><br \/>\n\t\t\t<label for=\"file\"><strong>Choose a file<\/strong><span class=\"box__dragndrop\"> or drag it here<\/span>.<\/label><br \/>\n\t\t\t<button type=\"submit\" class=\"box__button\">Upload<\/button>\n\t\t<\/div>\n<div class=\"box__uploading\"><img decoding=\"async\" src=\"https:\/\/www.bellazon.com\/image-match\/ajax-loader.gif\" style=\"opacity:0.5\">We are looking through our 5 million+ images<\/div>\n<div class=\"box__success\">Done! <a href=\"https:\/\/css-tricks.com\/examples\/DragAndDropFileUploading\/\/?\" class=\"box__restart\" role=\"button\">Upload more?<\/a><\/div>\n<div class=\"box__error\">Error! <span><\/span>. <a href=\"https:\/\/www.bellazon.com\/main\/topic\/38676-problems-and-suggestions-for-bz-post-here\/?page=1\" class=\"box__restart\" role=\"button\">Report here or Try again!<\/a><\/div>\n<\/p><\/form>\n<div class=\"another-search\">\n<h2>\n        <a href=\"#\"><br \/>\n            Search Another Image<br \/>\n        <\/a><\/h2>\n<\/p><\/div>\n<div class=\"image-match-origin-image row\">\n    <\/div>\n<div class=\"image-match-results row\"><\/div>\n<\/div>\n<p><script><\/p>\n<p>\t'use strict';<\/p>\n<p>\t;( function( $, window, document, undefined )\n\t{\n        $(document).ready(function() {<\/p>\n<p>            \/\/ feature detection for drag&drop upload\n            var originImageContainer = $(\".image-match-container .image-match-origin-image\"),\n                imageMatchResultsContainer = $(\".image-match-container .image-match-results\");\n            var isAdvancedUpload = function()\n                {\n                    var div = document.createElement( 'div' );\n                    return ( ( 'draggable' in div ) || ( 'ondragstart' in div && 'ondrop' in div ) ) && 'FormData' in window && 'FileReader' in window;\n                }();\n            var uploadingFileName = \"\";<\/p>\n<p>            \/\/ applying the effect for every form\n            var $anotherSearch = $( '.another-search');\n            $( '.another-search h2 a').click(function(e){\n                $('.upload-box').show();\n                $anotherSearch.hide();\n                originImageContainer.hide();\n                originImageContainer.html('');\n                imageMatchResultsContainer.html('');\n            });<\/p>\n<p>            $( '.upload-box' ).each( function()\n            {\n                var $form\t\t = $( this ),\n                    $input\t\t = $form.find( 'input[type=\"file\"]' ),\n                    $label\t\t = $form.find( 'label' ),\n                    $errorMsg\t = $form.find( '.box__error span' ),\n                    $restart\t = $form.find( '.box__restart' ),\n                    droppedFiles = false,<\/p>\n<p>                    showFiles\t = function( files )\n                    {\n                        uploadingFileName = files[ 0 ].name;\n                    };<\/p>\n<p>                \/\/ letting the server side to know we are going to make an Ajax request\n                $form.append( '<input type=\"hidden\" name=\"ajax\" value=\"1\" \/>' );<\/p>\n<p>                \/\/ automatically submit the form on file select\n                $input.on( 'change', function( e )\n                {\n                    showFiles( e.target.files );<\/p>\n<p>                    $form.trigger( 'submit' );<\/p>\n<p>                });<\/p>\n<p>                \/\/ drag&drop files if the feature is available\n                if( isAdvancedUpload )\n                {\n                    $form\n                    .addClass( 'has-advanced-upload' ) \/\/ letting the CSS part to know drag&drop is supported by the browser\n                    .on( 'drag dragstart dragend dragover dragenter dragleave drop', function( e )\n                    {\n                        \/\/ preventing the unwanted behaviours\n                        e.preventDefault();\n                        e.stopPropagation();\n                    })\n                    .on( 'dragover dragenter', function() \/\/\n                    {\n                        $form.addClass( 'is-dragover' );\n                    })\n                    .on( 'dragleave dragend drop', function()\n                    {\n                        $form.removeClass( 'is-dragover' );\n                    })\n                    .on( 'drop', function( e )\n                    {\n                        droppedFiles = e.originalEvent.dataTransfer.files; \/\/ the files that were dropped\n                        showFiles( droppedFiles );<\/p>\n<p>                        $form.trigger( 'submit' ); \/\/ automatically submit the form on file drop<\/p>\n<p>                    });\n                }<\/p>\n<p>                \/\/ if the form was submitted<\/p>\n<p>                $form.on( 'submit', function( e )\n                {\n                    originImageContainer.html('');\n                    originImageContainer.hide();\n                    imageMatchResultsContainer.html('');<\/p>\n<p>                    var currentFileName = uploadingFileName;\n                    \/\/ preventing the duplicate submissions if the current one is in progress\n                    if( $form.hasClass( 'is-uploading' ) ) return false;<\/p>\n<p>                    $form.addClass( 'is-uploading' ).removeClass( 'is-error' );<\/p>\n<p>                    if( isAdvancedUpload ) \/\/ ajax file upload for modern browsers\n                    {\n                        e.preventDefault();<\/p>\n<p>                        \/\/ gathering the form data\n                        var ajaxData = new FormData( $form.get( 0 ) );\n                        if( droppedFiles )\n                        {\n                            $.each( droppedFiles, function( i, file )\n                            {\n                                ajaxData.append( $input.attr( 'name' ), file );\n                            });\n                        }<\/p>\n<p>                        \/\/ ajax request\n                        $.ajax({\n                            url: 'https:\/\/www.bellazon.com\/image-match\/upload-api.php',\n                            data: ajaxData,\n                            type: 'POST',\n                            processData:false,\n                            contentType:false,\n                            dataType: \"json\",\n                            success: function(data){\n                                if (data.status == \"ok\") {<\/p>\n<p>                                    var resultString = \"\";\n                                    if (data.matches.length == 0) {\n                                        resultString = \"No images found\";\n                                    } else if (data.matches.length == 1) {\n                                        resultString = \"1 image found\";\n                                    } else if (data.matches.length > 1) {\n                                        resultString = data.matches.length + \" images found\";\n                                    }\n                                    $form.removeClass('is-uploading');\n                                    originImageContainer.show();\n                                    originImageContainer.html(\n                                        '<\/p>\n<div class=\"query-thumb\">' +\n                                            '<img decoding=\"async\" src=\"' + data.image + '\">' +\n                                            '<\/p>\n<p>dimension: ' + data.width + 'x' + data.height + '<\/p>\n<p>' +\n                                        '<\/p><\/div>\n<p>' +\n                                        '<\/p>\n<div class=\"search-details\">' +\n                                            '<\/p>\n<h3>' + resultString + '<\/h3>\n<p>' +\n                                            '<\/p>\n<p>Searched over 5 million images.<\/p>\n<p>' +\n                                            '<\/p>\n<p>for: ' + currentFileName + '<\/p>\n<p>' +\n                                        '<\/p><\/div>\n<p>'<\/p>\n<p>                                    );<\/p>\n<p>                                    jQuery.each(data.matches, function(){\n                                        var match = this;\n                                        var matchContent = '<\/p>\n<div class=\"result-item\">' +\n                                                                '<a href=\"https:\/\/bellazon.com\/main\/topic\/' + match.topic + '\/?do=findComment&#038;comment=' + match.post_id + '\">' +\n                                                                    '<img decoding=\"async\" src=\"' + match.src + '\">' +\n                                                                '<\/a>'+\n                                                                '<\/p>\n<p><strong>Score: ' + Math.floor(match.score) + '<\/strong><\/p>\n<p>' +\n                                                                '<\/p>\n<p>' + \n                                                                      '<a href=\"https:\/\/bellazon.com\/main\/topic\/' + match.topic + '\/?do=findComment&#038;comment=' + match.post_id + '\">' +\n                                                                           match.title +\n                                                                       '<\/a><\/p>\n<p>' +\n                                                                '<\/p>\n<p>dimension: ' + match.width + 'x' + match.height + '<\/p>\n<p>' +\n                                                            '<\/p><\/div>\n<p>';\n                                        imageMatchResultsContainer.append(matchContent);\n                                    });<\/p>\n<p>                                    $form.hide();\n                                    $anotherSearch.show();<\/p>\n<p>                                } else {\n                                    $form.removeClass('is-uploading');\n                                    $form.addClass( 'is-error' );\n                                    $form.show();\n                                    $anotherSearch.hide();\n                                }<\/p>\n<p>                            },\n                            error: function() {\n                                $form.removeClass('is-uploading');\n                                $form.addClass( 'is-error' );\n                                $form.show();\n                                $anotherSearch.hide();\n                            }\n                        });<\/p>\n<p>                    }\n                });<\/p>\n<p>                \/\/ restart the form if has a state of error\/success<\/p>\n<p>                $restart.on( 'click', function( e )\n                {\n                    e.preventDefault();\n                    $form.removeClass( 'is-error is-success' );\n                    $input.trigger( 'click' );\n                });<\/p>\n<p>                \/\/ Firefox focus bug fix for file input\n                $input\n                .on( 'focus', function(){ $input.addClass( 'has-focus' ); })\n                .on( 'blur', function(){ $input.removeClass( 'has-focus' ); });\n            });\n\t\t});<\/p>\n<p>\t})( jQuery, window, document );<\/p>\n<p><\/script><\/p>\n<p>[\/raw]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[raw] Reverse Image Search: Upload your image and we will search in our huge index of images to try and find the thread in which it appear as well as any higher resolution images available Choose a file or drag it here. Upload We are looking through our 5 million+ images Done! Upload more? Error! [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-fullwidth-12.php","meta":{"footnotes":""},"class_list":["post-1644","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.bellazon.com\/blog\/wp-json\/wp\/v2\/pages\/1644"}],"collection":[{"href":"https:\/\/www.bellazon.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bellazon.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bellazon.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bellazon.com\/blog\/wp-json\/wp\/v2\/comments?post=1644"}],"version-history":[{"count":20,"href":"https:\/\/www.bellazon.com\/blog\/wp-json\/wp\/v2\/pages\/1644\/revisions"}],"predecessor-version":[{"id":2899,"href":"https:\/\/www.bellazon.com\/blog\/wp-json\/wp\/v2\/pages\/1644\/revisions\/2899"}],"wp:attachment":[{"href":"https:\/\/www.bellazon.com\/blog\/wp-json\/wp\/v2\/media?parent=1644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}