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

Сегодня задача была очень простая:

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

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

display: inline-block;

Но все оказалось намного сложнее. На деле оказалось, что каждая фотография в галерее оборачивается в небольшой блок, которые невозможно уменьшить так, чтобы не задень внешний вид сайта, так как данный блок образовывал рамку вокруг изображения:

Блок одного изображения в галерее

Как видно на изображении, вокруг рамки есть некоторый узор-рамка, который задан этому блоку с помощью свойства и внутренних отступов:

background: url('/img/bgimage.jpg') left top no-repeat;

Данный код просто задает фоновое изображение блока, при этом указывает отображение этого фона в левом верхнем углу. И также запрещает повтор изображения и по горизонтали и по вертикали.

Поэтому в данном случае простым изменением ширины блока одной картинки тут не обойтись.

Как же поместить три картинки в маленький блок?

Все эти картинки были помещены в контейнер с шириной 1000 пикселей:

#vcenter {
    margin: auto auto;
    width: 1000px;
}

В данную ширину, конечно же, три изображения с рамками вместить никак невозможно. Поэтому было решено обернуть эти картинки в общий блок и далее уже работать с ним.

Система правления контентом сайта(CMS) была мне не известна, более того, мне показалось, что она является самописной, так как сходство с популярными CMS не было найдено мной.

немного разобравшись в админке сайта я нашел нужную страницу с редактированием страницы, но и тут встретились сложности: в данной cms галерея была отделена от текста страницы. Я нашел где находится галерея, но и тут не было ни единого редактора исходного кода, куда бы можно было добавить свой html блок.

Поэтому мне пришлось лезть в файловый менеджер и искать файл, который отвечает за вывод галереи на сайте, и править его php код. Выкладываю исходный код измененного файла вывода изображений галереи:

<?
echo '<div class="galleri_b">';
$images['category']=func_query("SELECT * FROM $sql_tbl[categories] WHERE parentid='$cat' ");
if (!empty($images['category'])){
    //echo '<ul>';
    foreach ($images['category'] as $a=>$c){
        $b=func_query_first("SELECT * FROM $sql_tbl[gallery] WHERE `type`='gallery' and category='$c[categoryid]' order by orderby LIMIT 0,1");
        if (!empty($b)){
        $b['image']='gallery/'.$b['id']."_image.".$b['image'];
        if ($c['location']!='') $location=$c['location']; else $location="index.php?cat=$c[categoryid]";
        echo '
            <div class="bg_image">
                <a title="'.$c['category'].'" href="'.$location.'">
                <img src="/img/image.php?h=206&f='.$b['image'].'" border="0" alt="'.$b['alt'].'" />
                <br/>'.$c['category'].'
                </a>
            </div>
        ';
        }
    }
    echo '<div class="div_clear">&nbsp;</div>';
    //echo '</ul>';
}
$images['images']=func_query("SELECT * FROM $sql_tbl[gallery] WHERE `type`='gallery' and category='$cat' order by orderby");
if (!empty($images['images'])){
    foreach ($images['images'] as $a=>$b){
    $b['image']='gallery/'.$b['id']."_image.".$b['image'];
    echo '
        <div class="bg_image">
            <a title="'.$b['alt'].'" href="/img/'.$b['image'].'" class="imgshow" rel="imgshow">
                <img src="/img/image.php?h=206&f='.$b['image'].'" border="0" alt="'.$b['alt'].'" />
            </a>
        </div>
    ';
    }
    echo '<div class="div_clear">&nbsp;</div>';
}
//r_print_r($images);
echo '</div>';
?>

Далее, когда блок изображения были завернуты в блок .galleri_b, все пошло как по маслу. Необходимо было просто дописать css код блока и готово:

.gallery_b{
    width: 1100px;
    margin: 0px 0px 0px -50px;
    overflow: visible !important;
}

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

Верстка галереи сайта