Публикации с меткой «верстка»
Ребят… кто возьмётся сверстать этот шаблон для БС ?
В данное время я свободен от работы и от всего, что меня отвлекало, поэтому могу предложить услуги по разработке дизайна под «Большую Улицу» (и не только).
Разработка макета
1. Обычный, не сложный дизайн на базе стандартной темы — 1500-4000 рублей;
2. Сложный дизайн — от 4000 рублей;
Вёрстка
1. Обычная вёрстка — от 2000 рублей;
2. Красивая и качественная вёрстка — от 4000 рублей;
Ещё я очень люблю прорабатывать различные интерфейсы, делать их удобнее и более «понятливыми».
Если проект интересный и меня заинтересует, готов сделать большие-при-большие скидки, потому что я заинтересован в развитии BigStreet'а.
ПродолжениеПришел к выводу, что во второй части, «тема титек» не раскрыта, ну сами посудите на фото видим классные титьки и хочется посмотреть фото в исходном варианте, а исходного фото нет. Делаем Превьюшки изображений.1. Шаг первый, дублируем из «Публикация изображений. Часть вторая.»2. Шаг второй, аналогичный из «Публикация изображений. Часть вторая.» только там мы вставляли код: #size-img { max-width: 480px; width: expression(this.width > 480 ? 480: auto); margin: 20px; }
А здесь вместо него вставляем: #size-img { max-width: 480px; width: expression(this.width > 480 ? 480: auto); margin: 20px; border: none; }
3. Шаг третий, дублируем из «Публикация изображений. Часть вторая.»4. Шаг четвертый, открываем файл img_load.loader.php находящийся в папке modules/blog/loaders/. Ищем строки № 83-87: $align = (isset($_POST['align']) and mb_strlen(trim($_POST['align'], 'UTF-8'))) ? $align = $_POST['align'] : false; $alt = (isset($_POST['alter']) and mb_strlen(trim($_POST['alter'], 'UTF-8'))) ? $alt = $_POST['alter'] : false; $imgCode = '<img src="'.$imgUrl.'"'.(($align!=false) ? ' align="'.$align.'"' : '').(($alt!=false) ? ' alt="'.$alt.'"' : ' alt=""').' border="0" hspace="10px" vspace="10px">';
И меняем их на: $alt = (isset($_POST['alter']) and mb_strlen(trim($_POST['alter'], 'UTF-8'))) ? $alt = $_POST['alter'] : false; $imgCode = '<a href="'.$imgUrl.'"><img src="'.$imgUrl.'"'.(($alt!=false) ? ' alt="'.$alt.'"' : ' alt=""').'></a>';
5. Шаг пятый, дублируем из «Публикация изображений. Часть вторая.»Вот и все, этот вариант подходит тем, для кого качество исходных изображений дороже, чем отведенное место под сайт хостингом. Изображения будут кликабельны, а ссылки будут вести на исходные изображения. Отмечу, что данный вариант Превьюшки изображений экономичнее, чем вариант, предложенный Cronom так, как не создает дублирующих файлов тумб.
Продолжение Первой части.Во второй части модификации в код Бигстрит были внесены изменения, которые позволяют выводить любые изображения (jpg, gif, png) с любыми параметрами тега <img … > и любыми размерами на страницах вашего сайта не нарушая внешний вид страницы, не растягивая ее и не показывая горизонтальную полосу прокрутки. При использовании данной модификации внешний вид картинок, которые загружены на ваш сайт или ретранслируемые с других сайтов теперь будут ограничены заданными параметрами ширины. Описание основных характеристик модификации:1. Картинки меньше заданных размеров ширины будут выводиться, сохраняя прежние размеры. 2. Картинки, ширина которых будет превышать заданные параметры, будет сжиматься до заданных размеров. 3. Параметры тега <img … > которые, могут нарушить внешний вид страницы (при определенных значениях в этих параметрах) будут фильтроваться и вырезаться. 4. Картинки, загружаемые на сервер нашего сайта, будут сжиматься, если их размеры превышают заданные размеры. Размеры картинок которые меньше будут переписываться без изменения размера тем самым экономя дисковое пространство, выделенное под наш сайт. И так приступим к внесению изменений, начну с файла system/tools/ strings.php и параметров тега <img … >, на данный момент (в BigStreet-CMS-alpha-2) тег <img … > может принимать следующие параметры: src, alt, title, width, height, align, valign, hspace, vspace, border. Опишу те, которые удалю: width, height, hspace, vspace — большие значениями этих параметров растянут страницу так, что можно будет заблудиться. Параметр align при значении left, right и публикации подряд нескольких фотографий, выстроит их в ряд горизонтально и когда суммарная ширина превысит ширину экрана, пользователь увидит горизонтальную прокрутку. Параметр valign удаляю за ненадобностью, не могу представить ситуацию, где он может пригодиться. А border в данном случае может пригодиться только в случае траура, так как выводит рамку черного цвета вокруг фото и если его значения выставить слишком большие, то рамка порвет страницу. 1. Шаг первый, вносим изменения в strings.php который, находится в папке system/tools/. Находим строку № 65: $jevix->cfgAllowTagParams('img', array('src', 'alt', 'title', 'width', 'height', 'style', 'align', 'valign', 'hspace', 'vspace', 'border'));
И меняем на: $jevix->cfgAllowTagParams('img', array('src', 'alt', 'title', 'id'));
Как видите, здесь находятся разрешенные параметры тега <img … > мы удаляем (тем самым запрещаем) то, что может нарушить верстку, и дописываем параметр id. Находим строку № 89 И под ней дописываем следующее: $text = $this->safeImages($text);
Находим строки № 48, 49: /** * Make safe text from text, inputted by users
И над ними вставляем: /** *Make true layout from illustration, inputted by users */ function safeImages($text) { $search = array('"<img (.*)>"Ui' ); $replace = array("<img $1 id=\"size-img\">\n" ); $text = preg_replace($search, $replace, $text); return $text; }
Функция, которая будет создавать тег <img … > с правильными параметрами. Файл сохраняем и переходим к следующему. 2. Шаг второй, вносим изменения в base.css который находится в папке themes/default/templates/ Открываем файл и в конец пишем: #size-img { max-width: 480px; width: expression(this.width > 480 ? 480: auto); margin: 20px; }
Где 480 это и есть та максимальная ширина, которая будет ограничивать изображения (при необходимости поменяйте на свое значение в трех местах). 3. Шаг третий, модифицируем форму загрузки изображений. Открываем файл: sample.img_loader.tpl, который находится: themes/default/templates/ Находим строку: № 80: <input type="button" value="Загрузить" onclick="uploadImg(this.form, area_for_load_img.value);">
И под ней пишем: <input type="reset" value="Очистить">
Появится кнопка Очистить форму, она может пригодиться в том случае если вы, сначала загрузили изображение на сайт, а следующую картинку решили взять с внешнего ресурса. Вот тут и не обойтись без кнопки Очистить, что бы почистить поле Загрузить: где у нас осталась предыдущая ссылка. Находим строки: № 63 -71: <tr> <td align="right">Выравнивание:</td> <td> <select name="align"> <option value="">нет</option> <option value="left">слева</option> <option value="right">справа</option> </select> </tr>
И удаляем их. Файл сохраняем. 4. Шаг четвертый, открываем файл img_load.loader.php находящийся в папке modules/blog/loaders/. Ищем строки № 83-87: $align = (isset($_POST['align']) and mb_strlen(trim($_POST['align'], 'UTF-8'))) ? $align = $_POST['align'] : false; $alt = (isset($_POST['alter']) and mb_strlen(trim($_POST['alter'], 'UTF-8'))) ? $alt = $_POST['alter'] : false; $imgCode = '<img src="'.$imgUrl.'"'.(($align!=false) ? ' align="'.$align.'"' : '').(($alt!=false) ? ' alt="'.$alt.'"' : ' alt=""').' border="0" hspace="10px" vspace="10px">';
И меняем их на: $alt = (isset($_POST['alter']) and mb_strlen(trim($_POST['alter'], 'UTF-8'))) ? $alt = $_POST['alter'] : false; $imgCode = '<img src="'.$imgUrl.'"'.(($alt!=false) ? ' alt="'.$alt.'"' : ' alt=""').'>';
Далее ищем строку № 69: И ниже добавляем: switch ($ext) { case 'jpg': $im = imageCreateFromjpeg( $oRouter->getPathRoot().$dir.'/'.$new_img); break; case 'gif': $im = imageCreateFromgif( $oRouter->getPathRoot().$dir.'/'.$new_img); break; case 'png': $im = imageCreateFrompng( $oRouter->getPathRoot().$dir.'/'.$new_img); break; } if($im) { $max_img = "480"; // 480 максимальная ширина при необходимости поменяйте на свое значение list($width, $height) = getimagesize($oRouter->getPathRoot().$dir.'/'.$new_img); if(($width>$max_img) AND (!$oSession->isModeratorStatus() OR !$oSession->isAdministratorStatus())) { $newwidth = $max_img; $newheight = intval(($max_img/$width)*$height); $img = imagecreatetruecolor($newwidth, $newheight); imagecopyresized($img, $im, 0, 0, 0, 0, $newwidth, $newheight, $width, $height); unlink($oRouter->getPathRoot().$dir.'/'.$new_img); switch ($ext) { case 'jpg': imagejpeg($img, $oRouter->getPathRoot().$dir.'/'.$new_img); break; case 'gif': imagegif($img, $oRouter->getPathRoot().$dir.'/'.$new_img); break; case 'png': imagepng($img, $oRouter->getPathRoot().$dir.'/'.$new_img); break; } } else { $newwidth = $width; $newheight = $height; $img = imagecreatetruecolor($newwidth, $newheight); imagecopyresized($img, $im, 0, 0, 0, 0, $newwidth, $newheight, $width, $height); unlink($oRouter->getPathRoot().$dir.'/'.$new_img); switch ($ext) { case 'jpg': imagejpeg($img, $oRouter->getPathRoot().$dir.'/'.$new_img); break; case 'gif': imagegif($img, $oRouter->getPathRoot().$dir.'/'.$new_img); break; case 'png': imagepng($img, $oRouter->getPathRoot().$dir.'/'.$new_img); break; } } }
Внутри этого кода надо найти $max_img = «480»; и при необходимости заменить 480 на свою максимальную ширину. Сохраняем файл. Модификация этого файла позволит переписывать загружаемые изображения под заданную ширину, что существенно сократит дисковое пространство, отведенное хостингом под ваш сайт. 5. Шаг пятый, здесь будем модифицировать функцию предпросмотра поста, комментария и личной переписки. Открываем файл: edit_topic.tpl находящийся в папке modules/blog/templates/ Находим строку № 17:
Я решил написать некую общую заметку, скорее для себя, чтобы не забыть, но если кому-то еще пригодится, то отлично. Добавлять информацию буду по ходу продвижения в работе.
|
|
