Viewing 6 reply threads
  • Author
    Posts
    • #6852
      eflouret
      Member

      Hi, I would like to show a preview of an uploaded image in the backend form before submitting it.

      I set up this:

      array(
       'type' => 'file'
       ,'scope' => 'post_meta'
       ,'field' => 'article_image'
       ,'label' => 'Article Image'
       ,'options' => array(
      	'modal_title' => 'Add File(s)'
      	,'preview_size' => 'newsletter'
       ),
      ),
      

      The preview size ‘newsletter’ is a custom size I generated. But no matter what size I use, it always shows a thumbnail preview.

      I have a couple of questions.

      1) Is there a way I can preview other sizes than ‘thumbnail’?
      2) Is there a way to show a preview image using the basic uploader?
      3) Is there a way to limit the upload (using either media upload or basic uploader) to 1 or ‘n’ images?

      Thanks!

      Enrique

      Attachments:
      You must be logged in to view attached files.
    • #6855
      Jason
      Keymaster

      Hey @eflouret!

      I believe how you’re changing the preview size should work… Just to be clear, newsleter is a registered image size?

      For the basic uploader, no there is no preview. That’s just using the standard HTML file input field, which doesn’t offer that. Hence, basic. 🙂

      Yes! You can do that using the limit sanitization:

      
      array(
       'type' => 'file'
       ,'scope' => 'post_meta'
       ,'field' => 'article_image'
       ,'label' => 'Article Image'
       ,'options' => array(
      	'modal_title' => 'Add File(s)'
      	,'preview_size' => 'newsletter'
       ),
       ,'sanitize' => array(
        array(
         'type' => 'limit'
         ,'options' => array( 'max' => 1 )
        ) 
       )
      ),
      

      Hope this helps!

    • #6856
      Jason
      Keymaster

      It isn’t in the new docs, yet, but you can read more on sanitization here: https://piklist.com/user-guide/docs/sanitizing-field-data/

    • #6857
      eflouret
      Member

      Thanks Jason for the sanitizing field data, I will check that.

      Yes, the “newsletter” size is registered along with many other sizes that I already use in my posts. Maybe is some kind of scope problem?

      <?php
          add_theme_support( 'post-thumbnails' );
          add_image_size( 'large-square', 400, 400, true );
          add_image_size( 'medium-fb', 600, 314, true );
          add_image_size( 'large-fb', 980, 513, true );
          add_image_size( 'grid-th', 500, 99999 );
          add_image_size( 'medium-longform', 728, 99999 );
      	add_image_size( 'newsletter', 600, 99999 );
      
          add_filter('image_size_names_choose', 'my_image_sizes');
          function my_image_sizes($sizes) {
          $addsizes = array(
              "medium-longform" => __( "Medium Longform"),
              "large-square" => __( "Large Square"),
              "medium-fb" => __( "Medium FB"),
              "large-fb" => __( "Large FB"),
              "grid-th" => __( "Grid Thumbnail"),
              "newsletter" => __( "Newsletter"),
       );
          $newsizes = array_merge($sizes, $addsizes);
          return $newsizes;
          }
      ?>

      I’m using this upload field inside a group with a repeater. That group is inside a Workflow tab and belongs to a custom post type.

      Here’s the code for TAB-1 of the workflow

      <?php
      
      /*
      Title: Add Content
      Order: 10
      Flow: Add Newsletter
      Default: true
      meta_box: false
      Role: administrator
      */
      
      piklist('field', array(
          'type' => 'group'
          ,'columns' => 12
          ,'add_more' => true
          ,'scope' => 'post_meta'
          ,'field' => 'newsletter_articles'
          ,'fields' => array(
               array(
      			'type' => 'text'
      			,'scope' => 'post_meta'
      			,'field' => 'article_title'
      			,'label' => 'Article Title'
      			,'columns' => 12
      			,'attributes' => array(
      				'style="border-radius:3px; padding:10px; font-size:16px"'
      			),
              ),
             array(
      		    'type' => 'editor'
      			,'scope' => 'post_meta'
      			,'field' => 'article_content'
      			,'label' => 'Article Content'
      			,'columns' => 12
      			,'attributes' => array(
      				'rows' => 5,
      				'style="border-radius:3px; padding:10px; font-size:16px"'
      			),
              ),
              array(
      			'type' => 'text'
      			,'scope' => 'post_meta'
      			,'field' => 'article_link'
      			,'label' => 'Article Link'
       			,'columns' => 12
      			,'attributes' => array(
      				'style="border-radius:3px; padding:10px; font-size:16px"'
      			),
             ),
              array(
      			'type' => 'text'
      			,'scope' => 'post_meta'
      			,'field' => 'button_text'
      			,'label' => 'Button Text'
          		,'columns' => 12
      			,'attributes' => array(
      				'style="border-radius:3px; padding:10px; font-size:16px"'
      			),
          ),
               array(
      			'type' => 'file'
      			,'scope' => 'post_meta'
      			,'field' => 'article_image'
      			,'label' => 'Article Image'
      			,'columns' => 12
      			,'attributes' => array(
      				'style="border-radius:3px; padding:10px; font-size:16px"'
      			)
      			,'options' => array(
      			  	'modal_title' => 'Add File(s)'
      				,'preview_size' => 'large-fb'
      			),
              ),
         )
      ));
      
      ?>

      Thanks,

      Enrique

      Attachments:
      You must be logged in to view attached files.
    • #6859
      Jason
      Keymaster

      Hey @eflouret!

      Interesting. I just tested it out locally without issue. The scope of the field shouldn’t make any difference as it’s using a global WordPress function to retrieve the image; scope issues would only affect whether or not the correct picture is displayed at all.

      If you try a standard WordPress size, such as ‘medium’, does that work? Otherwise, try digging into the field at /piklist/parts/fields/file.php to see if the $options['preview_size'] is getting overwritten or something.

    • #6860
      eflouret
      Member

      ok, after some hours of trying to figure the file.php out, I realized that if I save draft or publish eh post, the preview images are shown in their correct size. But that’s not what I meant.

      What I wanted to do is that when I close the add media modal the preview image is in the size I defined in the options without having to save the post to see it. If that’s not possible, then it’s not big deal, I can live without it.

      Regarding the sanitation, I added the code you sent me and I don’t see any difference, I was able to choose and add multiple images.

      Thanks.

      Enrique

    • #6862
      Jason
      Keymaster

      Ahh.. I see what you’re saying. I don’t believe the preview size is passed along to the javascript that later renders the images as you add them. I’ll make a ticket for this, as it really should be consistent.

      Thanks for reporting this, Enrique!

Viewing 6 reply threads
  • You must be logged in to reply to this topic.