- This topic has 6 replies, 2 voices, and was last updated 5 years, 7 months ago by
Jason.
-
AuthorPosts
-
-
June 29, 2016 at 12:28 pm #6852
eflouretMemberHi, 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. -
June 29, 2016 at 3:42 pm #6855
JasonKeymasterHey @eflouret!
I believe how you’re changing the preview size should work… Just to be clear,
newsleteris 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
limitsanitization: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!
-
June 29, 2016 at 3:48 pm #6856
JasonKeymasterIt isn’t in the new docs, yet, but you can read more on sanitization here: https://piklist.com/user-guide/docs/sanitizing-field-data/
-
June 29, 2016 at 4:31 pm #6857
eflouretMemberThanks 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. -
June 29, 2016 at 5:01 pm #6859
JasonKeymasterHey @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.phpto see if the$options['preview_size']is getting overwritten or something. -
June 29, 2016 at 8:20 pm #6860
eflouretMemberok, 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
-
June 30, 2016 at 10:38 am #6862
JasonKeymasterAhh.. 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!
-
-
AuthorPosts
- You must be logged in to reply to this topic.