web-dev-qa-db-fra.com

Prévisualiser l’image sélectionnée à l’aide du plug-in de poste frontal

J'utilise Frontier Post le plug-in pour la publication frontale et cela fonctionne très bien, mais j'aimerais ajouter ceci: lorsqu'un utilisateur télécharge/sélectionne une vedette image Je voudrais qu'il soit immédiatement affiché (un peu comme Facebook lorsque vous importez une nouvelle image de couverture) et que vous n'ayez pas à attendre après la soumission.

Voici le code pertinent du plugin:

  if ( fp_get_option_bool("fps_show_feat_img") )
    {
        //force grid view
        //update_user_option( get_current_user_id(), 'media_library_mode', 'grid' );
        //set iframe size for image upload
        if ( wp_is_mobile() )
            {
                $i_size     = "&width=240&height=320";
                $i_TBsize   = "&TB_width=240&TB_height=320";
            }
        else
            {
                $i_size     = "&width=640&height=400";
                $i_TBsize   = "&TB_width=640&TB_height=400";
            }
        ?>

        <fieldset class="frontier_post_fieldset_tax frontier_post_fieldset_tax_featured">

        <?php
        $FeatImgLinkHTML = '<a title="ADD COVER IMAGE" href="'.site_url('/wp-admin/media-upload.php').'?post_id='.$post_id.$i_TBsize.'&amp;tab=library&amp;mode=grid&amp;type=image&amp;TB_iframe=1'.$i_size.'" id="set-post-thumbnail" class="thickbox">';

        if (has_post_thumbnail($post_id)) 
            $FeatImgLinkHTML = $FeatImgLinkHTML.get_the_post_thumbnail($post_id, 'thumbnail').'<br>';


        $FeatImgLinkHTML = $FeatImgLinkHTML.'<br>'.__("ADD COVER IMAGE", "frontier-post").'</a>';

        echo $FeatImgLinkHTML."<br>";

        echo '</fieldset>';
    }

Je ne sais pas si WordPress est capable de faire cela, mais j'ai essayé d'ajouter cette fonction que j'ai trouvée pour créer des vignettes.

    function make_thumb($src, $desired_width) {

        /* read the source image */
        $source_image = imagecreatefromjpeg($src);
        $width = imagesx($source_image);
        $height = imagesy($source_image);

        /* find the "desired height" of this thumbnail, relative to the desired width  */
        $desired_height = floor($height * ($desired_width / $width));

        /* create a new, "virtual" image */
        $virtual_image = imagecreatetruecolor($desired_width, $desired_height);

        /* copy source image at a resized size */
        imagecopyresampled($virtual_image, $source_image, 0, 0, 0, 0, $desired_width, $desired_height, $width, $height);

        /* create the physical thumbnail image to its destination */
        imagejpeg($virtual_image);
        }

        $thumb = fopen(the_post_thumbnail_url(post-thumbnail), "r");
        $desired_width = 300;
        make_thumb($thumb, $desired_width);

Lorsque je l'ajoute en dehors de if (has_post_thumbnail($post_id)), un avertissement m'indique que la variable dans fopen est vide. Lorsque je le déplace dans la déclaration if, rien ne se passe.

Est-ce que ce que j'essaie de faire est possible et si oui, quel est le meilleur moyen de le faire?

Merci.

Remarque: j'ai posé la question au développeur du plug-in, mais je n'ai reçu aucune réponse.

pluginsimagesfront-endposting
1
jetgo

Si vous souhaitez afficher une image sans la stocker sur le serveur et récupérer cette URL en premier, vous devez générer une URL locale à insérer dans votre balise d'image. Cela signifie utiliser du javascript. En fait, c'est assez simple ( props ):

À l'endroit où vous souhaitez que l'image apparaisse, insérez:

<img id="temporary-id" alt="your image" max-width="640px" max-height="400px" />

Puis modifiez le champ de téléchargement de fichier sous la forme suivante:

<input type="file" onchange="document.getElementById('temporary-id').src = window.URL.createObjectURL(this.files[0])">

Maintenant, il faudrait que cela fonctionne avec Frontier Post. Puisque vous ne voulez pas modifier le plugin lui-même, vous devez écrire votre propre plugin qui modifie le comportement du plugin parent. C'est possible, mais pas simple, et implique une analyse approfondie du plugin parent.

1
cjbj