Как вставить каждое изображение галереи в определенный div? Wordpress

Question

Я пытаюсь показать reproduce this Masonry. Для этого я создал CPT. «CPT - Галерея».

Во-первых, я думал о создании персонализированного типа сообщений для публикации всех изображений вместе.

МОЙ CPT:

--- >>> Название < < < ---
--- >>> изображение по умолчанию - эскиз < < < ---
--- >>> cotent < < < ---
--- >>> изображения < < < ---
--- >>> изображения < < < ---
...

Первые три раздела (название, изображение по умолчанию и содержание) являются основами. Готов.

После этого я подумал об использовании пользовательского метабокса и добавьте каждый URL-адрес изображения. Однако добавить URL по URL-адресу нет ничего интуитивного и намного больше работы для пользователя, будь то новичок или продвинутый. Кроме того, количество будет варьироваться, фотографии могут быть равны 1, может быть 5 может составлять 10 и так далее.

Я видел, что есть plugin for WordPress, но плагин не является полной шириной и когда я устанавливаю css плагина быть полной шириной, то Mansory получает несколько ошибок в окне просмотра изменения размера.

Отметив работу плагина и вашего кода, я увидел, что в каждом посте плагин использует собственную галерею редактора WordPress. Он принимает сгенерированный короткий код (внутри the_content();) и отображает изображения в классах Mansory.

Я пытаюсь сделать это, но безуспешно.

В любом случае, что я хочу делать?

-> Поймай шорткод из WordPress галереи и отображать каждое изображение в течение div с моей masonry < -

Пример логического:
SHORTCODE галереи: [gallery ids="1,2,3,4,5,6"]

Я принимаю каждое изображение и дисплей в петле.

Практический пример:

Здесь я выполнить цикл с div с о masonry.

<?php 
    $args = array('post_type' => 'gallery', 'showposts' => 1); 
    $wp_query = new WP_Query($args); 
    if(have_posts()): 
    while ($wp_query -> have_posts()) : $wp_query -> the_post(); 
?> 

<div class="item"> 
    <figure style="margin: 0px !important" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
     <a href="<?php IMAGE 1 OF GALLERY WP; ?>" itemprop="contentUrl" data-size="1800x1200" data-index="0"> 
      <img src="<?php IMAGE 1 OF GALLERY WP; ?>" class="image" itemprop="thumbnail" alt=""> 
     </a> 
    </figure> 
</div> 

С петлей появится все изображения в галерее.

<div class="item"> 
    <figure style="margin: 0px !important" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
     <a href="<?php IMAGE 2 OF GALLERY WP; ?>" itemprop="contentUrl" data-size="1800x1200" data-index="0"> 
      <img src="<?php IMAGE 2 OF GALLERY WP; ?>" class="image" itemprop="thumbnail" alt=""> 
     </a> 
    </figure> 
</div> 

<div class="item"> 
    <figure style="margin: 0px !important" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
     <a href="<?php IMAGE 3 OF GALLERY WP; ?>" itemprop="contentUrl" data-size="1800x1200" data-index="0"> 
      <img src="<?php IMAGE 3 OF GALLERY WP; ?>" class="image" itemprop="thumbnail" alt=""> 
     </a> 
    </figure> 
</div> 

and so on..... 

Как я могу это сделать?

Answer 1

Вы были почти там. Вам просто нужно получить и просмотреть изображения галереи. Что-то вроде этого должно работать на вас. Справка: https://codex.wordpress.org/Function_Reference/get_post_gallery_images

<?php 
global $post; 
$gallery = get_post_gallery_images($post); 

foreach($gallery as $image_url) { 
?> 
<div class="item"> 
    <figure style="margin: 0px !important" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
     <a href="<?php echo $image_url ?>" itemprop="contentUrl" data-size="1800x1200" data-index="0"> 
      <img src="<?php echo $image_url ?>" class="image" itemprop="thumbnail" alt=""> 
     </a> 
    </figure> 
</div> 
<?php 
} 
?>