Сломаны фотосеты в блоге Tumblr?

Question

Я был бы признателен, если бы кто-нибудь помог мне исправить мои фотосеты на моем Tumblr. Они просто укладывают друг на друга, когда я хочу, чтобы они были правильно выровнены. Я часами бродил по интернету, пытаясь решить эту проблему, и мне не повезло.

Это мой код Photoset - любая помощь будет высоко ценится!

{block:Photoset}
{block:if400pxPosts}{Photoset-400}{/block:if400pxPosts}
{block:if500pxPosts}{Photoset-500}{/block:if500pxPosts}
{block:Caption}{Caption}{/block:Caption}
{/block:Photoset}

И это тема, которую я сейчас использую: https://docs.google.com/file/d/0B2XVyxFzut4zRDFFWVctSzlNb3M/preview

И это мой блог с вышеупомянутой темой: https://chelengks.tumblr.com/

Вот пара примеров того, что я ищу:

Первый пример

Второй пример

Answer 1

Одним из решений может быть редактирование кода фотосета для рендеринга. img теги вместо фотосета iframe модуль, а затем стиль их с максимальной шириной меньше половины ширины ввода, чтобы они обернуть. Что-то вроде этого:

{block:Photoset}
{block:Photos}
        <img src="{PhotoURL-500}" class="photoset-img" />
    {/block:Photos}
{block:Caption}{Caption}{/block:Caption}
{/block:Photoset}

И этот CSS:

.photoset-img {
    width: 190px;
}

Однако это может привести к тому, что большие изображения станут слишком маленькими, чтобы их можно было увидеть в деталях, и оставят место для фотосетов с фотографиями переменной высоты (см. Изображение ниже). )