Сортировка изображений

vsklyarenko · 21 Июл 2020

Доброго времени суток форумчане сделал плагин на основе коде найденного в просторах тернета который дает возможность добавлять в записи дополнительные фото, появилась необходимость сортировать картинки в заданном порядке для этого добавил переменную $gallery_data['image_count'] но как сортировать по ней не могу придумать, может подскажете в какую сторону копать

Код:

add_action( 'admin_init', 'add_post_gallery_so_14445904' );
add_action( 'add_meta_boxes_page', 'add_page_gallery_so_14445904' );
add_action( 'admin_head-post.php', 'print_scripts_so_14445904' );
add_action( 'admin_head-post-new.php', 'print_scripts_so_14445904' );
add_action( 'save_post', 'update_post_gallery_so_14445904', 10, 2 );



/**
 * Add custom Meta Box
 */

// Add meta box to custom posts
function add_post_gallery_so_14445904()
{
        
    add_meta_box(
        'post_gallery',
        'Галерея для Tixon',
        'post_gallery_options_so_14445904',
         'post',
        'normal',
        'core'
    );
}



/**
 * Print the Meta Box content
 */
function post_gallery_options_so_14445904()
{
    global $post;
    $gallery_data = get_post_meta( $post->ID, 'gallery_data', true );

    // Use nonce for verification
    wp_nonce_field( plugin_basename( __FILE__ ), 'noncename_so_14445904' );

    ?>
<?php echo 'Количество элементов > ', count( $gallery_data['image_url'] );?>
    
    <div id="dynamic_form">

        <div id="field_wrap">
        <?php

        if ( isset( $gallery_data['image_url'] ) )
        {
            for( $i = 0; $i < count( $gallery_data['image_url'] ); $i++ )
            {
        
            ?>

            <div class="field_row">

              <div class="field_left">
                <div class="form_field">
                  <!--<label>Image URL</label>-->
                  <input type="hidden"
                         class="meta_image_url"
                         name="gallery[image_url][]"
                         value="<?php esc_html_e( $gallery_data['image_url'][$i] ); ?>"
                  />
                  <input type="hidden"
                         class="meta_image_id"
                         name="gallery[image_id][]"
                         value="<?php esc_html_e( $gallery_data['image_id'][$i] ); ?>"
                  />
                </div>
                <div class="form_field" style="margin-bottom: 20px">
                  <label>Описание изображения</label>
                  <textarea
                         class="meta_image_desc"
                         name="gallery[image_desc][]"
                         rows="1"
                         style="width: 100%"><?php esc_html_e( $gallery_data['image_desc'][$i] ); ?></textarea>
                </div>
                       <div class="form_field" style="margin-bottom: 20px">
                  <label>Ссылка на Youtube видео</label>
                  <textarea
                         class="meta_image_desc"
                         name="gallery[href_url][]"
                         rows="1"
                         style="width: 100%"><?php esc_html_e( $gallery_data['href_url'][$i] ); ?></textarea>
                </div>

                <input class="button" type="button" value="Выбрать изображение" onclick="add_image(this)" />&nbsp;&nbsp;&nbsp;
                <input class="button" type="button" value="Удалить" onclick="remove_field(this)" />
              </div>

              <div class="field_right image_wrap">
                <img src="<?php esc_html_e( $gallery_data['image_url'][$i] ); ?>" />
          <input type="text" size="10" class="meta_image_count" name="gallery[image_count][]" value="<?php esc_html_e( $gallery_data['image_count'][$i] );  ?>">
              </div>
              <div class="clear" /></div>
            </div>
            <?php
            } // endif
        } // endforeach
        ?>
        </div>

        <div style="display:none" id="master-row">
        <div class="field_row">
            <div class="field_left">
                <div class="form_field">
                    <!--<label>Image URL</label>-->
                    <input class="meta_image_url" value=""  name="gallery[image_url][]" />
                    <input class="meta_image_id" value=""  name="gallery[image_id][]" />
                </div>
                <div class="form_field" style="margin-bottom: 20px">
                    <label>Описание изображения</label>
                    <textarea class="meta_image_desc" name="gallery[image_desc][]" rows="3" style="width: 100%"></textarea>
                </div>
                    <div class="form_field" style="margin-bottom: 20px">
                    <label>Ссылка на Youtube видео</label>
                    <textarea class="meta_image_href_url" name="gallery[href_url][]" rows="3" style="width: 100%"></textarea>
                </div>
                <input type="button" class="button" value="Выбрать изображение" onclick="add_image(this)" />&nbsp;&nbsp;&nbsp;
                <input class="button" type="button" value="Удалить" onclick="remove_field(this)" />
            </div>
            <div class="field_right image_wrap">

            <input type="text" size="10" class="meta_image_count" name="gallery[image_count][]" value="">
            </div>
            <div class="clear"></div>
        </div>
        </div>

        <div id="add_field_row">
          <input class="button" type="button" value="Добавить доплнительное поле" onclick="add_field_row();" />
        </div>
        <?php if ( 'trend' == get_post_type( $post->ID ) ) { ?>
        <p style="color: #a00;">Make sure the number if images you add is a <b>multiple of 5</b>.</p>
        <?php } ?>
    </div>
    <?php
}

/**
 * Print styles and scripts
 */
function print_scripts_so_14445904()
{
    // Check for correct post_type
     global $post;
    if( 'post' != $post->post_type )
        return;
    ?> 
    <style type="text/css">
      .field_left {
        float:left;
        width: 85%;
        padding-right: 20px;
        box-sizing:border-box; 
      }
      .field_right {
        float:left;
        width: 15%;
      }
      .image_wrap img {
          max-width: 100%;
          max-height: 200px;
      }
      #dynamic_form input[type=text] {
        width:100%;
      }
      #dynamic_form .field_row {
        border:1px solid #cecece;
        margin-bottom:10px;
        padding:10px;
      }
      #dynamic_form label {
        display: block;
        margin-bottom: 5px;
      }
    </style>

    <script type="text/javascript">
        function add_image(obj) {

            var parent=jQuery(obj).parent().parent('div.field_row');
            var inputField = jQuery(parent).find("input.meta_image_url");
            var inputFieldID = jQuery(parent).find("input.meta_image_id");
            var fileFrame = wp.media.frames.file_frame = wp.media({
                multiple: false
            });
            fileFrame.on('select', function() {
                var selection = fileFrame.state().get('selection').first().toJSON();
                inputField.val(selection.url);
                inputFieldID.val(selection.id);
                jQuery(parent)
                .find("div.image_wrap")
                .html('<img src="'+selection.url+'" />');
            });
            fileFrame.open();
        //});
        };

        function remove_field(obj) {
            var parent=jQuery(obj).parent().parent();
            parent.remove();
        }

         function add_field_row() {
            var row = jQuery('#master-row').html();
            jQuery(row).appendTo('#field_wrap');
        }
    </script>
    <?php
}

/**
 * Save post action, process fields
 */
function update_post_gallery_so_14445904( $post_id, $post_object )
{
    // Doing revision, exit earlier **can be removed**
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) 
        return;

    // Doing revision, exit earlier
    if ( 'revision' == $post_object->post_type )
        return;

    // Verify authenticity
    if ( !wp_verify_nonce( $_POST['noncename_so_14445904'], plugin_basename( __FILE__ ) ) )
        return;

  if ( 'post' != $_POST['post_type'] )
        return;

    if ( $_POST['gallery'] )
    {
        // Build array for saving post meta
        $gallery_data = array();
        for ($i = 0; $i < count( $_POST['gallery']['image_url'] ); $i++ )
        {
            if ( '' != $_POST['gallery']['image_url'][ $i ] )
            {
                $gallery_data['image_url'][]  = $_POST['gallery']['image_url'][ $i ];
                $gallery_data['image_id'][]  = $_POST['gallery']['image_id'][ $i ];
                $gallery_data['image_desc'][] = $_POST['gallery']['image_desc'][ $i ];
                  $gallery_data['href_url'][] = $_POST['gallery']['href_url'][ $i ];
                    $gallery_data['image_count'][] = $_POST['gallery']['image_count'][ $i ];
            }
        }

        if ( $gallery_data )
            update_post_meta( $post_id, 'gallery_data', $gallery_data );
        else
            delete_post_meta( $post_id, 'gallery_data' );
    }
    // Nothing received, all fields are empty, delete option
    else
    {
        delete_post_meta( $post_id, 'gallery_data' );
    }
}

vsklyarenko · 22 Июл 2020

vsklyarenko написал(а):

Доброго времени суток форумчане сделал плагин на основе коде найденного в просторах тернета который дает возможность добавлять в записи дополнительные фото, появилась необходимость сортировать картинки в заданном порядке для этого добавил переменную $gallery_data['image_count'] но как сортировать по ней не могу придумать, может подскажете в какую сторону копать

Код:

add_action( 'admin_init', 'add_post_gallery_so_14445904' );
add_action( 'add_meta_boxes_page', 'add_page_gallery_so_14445904' );
add_action( 'admin_head-post.php', 'print_scripts_so_14445904' );
add_action( 'admin_head-post-new.php', 'print_scripts_so_14445904' );
add_action( 'save_post', 'update_post_gallery_so_14445904', 10, 2 );



/**
* Add custom Meta Box
*/

// Add meta box to custom posts
function add_post_gallery_so_14445904()
{
       
    add_meta_box(
        'post_gallery',
        'Галерея для Tixon',
        'post_gallery_options_so_14445904',
         'post',
        'normal',
        'core'
    );
}



/**
* Print the Meta Box content
*/
function post_gallery_options_so_14445904()
{
    global $post;
    $gallery_data = get_post_meta( $post->ID, 'gallery_data', true );

    // Use nonce for verification
    wp_nonce_field( plugin_basename( __FILE__ ), 'noncename_so_14445904' );

    ?>
<?php echo 'Количество элементов > ', count( $gallery_data['image_url'] );?>
   
    <div id="dynamic_form">

        <div id="field_wrap">
        <?php

        if ( isset( $gallery_data['image_url'] ) )
        {
            for( $i = 0; $i < count( $gallery_data['image_url'] ); $i++ )
            {
       
            ?>

            <div class="field_row">

              <div class="field_left">
                <div class="form_field">
                  <!--<label>Image URL</label>-->
                  <input type="hidden"
                         class="meta_image_url"
                         name="gallery[image_url][]"
                         value="<?php esc_html_e( $gallery_data['image_url'][$i] ); ?>"
                  />
                  <input type="hidden"
                         class="meta_image_id"
                         name="gallery[image_id][]"
                         value="<?php esc_html_e( $gallery_data['image_id'][$i] ); ?>"
                  />
                </div>
                <div class="form_field" style="margin-bottom: 20px">
                  <label>Описание изображения</label>
                  <textarea
                         class="meta_image_desc"
                         name="gallery[image_desc][]"
                         rows="1"
                         style="width: 100%"><?php esc_html_e( $gallery_data['image_desc'][$i] ); ?></textarea>
                </div>
                       <div class="form_field" style="margin-bottom: 20px">
                  <label>Ссылка на Youtube видео</label>
                  <textarea
                         class="meta_image_desc"
                         name="gallery[href_url][]"
                         rows="1"
                         style="width: 100%"><?php esc_html_e( $gallery_data['href_url'][$i] ); ?></textarea>
                </div>

                <input class="button" type="button" value="Выбрать изображение" onclick="add_image(this)" />&nbsp;&nbsp;&nbsp;
                <input class="button" type="button" value="Удалить" onclick="remove_field(this)" />
              </div>

              <div class="field_right image_wrap">
                <img src="<?php esc_html_e( $gallery_data['image_url'][$i] ); ?>" />
          <input type="text" size="10" class="meta_image_count" name="gallery[image_count][]" value="<?php esc_html_e( $gallery_data['image_count'][$i] );  ?>">
              </div>
              <div class="clear" /></div>
            </div>
            <?php
            } // endif
        } // endforeach
        ?>
        </div>

        <div style="display:none" id="master-row">
        <div class="field_row">
            <div class="field_left">
                <div class="form_field">
                    <!--<label>Image URL</label>-->
                    <input class="meta_image_url" value=""  name="gallery[image_url][]" />
                    <input class="meta_image_id" value=""  name="gallery[image_id][]" />
                </div>
                <div class="form_field" style="margin-bottom: 20px">
                    <label>Описание изображения</label>
                    <textarea class="meta_image_desc" name="gallery[image_desc][]" rows="3" style="width: 100%"></textarea>
                </div>
                    <div class="form_field" style="margin-bottom: 20px">
                    <label>Ссылка на Youtube видео</label>
                    <textarea class="meta_image_href_url" name="gallery[href_url][]" rows="3" style="width: 100%"></textarea>
                </div>
                <input type="button" class="button" value="Выбрать изображение" onclick="add_image(this)" />&nbsp;&nbsp;&nbsp;
                <input class="button" type="button" value="Удалить" onclick="remove_field(this)" />
            </div>
            <div class="field_right image_wrap">

            <input type="text" size="10" class="meta_image_count" name="gallery[image_count][]" value="">
            </div>
            <div class="clear"></div>
        </div>
        </div>

        <div id="add_field_row">
          <input class="button" type="button" value="Добавить доплнительное поле" onclick="add_field_row();" />
        </div>
        <?php if ( 'trend' == get_post_type( $post->ID ) ) { ?>
        <p style="color: #a00;">Make sure the number if images you add is a <b>multiple of 5</b>.</p>
        <?php } ?>
    </div>
    <?php
}

/**
* Print styles and scripts
*/
function print_scripts_so_14445904()
{
    // Check for correct post_type
     global $post;
    if( 'post' != $post->post_type )
        return;
    ?>
    <style type="text/css">
      .field_left {
        float:left;
        width: 85%;
        padding-right: 20px;
        box-sizing:border-box;
      }
      .field_right {
        float:left;
        width: 15%;
      }
      .image_wrap img {
          max-width: 100%;
          max-height: 200px;
      }
      #dynamic_form input[type=text] {
        width:100%;
      }
      #dynamic_form .field_row {
        border:1px solid #cecece;
        margin-bottom:10px;
        padding:10px;
      }
      #dynamic_form label {
        display: block;
        margin-bottom: 5px;
      }
    </style>

    <script type="text/javascript">
        function add_image(obj) {

            var parent=jQuery(obj).parent().parent('div.field_row');
            var inputField = jQuery(parent).find("input.meta_image_url");
            var inputFieldID = jQuery(parent).find("input.meta_image_id");
            var fileFrame = wp.media.frames.file_frame = wp.media({
                multiple: false
            });
            fileFrame.on('select', function() {
                var selection = fileFrame.state().get('selection').first().toJSON();
                inputField.val(selection.url);
                inputFieldID.val(selection.id);
                jQuery(parent)
                .find("div.image_wrap")
                .html('<img src="'+selection.url+'" />');
            });
            fileFrame.open();
        //});
        };

        function remove_field(obj) {
            var parent=jQuery(obj).parent().parent();
            parent.remove();
        }

         function add_field_row() {
            var row = jQuery('#master-row').html();
            jQuery(row).appendTo('#field_wrap');
        }
    </script>
    <?php
}

/**
* Save post action, process fields
*/
function update_post_gallery_so_14445904( $post_id, $post_object )
{
    // Doing revision, exit earlier **can be removed**
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
        return;

    // Doing revision, exit earlier
    if ( 'revision' == $post_object->post_type )
        return;

    // Verify authenticity
    if ( !wp_verify_nonce( $_POST['noncename_so_14445904'], plugin_basename( __FILE__ ) ) )
        return;

  if ( 'post' != $_POST['post_type'] )
        return;

    if ( $_POST['gallery'] )
    {
        // Build array for saving post meta
        $gallery_data = array();
        for ($i = 0; $i < count( $_POST['gallery']['image_url'] ); $i++ )
        {
            if ( '' != $_POST['gallery']['image_url'][ $i ] )
            {
                $gallery_data['image_url'][]  = $_POST['gallery']['image_url'][ $i ];
                $gallery_data['image_id'][]  = $_POST['gallery']['image_id'][ $i ];
                $gallery_data['image_desc'][] = $_POST['gallery']['image_desc'][ $i ];
                  $gallery_data['href_url'][] = $_POST['gallery']['href_url'][ $i ];
                    $gallery_data['image_count'][] = $_POST['gallery']['image_count'][ $i ];
            }
        }

        if ( $gallery_data )
            update_post_meta( $post_id, 'gallery_data', $gallery_data );
        else
            delete_post_meta( $post_id, 'gallery_data' );
    }
    // Nothing received, all fields are empty, delete option
    else
    {
        delete_post_meta( $post_id, 'gallery_data' );
    }
}

как вообще сортировать такие данные в Wordpress, подскажите пожалуйста
Вывод осуществляю таким кодом

PHP:

<?php
if ( '' != get_post_meta( get_the_ID(), 'gallery_data', true ) ) { $gallery = get_post_meta( get_the_ID(), 'gallery_data', true ); }



if ( isset( $gallery['image_id'] ) ) :

    for( $i = 0; $i < count( $gallery['image_id'] ); $i++ ) {

        if ( '' != $gallery['image_id'][$i] ) {
 


            if ( isset($gallery['image_desc'][$i]) ) //echo $gallery['image_desc'][$i];
             if ( isset($gallery['href_url'][$i]) ) //echo $gallery['href_url'][$i];
               ?>
        <div class="col-lg-2 col-md-4 col-6 thumb">
            <div class="itm">
    
 
        <?php
$myimg =wp_get_attachment_image_url( $gallery['image_id'][$i], 'gallery_large');
 $gal_url =$gallery['href_url'][$i];

//echo $myimg;

   if (   !empty ($myimg)  && ! empty ($gal_url)){

  echo "<a data-fancybox='gallery'  href=".$gallery['href_url'][$i].">";

           echo wp_get_attachment_image( $gallery['image_id'][$i], 'gallery_large' ); ?>
      <img src="<?php echo get_template_directory_uri(); ?>/images/yotub-play-button.svg" class="yotub-1 yotub ">
       </a>


  <?php


}

elseif ( ! empty ($myimg) ){

            echo "<a data-fancybox='gallery'  href=".$myimg.">";
           echo wp_get_attachment_image( $gallery['image_id'][$i], 'gallery_large' ); ?></a>
      
             <?php

         }

 
    else {


 echo "<a data-fancybox='gallery' class='gal_yot' href=".$gallery['href_url'][$i].">"; ?><img src="<?php echo get_template_directory_uri(); ?>/images/yotub-play-button.svg" class="yotub-1 yotub "></a> <?php
echo "yotub";
} ?>

           </div> </div> <?php

        }   
    }

endif;

Сортировка изображений

vsklyarenko

Новичок

Вложения

vsklyarenko

Новичок