I'm using Frontier Post plugin for frontend posting and it works great, but I would like to add the following: when a user uploads/selects a featured image I would like it to be immediately displayed (sort of like facebook when you upload a new cover image) and not have to wait until after submitting.

Here is the relevant code from the 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";
                $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">

        $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>';

I don't know if WordPress is capable of doing this but I tried adding this function I found for creating thumbnails.

    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 */

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

When I add it outside the if (has_post_thumbnail($post_id)) I get a warning saying that the variable in fopen is empty. When I move it inside the if statement nothing happens.

Is what I'm trying to do possible and if so, what's the best way to do it?


Note: I reached out to the plugin developer with my question but haven't received any response.


If you want to show an image without storing it to the server and retrieving that url first, you will need to generate a local url to put in your image tag. That means using javascript. Actually, it's quite simple (props):

In the place where you want the image to appear, insert:

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

Then modify the file upload field in the form like this:

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

Now you would need to get that working with Frontier Post. Since you don't want to modify the plugin itself, you will need to write your own plugin that modifies the behaviour of the parent plugin. That's possible, but not straightforward, and involves thorough analysis of the parent plugin.

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.