Legosp Forum
Shop-Script "Legosp" => Общие вопросы => Тема начата: Natyuma от Декабря 22, 2011, 10:45:17 pm
-
Поля у картинок (особенно у больших) ужасно выглядят. Хочу переделать, чтобы помимо ресайза лишнее обрезалось.
Результат выложу )
Плиииз! ))
-
cfg/functions.php
function img_resize($src, $dest, $width, $height, $rgb, $quality=100)...
-
Спасибо!
-
В админке правильно надо настроить размеры шерины и высоты
Я специализируюсь на самописных фотогалереях. Текущий алгоритм не позволяет обрезАть фотографии при закачке. Например, превьюшка должна быть горизонтальной по задумке дизайнера, а криворукий клиент закачивает вертикальную фотку. Получается, что фотка уменьшается и накладывается на фон, заданный в админке. Если фон у сайта гладкий без фактуры и градиента, то результат еще более-менее. А вот если дизайнер задумал что-то этакое... Короче, вдруг кому пригодится )) Не претендую на красивость решения, но вроде бы хорошо работает... Итак,
Обрезка изображений (crop):
1. В файл cfg/functions.php функцию img_resize полностью заменить на
function img_resize($src, $dest, $width, $height, $rgb = 0xFFFFFF, $quality = 100) {
if (!file_exists($src)) {
return false;
}
$size = getimagesize($src);
if ($size === false) {
return false;
}
$format = strtolower(substr($size['mime'], strpos($size['mime'], '/') + 1));
$icfunc = 'imagecreatefrom'.$format;
if (!function_exists($icfunc)) {
return false;
}
$x_ratio = $width / $size[0];
$y_ratio = $height / $size[1];
if ($height == 0) {
$y_ratio = $x_ratio;
$height = $y_ratio * $size[1];
} elseif ($width == 0) {
$x_ratio = $y_ratio;
$width = $x_ratio * $size[0];
}
$ratio = min($x_ratio, $y_ratio);
$use_x_ratio = ($x_ratio == $ratio);
$new_width = $use_x_ratio ? $width : ceil($size[0] * $ratio);
$new_height = !$use_x_ratio ? $height : ceil($size[1] * $ratio);
$new_left = $use_x_ratio ? 0 : floor(($width - $new_width) / 2);
$new_top = !$use_x_ratio ? 0 : floor(($height - $new_height) / 2);
$isrc = $icfunc($src);
$idest = imagecreatetruecolor($width, $height);
// если нужны картинки с прозрачным фоном, раскомментарить
// if ($format=='png')
// {
// imageAlphaBlending($idest, false);
// imageSaveAlpha($idest, true);
// }
// else
imagefill($idest, 0, 0, $rgb);
imagecopyresampled($idest, $isrc, $new_left, $new_top, 0, 0, $new_width, $new_height, $size[0], $size[1]);
// если нужны картинки с прозрачным фоном, раскомментарить
// if ($format=='png') imagepng($idest, $dest);
// else
imagejpeg($idest, $dest, $quality);
imagedestroy($isrc);
imagedestroy($idest);
return true;
}
function img_crop($src, $dest, $a, $b, $x, $y, $width, $height, $rgb = 0xFFFFFF, $quality = 100) {
if (!file_exists($src)) {
return false;
}
$size = getimagesize($src);
list ($w, $h) = getimagesize($src);
if ($size === false) {
return false;
}
$format = strtolower(substr($size['mime'], strpos($size['mime'], '/') + 1));
$icfunc = 'imagecreatefrom'.$format;
if (!function_exists($icfunc)) {
return false;
}
$isrc = $icfunc($src);
$idest = imagecreatetruecolor($width, $height);
// если нужны картинки с прозрачным фоном, раскомментарить
// if ($format=='png')
// {
// imageAlphaBlending($idest, false);
// imageSaveAlpha($idest, true);
// }
// else
imagefill($idest, 0, 0, $rgb);
imagecopy($idest, $isrc, $a, $b, $x, $y, $w, $h);
// если нужны картинки с прозрачным фоном, раскомментарить
// if ($format=='png') imagepng($idest, $dest);
// else
imagejpeg($idest, $dest, $quality);
imagedestroy($isrc);
imagedestroy($idest);
return true;
}
// алгоритм ресайза с обрезкой: вырезается центральная часть изображения, если картинка меньше - растянется
function image_resize_crop ($in_url, $out_url, $new_width, $new_height)
{
list ($width, $height) = getimagesize ($in_url);
if ($width / $height > $new_width / $new_height )
{
img_resize($in_url, $out_url, 0, $new_height, CONF_IMAGE_COLOR, 100);
list ($width, $height) = getimagesize ($out_url);
img_crop($out_url, $out_url, 0, 0, ($width - $new_width )/2, 0, $new_width, $new_height, CONF_IMAGE_COLOR, 100);
}
else
{
img_resize($in_url, $out_url, $new_width, 0, CONF_IMAGE_COLOR, 100);
list ($width, $height) = getimagesize ($out_url);
img_crop($out_url, $out_url, 0, 0, 0, ($height - $new_height)/2, $new_width, $new_height, CONF_IMAGE_COLOR, 100);
}
}
// алгоритм ресайза без обрезки: если закачиваемая фотка меньше, она закачается без изменения размеров.
function image_resize_nocrop ($in_url, $out_url, $new_width, $new_height)
{
list ($width, $height) = getimagesize ($in_url);
if ($width >= $new_width)
{
if ($width / $height >= $new_width / $new_height)
img_resize($in_url, $out_url, $new_width, 0, CONF_IMAGE_COLOR, 100);
else
img_resize($in_url, $out_url, 0, $new_height, CONF_IMAGE_COLOR, 100);
}
else
{
if ($height >= $new_height)
img_resize($in_url, $out_url, 0, $new_height, CONF_IMAGE_COLOR, 100);
else
img_resize($in_url, $out_url, 0, $height, CONF_IMAGE_COLOR, 100);
}
}
2. В файле includes/admin/sub/catalog_products_edit.php нужно найти все вызовы функции img_resize и заменить на image_resize_crop или image_resize_nocrop в зависимости от того, где какая функция требуется. Не забыть убрать последний параметр (CONF_IMAGE_COLOR)!
Например, у меня Фотография и Маленькая фотография обрезаются, а Большая фотография только уменьшается до размера по бОльшей стороне (все размеры указываются в админке, кроме размера картинок для корзины, а для карусели используется размер "Маленькая фотография")
P.S. Модераторы, если посчитаете нужным, перенесите тему в раздел Разработка...
-
а для карусели используется размер "Маленькая фотография"
соглашусь. как по мне, так картинка-S.jpg это лишнее.
да и -SC.jpg тоже...
-
соглашусь. как по мне, так картинка-S.jpg это лишнее.
да и -SC.jpg тоже...
картинка-S.jpg не лишнее. Я делала пару магазинов на виртумарте, там нет третьего размера, и мне их не хватало. В категории - маленькая, на странице товара ужатая большая, которая по клику увеличивается до своего реального размера - не гуд, особенно если размеры дизайном жестко заданы, а большая картинка не перед закачкой не обрезана под нужное соотношение ширины к высоте.
-
пардон, перепутал с картинка-Н.jpg, для хитов которая. ::)
-
с картинками странно другое.. альты прописываются только для маленьких картинок 220px. а при открытии большой картинки через FancyBox альтов нет... что есть очень и очень плохо, не говоря уже о замене имени самой картинки.. (речь идет про главную картинку товара)
-
ну почему же не нужная размеры картинок хитов 120 а картинка в товаре 220 и если отказаться от -Н то на чтоже его заменять?
Хиты надо делать такого же размера, как Маленькая фотография, либо добавить в админку возможность задавать размеры картинок хитов. Отдельная картинка для хитов - это уже необязательный наворот.
-
Хиты надо делать такого же размера, как Маленькая фотография
а зачем, нужно просто использовать маленькую фотку для хитов, разница то 130px и 150px.
-
а зачем, нужно просто использовать маленькую фотку для хитов, разница то 130px и 150px.
Вот и я о том же!
+1 , хотя наличие "лишней" картинки вряд ли кому-то помешает.
-
а двумя картинками нельзя обойтись?
средняя картинка 220 px
и большая картинка родного разрешения
все маленькие картинки ресайзить из 220px на лету.. вроде нагрузка не должна быть большой
-
можно было бы и "на лету", и использовать только большую. ведь все картинки кэшируюся.
алгоритм нужен хороший + что бы работал у большинства, а то как на прежнем форуме, у половины не пашет(у кого проблемы с gd, у кого с mod_rewrite, а у кого то ещё РНР 4 :) ).
-
из одно картинки ресайзится на опенкарте.. там вроде проверенный алгоритм
-
Если картинки в кешэ то нагрузки не будет.
После 100 заходов все картинки будут в кешэ
-
Если картинки в кешэ то нагрузки не будет.
После 100 заходов все картинки будут в кешэ
По моему опыту (к большому сожалению), до сих пор полно пользователей ИЕ 6, а в нем ужатые картинки смотрятся отвратно. Поэтому я везде стараюсь использовать только "родной" размер картинок. И именно поэтому их на каждый товар должно быть 3 - маленькая, средняя и большая. Для хитов разумно использовать маленькую, это и лишний файловый мусор не будет разводить, и чем меньше на сайте "разных размеров", тем аккуратнее он выглядит.
-
на работе у многих клиентов магазины оптимизированы только под IE 7 и выше..
под IE6 никто костыли не делает.
на движке OWOX (стоимость от 10К евро) несколько магазинов и так же нет оптимизации под IE6
- Вопрос поднимался на клиентском семинаре в этом году
Один крупный вебразаботчик в Украине сказал что то вроде этого:
"Идея в том, что реальный клиент интернет магазина - это человек более менее продвинутый и знакомый с интернетом не первый день, а значит давно не пользуется IE6
те кто пользуются IE6 - не являются потенциальными клиентами интернет магазина и в расчет не берутся"
-
"Идея в том, что реальный клиент интернет магазина - это человек более менее продвинутый и знакомый с интернетом не первый день, а значит давно не пользуется IE6
те кто пользуются IE6 - не являются потенциальными клиентами интернет магазина и в расчет не берутся"
Это не значит, что человек, сказавший такое, прав. Ну да, конечно, зачем веб-мастеру лишний раз напрягаться? Я лично знаю несколько постоянных покупателей интернет-магазинов с ИЕ 6, это люди со средним достатком, кому некогда заниматься своими компьютерными аксессуарами, "работает и ладно". Человек, который покупает в интернет-магазине холодильник, совсем не обязательно должен разбираться в компьютерах ))
Статистика за 30 дней первого попавшегося сайта:
Opera 45
Internet Explorer 8 45
Firefox 3 16
Internet Explorer 6 13
Internet Explorer 7 13
Другие или не определено 6
Firefox 8 5
Chrome 7 3
Chrome 16 3
Firefox 6 2
Internet Explorer 9 2
Firefox 9 2
Chrome 15 1
Safari 1
Firefox 7 1
Chrome 12 1
Я могу посмотреть статистику еще 30 сайтов, и там будет примерно такая же картина. Ну как, выкидываем владельцев ИЕ 6 ? ))))
-
Лучше пользоваться статистикой, н-р
http://www.liveinternet.ru/stat/ru/browsers.html?period=month
Тенденция такова, что постепенно доля IE6 идет на убыль.
Ну а подходить нужно индивидуально. Для кого-то и 2-3% показатель для того, что подгонять проект под IE6.
-
на лету это хорошо. а сколько в итоге будет реальных картинок делаться? и как делать тогда перенос базы данных со стаными картинками (5 штук к одному товару)?
-
с картинками странно другое.. альты прописываются только для маленьких картинок 220px. а при открытии большой картинки через FancyBox альтов нет... что есть очень и очень плохо, не говоря уже о замене имени самой картинки.. (речь идет про главную картинку товара)
Я фэнсибокс заменила на хайслайд - та же история, у увеличенного изображения черте-какой альт. И прописать его из товара нет никакой возможности без влезания в код самого хайслайда (и вообще не факт, что это возможно). Разработчики таких галерей (особенно бесплатных или условно бесплатных) не напрягаются на тему оптимизации под поисковики. Честно говоря, я прописала альт среднему изображению и расслабилась. Необходимый минимум проиндексируется, а большими картинками наоборот не стоит с конкурентами делиться.
-
на лету это хорошо. а сколько в итоге будет реальных картинок делаться? и как делать тогда перенос базы данных со стаными картинками (5 штук к одному товару)?
Вы не совсем поняли эту фишку.
к примеру у меня был/есть сайт (http://splitok.com.ua) в котором для всего оформления используется всего одна картинка (большое фото). все остальные, создаёт скрипт, кеш изображения разного формата(150х150, 250х250 и тюдю), в папке prod_pic остаётся всего одна фотка.
в итоге: одна фотка+кеш в папке. кеш вес имеет несомненно. но плюсы в этом случае есть свои.
-
Честно говоря, я прописала альт среднему изображению и расслабилась. Необходимый минимум проиндексируется, а большими картинками наоборот не стоит с конкурентами делиться.
+))
-
Вы не совсем поняли эту фишку.
к примеру у меня был/есть сайт (http://splitok.com.ua) в котором для всего оформления используется всего одна картинка (большое фото). все остальные, создаёт скрипт, кеш изображения разного формата(150х150, 250х250 и тюдю), в папке prod_pic остаётся всего одна фотка.
в итоге: одна фотка+кеш в папке. кеш вес имеет несомненно. но плюсы в этом случае есть свои.
Здорово! Я пока так не умею... Если скорость загрузки категории с сотней товаров "отобразить все" не увеличится больше, чем на 2-3 секунды, это решение великолепно.
-
lego4.6
подскажите камрады, как на странице оформления shopping_cart.tpl.html сделать не маленькое фото а большое и качественное, хотя бы 220х220px
[spoiler](http://velodom.com.ua/i/500/500/46162.jpg) (http://velodom.com.ua/full/46162.jpg)[/spoiler]
пытался поменять сроку
<img src="./products_pictures/{$cart_content[i].picture}" alt="" /></a>
на <img src="./products_pictures/{$p_default}-B.jpg" width="220px" alt="" /></a>
но ничего не произошло..
-
если просто, поправь в shopping_cart.php:
{
$s = rtrim($r[4], '.jpg');
$r[4] = $s."-SC.jpg";
}
-SC удали.
-
в списке, в категории и на странице товара должна стоять средняя фотография, а в доп. фото на странице товара - маленькая
что писать в product_detailed.tpl.html вместо
<a href="./products_pictures/{if $p_default}{$p_default}-B.jpg{else}{$product_info[9]}{/if}" rel="example_group" class="thickbox" id="adpdp{$product_info[11]}"><img src="./products_pictures/{if $p_default}{$p_default}.jpg{else}{$product_info[5]}{/if}" id="dp{$product_info[11]}" style="margin-bottom: 3px;" alt="{$product_info[1]}" /></a>
и в product_brief.tpl.html вместо
<img id="dp{$product_info[11]}" src="./products_pictures/{if $p_default[$id]}{$p_default[$id]}-B.jpg{else}{$product_info[7]}{/if}" alt="{$product_info[1]|replace:'"':'"'}" />?