Как я могу отображать изображения, похожие на фотосеты Tumblr?

Question

Я конвертирую блог моей жены в Wordpress и хочу отобразить галереи изображений, аналогичные тем, которые отображаются на Tumblr. Вот пример макета: http://bobbyandmaura.com/post/8195960363/photoset_iframe/bobbyandmaura/tumblr_lp2nebJFEW1qhd8ae/500

Я могу обрабатывать разметку и CSS для отображения изображений. Мне нужна помощь, чтобы понять, как я могу создать это динамически. Tumblr достаточно умен, чтобы динамически отображать различное количество изображений, при этом всегда заполняя все пространство. Вот еще один пример с меньшим количеством изображений: http://bobbyandmaura.com/post/6700400507/photoset_iframe/bobbyandmaura/tumblr_ln23gi8EqU1qhd8ae/500

Надеюсь, я смогу использовать математику для создания динамического решения, поэтому мне не нужно вручную создавать кучу разных возможностей.

Answer 1

OK.Решаемые.У меня есть возможность показать галерею WP как фотосет Tumblr.Он не такой настраиваемый, как Tumblr, он будет показывать только первое изображение как изображение обложки (больше) и остальные изображения в виде мелкой сетки.

---

Вам необходимо отредактировать wp-includes / media.php файлЕсли ваша тема, как и любой другой файл галереи, вы должны отредактировать ее.Отредактируйте на свой страх и риск, так как это основной файл WP.Если вы обновите свой WP в будущем, вам придется сделать это снова.Извините, у меня нет времени, чтобы написать плагин.

---

Выполнить поиск «foreach ($ attachments as $ id => $ attachment)» в wp-includes / media.php и изменить следующее (заменитьцикл foreach)

$ccg = 1;   
foreach ( $attachments as $id => $attachment ) {
        if($ccg == 1)
        {
            $link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, large, false, false) : wp_get_attachment_link($id, $size, true, false);
        }
        else
        {
            $link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);
        }
        $output .= "<{$itemtag} class='gallery-item'>";
        $output .= "
            <{$icontag} class='gallery-icon'>
                $link
            </{$icontag}>";
        if ( $captiontag && trim($attachment->post_excerpt) ) {
            $output .= "
                <{$captiontag} class='wp-caption-text gallery-caption'>
                " . wptexturize($attachment->post_excerpt) . "
                </{$captiontag}>";
        }
        $output .= "</{$itemtag}>";
        if ( ( $columns > 1 && ++$i % $columns == 1) || $ccg == 1 )
            $output .= '<br style="clear: both" />';
        $ccg++;

    }

Демонстрационную галерею можно найти по адресу http://ontrip.in/the-ca-cur-badi-forest-resort-gorumara/

---

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

Answer 2

Мой друг Виктор Гонсалес разработал Aurum для управления пропорциями и получения этого приятного эффекта.Вы можете получить его здесь: https://github.com/aficiomaquinas/Aurum-CSS

Затем вы дополнительно сгруппируете изображения по аналогичным пропорциям (ш / ч) с допуском 0,2.Таким образом, <0,2 - это одна группа <0,4, другая - <0,6 и т. Д. Затем есть случайная вероятность появления их в 1,2,3 столбцах / строке. </p>