Skip to content
Snippets Groups Projects
Select Git revision
  • 901cd64be0fe83d8a6ffe29f373eb86998696f0e
  • master default protected
  • devel
  • feature/add-escaping-to-templates
  • feature/add-priority-sorting
  • 3.3.0
  • 3.2.1
  • 3.2.0
  • 3.1.0
  • 3.0.0
  • 2.4.12
  • 2.4.11
  • 2.4.10
  • 2.4.9
  • 2.4.8
  • 2.4.7
  • 2.4.6
  • 2.4.5
  • 2.4.4
  • 2.4.2
  • 2.4.1
  • 2.4.0
  • 2.3.2
  • 2.3.1
  • 2.3
25 results

input-image.php

Blame
  • input-image.php 2.29 KiB
    <?php
    /**
     * @var \WPDesk\Forms\Field $field
     * @var string              $name_prefix
     * @var string              $value
     */
    
    $media_container_id = 'media_' . sanitize_key( $field->get_id() );
    ?>
    <div class="media-input-wrapper" id="<?php echo esc_attr( $media_container_id ); ?>">
    	<input type="hidden" class="image-field-value" value="<?php echo \esc_html( $value ); ?>"
    			name="<?php echo esc_attr( $name_prefix ) . '[' . esc_attr( $field->get_name() ) . ']'; ?>"
    			id="<?php echo esc_attr( $field->get_id() ); ?>"/>
    	<div class="custom-img-container">
    		<?php if ( $value ) : ?>
    			<img src="<?php echo \esc_url( $value ); ?>" alt="" width="100"/>
    		<?php endif; ?>
    	</div>
    	<p class="hide-if-no-js">
    		<a class="upload-custom-img 
    		<?php
    		if ( $value ) :
    			?>
    			hidden<?php endif ?>" href="<?php echo \esc_url( $value ); ?>">
    			<?php esc_html_e( 'Set image', 'wp-forms' ); ?>
    		</a>
    		<a class="delete-custom-img 
    		<?php
    		if ( ! $value ) :
    			?>
    			hidden<?php endif ?>" href="#">
    			<?php esc_html_e( 'Remove image', 'wp-forms' ); ?>
    		</a>
    	</p>
    </div>
    <script>
    	jQuery( function ( $ ) {
    		var frame,
    			metaBox = $( '#<?php echo esc_attr( $media_container_id ); ?>' ),
    			addImgLink = metaBox.find( '.upload-custom-img' ),
    			delImgLink = metaBox.find( '.delete-custom-img' ),
    			imgContainer = metaBox.find( '.custom-img-container' ),
    			imgIdInput = metaBox.find( '.image-field-value' );
    
    		addImgLink.on( 'click', function ( event ) {
    			event.preventDefault();
    			if ( frame ) {
    				frame.open();
    				return;
    			}
    
    			frame = wp.media( {
    				title: "<?php esc_html_e( 'Select or Upload Media', 'wp-forms' ); ?>",
    				button: {
    					text: "<?php esc_html_e( 'Use this media', 'wp-forms' ); ?>"
    				},
    				library: {
    					type: ['image']
    				},
    				multiple: false
    			} );
    
    			frame.on( 'select', function () {
    				var attachment = frame.state().get( 'selection' ).first().toJSON();
    				imgContainer.append( '<img src="' + attachment.url + '" alt="" width="100" />' );
    				imgIdInput.val( attachment.url );
    				addImgLink.addClass( 'hidden' );
    				delImgLink.removeClass( 'hidden' );
    			} );
    			frame.open();
    		} );
    
    		delImgLink.on( 'click', function () {
    			imgContainer.html( '' );
    			addImgLink.removeClass( 'hidden' );
    			delImgLink.addClass( 'hidden' );
    			imgIdInput.val( '' );
    			return false;
    		} );
    
    	} );
    </script>