There is a custom type of post "images". There you can and should add only pictures or YouTube videos without text and so on. Pictures can be set. I will add the video using the Advanced Custom Field plugin (I use it for other similar tasks). But I do not know how to add these pictures there. With this plugin, I can not, because you can add only a few fields with pictures. At the bottom of the layout screen, how should look like a post "image" in the end.

enter image description here

  • one
    I think you need to hire a web developer - XYZ
  • @XYZ I am a web developer, just a beginner, and I don’t know how to do it - Nick
  • By default, you can add as many pictures as you like. And the layout is done in the theme template. Or the plugin should slip the desired template. - SeVlad
  • This is done via meta fields, without a plugin. - Daniel

2 answers 2

Paste this code into function.php

The code adds the gallery to the usual entries. If custom post type change "post" to your type, for example "images"

function add_gallery(){ add_meta_box( 'catalog-product-images', __( 'Gallery', 'site_name' ), 'metabox_galler', 'post', 'side', 'low' ); //Тип поста post или images } add_action('add_meta_boxes', 'add_gallery'); function metabox_galler($post){ ?> <div id="images_container"> <ul class="images"> <?php global $post; if ( metadata_exists( 'post', $post->ID, '_image_gallery' ) ) {//Тип поста post или images $image_gallery = get_post_meta( $post->ID, '_image_gallery', true ); } else { $attachment_ids = get_posts( 'post_parent=' . $post->ID . '&numberposts=-1&post_type=attachment&orderby=menu_order&order=ASC&post_mime_type=image&fields=ids&meta_value=0' ); $attachment_ids = array_diff( $attachment_ids, array( get_post_thumbnail_id() ) ); $image_gallery = implode( ',', $attachment_ids ); } $attachments = array_filter( explode( ',', $image_gallery ) ); if ( $attachments ) { foreach ( $attachments as $attachment_id ) { echo '<li class="image" data-attachment_id="' . esc_attr( $attachment_id ) . '"> ' . wp_get_attachment_image( $attachment_id, 'thumbnail' ) . ' <ul class="actions"> <li><a href="#" class="delete tips" data-tip="' . __( 'Delete image', 'site_name' ) . '">' . __( 'Delete', 'site_name' ) . '</a></li> </ul> </li>'; } } ?> </ul> <input type="hidden" id="image_gallery" name="image_gallery" value="<?php echo esc_attr( $image_gallery ); ?>" /> </div> <p class="add_images hide-if-no-js"> <a href="#" data-choose="<?php _e( 'Add Images to Gallery', 'site_name' ); ?>" data-update="<?php _e( 'Add to gallery', 'site_name' ); ?>" data-delete="<?php _e( 'Delete image', 'site_name' ); ?>" data-text="<?php _e( 'Delete', 'site_name' ); ?>"><?php _e( 'Add Gallery images', 'site_name' ); ?></a> </p> <style> #catalog-product-images .inside { margin: 0; padding: 0; } #catalog-product-images .inside #images_container { padding: 0 0 0 9px; } #catalog-product-images .inside #images_container ul:after, #catalog-product-images .inside #images_container ul:before { content: " "; display: table; } #catalog-product-images .inside #images_container ul:after { clear: both; } #catalog-product-images .inside #images_container ul:after, #catalog-product-images .inside #images_container ul:before { content: " "; display: table; } #catalog-product-images .inside #images_container ul { margin: 0; padding: 0; } #catalog-product-images .inside #images_container ul li.add, #catalog-product-images .inside #images_container ul li.image, #catalog-product-images .inside #images_container ul li.wc-metabox-sortable-placeholder { background: #f7f7f7 none repeat scroll 0 0; border: 1px solid #d5d5d5; -webkit-border-radius: 2px; border-radius: 2px; box-sizing: border-box; cursor: move; float: left; margin: 9px 9px 0 0; position: relative; width: 80px; } #catalog-product-images .inside #images_container ul li.add img, #catalog-product-images .inside #images_container ul li.image img, #catalog-product-images .inside #images_container ul li.wc-metabox-sortable-placeholder img { display: block; height: auto; width: 100%; } #catalog-product-images .inside #images_container ul ul.actions { display: none; padding: 2px; position: absolute; right: -8px; top: -8px; } #catalog-product-images .inside #images_container ul ul.actions li { float: right; margin: 0 0 0 2px; } #catalog-product-images .inside #images_container ul ul.actions li a { display: block; height: 0; margin: 0; overflow: hidden; width: 1em; } #catalog-product-images .inside #images_container ul ul.actions li a.tips { cursor: pointer; } #catalog-product-images .inside #images_container ul ul.actions li a.delete { display: block; font-size: 1.4em; height: 1em; position: relative; text-indent: -9999px; width: 1em; } #catalog-product-images .inside #images_container ul ul.actions li a.delete:before { background-color: #000; -webkit-border-radius: 100%; border-radius: 100%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); color: #fff; content: "X"; font-family: Verdana; font-variant: normal; font-weight: 400; height: 100%; left: 0; line-height: 1; margin: 0; position: absolute; text-align: center; text-indent: 0; text-transform: none; top: 0; width: 100%; } #catalog-product-images .inside #images_container ul ul.actions li a.delete:hover:before{background-color:#a00} #catalog-product-images .inside #images_container ul li:hover ul.actions{display:block} #catalog-product-images .inside .add_images { padding: 0 12px 12px; } </style> <script> jQuery(function($){ var gallery_frame; var $image_gallery_ids = $('#image_gallery'); var $images = $('#images_container ul.images'); jQuery('.add_images').on( 'click', 'a', function( event ) { var $el = $(this); var attachment_ids = $image_gallery_ids.val(); event.preventDefault(); if ( gallery_frame ) { gallery_frame.open(); return; } gallery_frame = wp.media.frames.gallery = wp.media({ // Set the title of the modal. title: $el.data('choose'), button: { text: $el.data('update'), }, states : [ new wp.media.controller.Library({ title: $el.data('choose'), filterable : 'all', multiple: true, }) ] }); gallery_frame.on( 'select', function() { var selection = gallery_frame.state().get('selection'); selection.map( function( attachment ) { attachment = attachment.toJSON(); if ( attachment.id ) { attachment_ids = attachment_ids ? attachment_ids + "," + attachment.id : attachment.id; attachment_image = attachment.sizes.thumbnail ? attachment.sizes.thumbnail.url : attachment.url; $images.append('\ <li class="image" data-attachment_id="' + attachment.id + '">\ <img src="' + attachment_image + '" />\ <ul class="actions">\ <li><a href="#" class="delete" title="' + $el.data('delete') + '">' + $el.data('text') + '</a></li>\ </ul>\ </li>'); } }); $image_gallery_ids.val( attachment_ids ); }); gallery_frame.open(); }); $images.sortable({ items: 'li.image', cursor: 'move', scrollSensitivity:40, forcePlaceholderSize: true, forceHelperSize: false, helper: 'clone', opacity: 0.65, placeholder: 'wc-metabox-sortable-placeholder', start:function(event,ui){ ui.item.css('background-color','#f6f6f6'); }, stop:function(event,ui){ ui.item.removeAttr('style'); }, update: function(event, ui) { var attachment_ids = ''; $('#images_container ul li.image').css('cursor','default').each(function() { var attachment_id = jQuery(this).attr( 'data-attachment_id' ); attachment_ids = attachment_ids + attachment_id + ','; }); $image_gallery_ids.val( attachment_ids ); } }); // Remove images $('#images_container').on( 'click', 'a.delete', function() { $(this).closest('li.image').remove(); var attachment_ids = ''; $('#images_container ul li.image').css('cursor','default').each(function() { var attachment_id = jQuery(this).attr( 'data-attachment_id' ); attachment_ids = attachment_ids + attachment_id + ','; }); $image_gallery_ids.val( attachment_ids ); // remove any lingering tooltips $( '#tiptip_holder' ).removeAttr( 'style' ); $( '#tiptip_arrow' ).removeAttr( 'style' ); return false; }); }); </script> <?php } function update_gallery( $post_id, $post, $update ) { $slug = 'post'; //Тип поста post или images if ( $slug != $post->post_type ) { return; } $attachment_ids = isset( $_POST['image_gallery'] ) ? array_filter( explode( ',', sanitize_text_field( $_POST['image_gallery'] ) ) ) : array(); update_post_meta( $post_id, '_image_gallery', implode( ',', $attachment_ids ) ); } add_action( 'save_post', 'update_gallery', 10, 3 ); add_image_size('shop_catalog', 360, 240, true); add_image_size('shop_single', 555, 370, true); add_image_size('icon_single', 68, 45, true); ?>

Result:

enter image description here

  • And so every time you change the theme :) Plug-ins exist for solving the functionality. You can even write them yourself by issuing the same code and be independent of the topic. - SeVlad
  • I agree, if the themes change constantly and part. It is possible on the basis of this code (for example) to make your plugin. And also the question arises, how often do you change the topic in your projects on the VP?) - Daniel
  • The question is not the frequency, but the correctness of the decisions. The theme should be only that which is characteristic only for a specific topic - layout, for example. Site functionality should be in plugins. It also affects the work (processing order). Not to mention hemmoore when changing the topic and getting rid of problems with little blood after the next update - you can disable the plug-in via FTP and this is not at all the same as changing the fallen topic. In general, using the function file for the global functionality of the site is a bad practice. - SeVlad
  • There is such an understanding as a child theme from the main theme; when you update the main theme, your functionality remains the same. There are such programmers (haters of third-party plug-ins and plug-ins at all) who take and insert small plug-ins into the theme itself. - Daniel
  • The mechanism of child themes has nothing to do with the above. It is in a different plane, regardless of the presence of a daughter. Updates that can break something not only the parent theme, but also the VI itself and plug-ins that can conflict with these manual inserts. - SeVlad Nov.

The ACF plug-in in the PRO version has a Gallery field in which you can add an arbitrary number of images. This is how some of the settings for this field look like:

enter image description here

  • Thank you, and if, instead of the usual version, I put PRO - will my old custom fields not be removed from the base? - Nick
  • No, I set. But! just in case, save a copy of the base before installing PRO - KAGG Design