Jump to content

Произвольный размер аватаров

Featured Replies

Posted

Итак, интересуют размера аватарок как тут - https://forums.gamemag.ru/topic/132046-nintendo-switch/?page=287
Т.е. чтобы были широкие, высокие, длинные, низенькие и пухленькие, чтобы оно не сжималось и не уменьшалось где не надо. Крутил и курил матчасть я крайне долго, мною было выс, кхм, слеплено из различных кусков следующее:

@media screen and (min-width: 768px) {
.cTopic .ipsUserPhoto_large img, .cTopic img.ipsUserPhoto_large, .cTopic .ipsUserPhoto_large:after {
    width: 150px !important;
    object-fit: cover;
}
}

Результат такой:

chrome_m14TbGQkF2.png.0bba8c8c4a0c9c70543cbfe0c1d066ce.png

Вроде как всё ок и изображение как надо, но стоит только добавить аватар не в ширину а в высоту получается вот такое:

chrome_CvJ7VkHhKR.png.dd4134b0e85351c962d3145ae95677af.png

т.е. он полностью обрезается

К тому же у них загрузчик аватаров не предлагает обрезать изображение как на дефолт движке:

chrome_dvJw1yimE9.png

  • Author

Код у них показывает вот такой:

.cAuthorPane_photo_3 > .ipsUserPhoto_variable img, img.ipsUserPhoto_variable, .ipsUserPhoto_variable:after, .cAuthorPane_photo_16 > .ipsUserPhoto_variable img, img.ipsUserPhoto_variable, .ipsUserPhoto_variable:after, .cAuthorPane_photo_15 > .ipsUserPhoto_variable img, img.ipsUserPhoto_variable, .ipsUserPhoto_variable:after, .cAuthorPane_photo_14 > .ipsUserPhoto_variable img, img.ipsUserPhoto_variable, .ipsUserPhoto_variable:after {
    max-width: 160px;
    max-height: 160px;
}

Как оно работает - не понимаю...

 

  • Author
  On 01.07.2020 at 18:38, Maiden8 said:

У меня так

 


@media screen and (min-width: 768px) {
.cTopic .ipsUserPhoto_large img, .cTopic img.ipsUserPhoto_large, .cTopic .ipsUserPhoto_large:after {
    width: 200px !important;
    height: 200px !important;
}

 

К сожалению стало ещё хуже и не решило главную проблему разных аватаров. В IPB3 это настраивалось легчайше :(

Так вы фиксируете ширину, а нужно сделать её гибкой при помощи max-height, max-width, как предложил @Zero108.

Попробуйте пофиксить самостоятельно, если нет - отпишите, поможем, куда мы денемся 😞

  • Author
  On 01.07.2020 at 19:58, Zero108 said:

Попробуйте поэкспериментирвать с min-height, max-height, min-width,  max-width.

В теории вот это должно сработать т.к. при загрузке всё равно стоят ограничения группы:

@media screen and (min-width: 768px) {
.cTopic .ipsUserPhoto_large img, .cTopic img.ipsUserPhoto_large, .cTopic .ipsUserPhoto_large:after {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
}

Но пока проблема в мерзопакостной сетке загрузчика, когда гружу картинку на сервер всё нормально, фулл сайз как и должен быть:chrome_HeivD9pimS.thumb.png.faa09710c2ce473235782c001830b9e1.png

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

chrome_Hh5jwrA82P.thumb.png.830f16c95aaea5b66fb85b6fc36df0c7.png

 

  • Author

Итак, речь идёт о вот этой штуке из дефолт движка:

chrome_okljAoOJfq.thumb.png.9145d9d6c3b41493bd9669ce5da2c169.png

 

Можно ли её вообще выпилить и как правильно это сделать? Не хочу чтобы форум вообще ресайзил изображение для аватарок а оставлял их как есть

  • Author

Нашел вот такой код:

<div data-controller='core.global.core.cropper' id='elPhotoCropper' class='ipsAreaBackground_light ipsType_center ipsPad'>
	<h3 class='ipsType_sectionHead'>{lang="photo_crop_title"}</h3>
	<p class='ipsType_light ipsType_reset'>{lang="photo_crop_instructions"}</p>
	<br>

	<div class='ipsForm_cropper'>
		<div data-role='cropper'>
			<img src="{$photo}" data-role='profilePhoto'>
		</div>
	</div>

	<input type='hidden' name='{$name}[0]' value='{$value[0]}' data-role='topLeftX'>
	<input type='hidden' name='{$name}[1]' value='{$value[1]}' data-role='topLeftY'>
	<input type='hidden' name='{$name}[2]' value='{$value[2]}' data-role='bottomRightX'>
	<input type='hidden' name='{$name}[3]' value='{$value[3]}' data-role='bottomRightY'>
</div>

если убрать полностью его (лол, да, я пытался) форум говорит что так не удалось обрезать фото

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

  • Author

Сверил код на форуме без этих точек и на дефолт форуме, 

Без точек обрезки:

chrome_n3i28Kddls.png.74fd2bfadc235aad27f13c3fdcb8f871.png

 

Дефолт форум:

chrome_a6EVSBhgpa.png.18f4f049045722abecc28fbe5ca6ee82.png

 

Как я понял нужно выпилить "cropper-container cropper bg". Только где он?)

 

Спойлер


Я выпилил кроппер
Вот так оставил, он не предлагает резать фотку.

 

Спойлер

 

Удали этот кусок
 

/* Cropper tool */
[data-role="cropper"] {
	margin: 0 auto;
	max-width: 100%;
}

.ipsForm_cropper {
	max-width: 100%;
}

.ipsForm_cropper > img {
	max-width: 100%;
}

/* Just a little thing to make the Google address field autocomplete have
	a higher z-index because otherwise it's hidden behind modals */
.pac-container {
	z-index: 100000;
}

/*!
 * Cropper v0.8.0
 * https://github.com/fengyuanchen/cropper
 *
 * Copyright 2014-2015 Fengyuan Chen
 * Released under the MIT license
 *
 * Date: 2015-02-19T06:49:29.144Z
 */.cropper-container{position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.cropper-container img{display:block;width:100%;min-width:0!important;max-width:none!important;height:100%;min-height:0!important;max-height:none!important}.cropper-canvas,.cropper-modal{position:absolute;top:0;right:0;bottom:0;left:0}.cropper-canvas{background-color:#fff;filter:alpha(opacity=0);opacity:0}.cropper-modal{background-color:#000;filter:alpha(opacity=50);opacity:.5}.cropper-cropbox{position:absolute;top:10%;left:10%;width:80%;height:80%}.cropper-viewer{display:block;width:100%;height:100%;overflow:hidden;outline:#69f solid 1px;outline-color:rgba(102,153,255,.75)}.cropper-dashed{position:absolute;display:block;filter:alpha(opacity=50);border:0 dashed #fff;opacity:.5}.cropper-dashed.dashed-h{top:33.33333333%;left:0;width:100%;height:33.33333333%;border-top-width:1px;border-bottom-width:1px}.cropper-dashed.dashed-v{top:0;left:33.33333333%;width:33.33333333%;height:100%;border-right-width:1px;border-left-width:1px}.cropper-face,.cropper-line,.cropper-point{position:absolute;display:block;width:100%;height:100%;filter:alpha(opacity=10);opacity:.1}.cropper-face{top:0;left:0;cursor:move;background-color:#fff}.cropper-line{background-color:#69f}.cropper-line.line-e{top:0;right:-3px;width:5px;cursor:e-resize}.cropper-line.line-n{top:-3px;left:0;height:5px;cursor:n-resize}.cropper-line.line-w{top:0;left:-3px;width:5px;cursor:w-resize}.cropper-line.line-s{bottom:-3px;left:0;height:5px;cursor:s-resize}.cropper-point{width:5px;height:5px;background-color:#69f;filter:alpha(opacity=75);opacity:.75}.cropper-point.point-e{top:50%;right:-3px;margin-top:-3px;cursor:e-resize}.cropper-point.point-n{top:-3px;left:50%;margin-left:-3px;cursor:n-resize}.cropper-point.point-w{top:50%;left:-3px;margin-top:-3px;cursor:w-resize}.cropper-point.point-s{bottom:-3px;left:50%;margin-left:-3px;cursor:s-resize}.cropper-point.point-ne{top:-3px;right:-3px;cursor:ne-resize}.cropper-point.point-nw{top:-3px;left:-3px;cursor:nw-resize}.cropper-point.point-sw{bottom:-3px;left:-3px;cursor:sw-resize}.cropper-point.point-se{right:-3px;bottom:-3px;width:20px;height:20px;cursor:se-resize;filter:alpha(opacity=100);opacity:1}.cropper-point.point-se:before{position:absolute;right:-50%;bottom:-50%;display:block;width:200%;height:200%;content:" ";background-color:#69f;filter:alpha(opacity=0);opacity:0}@media (min-width:768px){.cropper-point.point-se{width:15px;height:15px}}@media (min-width:992px){.cropper-point.point-se{width:10px;height:10px}}@media (min-width:1200px){.cropper-point.point-se{width:5px;height:5px;filter:alpha(opacity=75);opacity:.75}}.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-invisible{filter:alpha(opacity=0);opacity:0}.cropper-hide{position:fixed;top:0;left:0;z-index:-1;width:auto!important;max-width:none!important;height:auto!important;max-height:none!important;filter:alpha(opacity=0);opacity:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-canvas,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}

 

Edited by Maiden8

  • Author

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

Если выпилить весь код или вот этот кусок:

 */.cropper-container{position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select (и так далее)

получается вот так:
chrome_BbyAGhyQEL.thumb.png.b2a2d9fb05640570ada2979715461c15.png

 

Но зато обрезки по ходу нет :D Ща ещё покурю ту длинную строчку, может смогу просто выпилить точки не сбив при этом ничего

Всё, выпилил, сам код кроппера в строчке

*/.cropper-container{position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select (и так далее)

заменить на:

*/.cropper-container {
	position: relative;
	overflow: hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none
}

.cropper-container img {
	display: block;
	width: 100%;
	min-width: 0!important;
	max-width: none!important;
	height: 100%;
	min-height: 0!important;
	max-height: none!important
}

.cropper-canvas,
.cropper-modal {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.cropper-canvas {
	background-color: #fff;
	filter: alpha(opacity=0);
	opacity: 0
}

.cropper-modal {
	background-color: #000;
	filter: alpha(opacity=50);
	opacity: .5
}



@media (min-width:768px) {
	.cropper-point.point-se {
		width: 15px;
		height: 15px
	}
}

@media (min-width:992px) {
	.cropper-point.point-se {
		width: 10px;
		height: 10px
	}
}

@media (min-width:1200px) {
	.cropper-point.point-se {
		width: 5px;
		height: 5px;
		filter: alpha(opacity=75);
		opacity: .75
	}
}

.cropper-bg {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)
}

.cropper-invisible {
	filter: alpha(opacity=0);
	opacity: 0
}

.cropper-hide {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: auto!important;
	max-width: none!important;
	height: auto!important;
	max-height: none!important;
	filter: alpha(opacity=0);
	opacity: 0
}

.cropper-hidden {
	display: none!important
}

.cropper-move {
	cursor: move
}

.cropper-crop {
	cursor: crosshair
}

.cropper-disabled .cropper-canvas,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
	cursor: not-allowed
}

Результат:

chrome_MhGnS7cnkX.thumb.png.309e4c5442e6211eb03c04aab73f6cde.png

  • Author

Далее нужно следовать вот этой инструкции:

Спойлер

 

И финальный результат:

chrome_kJxU6jBb6D.png.5b6f27959fe052654f7fc000c1de4fa8.png

 

Ура, ура, ура!

  • Author

Maiden8 кстати, а можно как-то вернуть упрощённый редактор тем? Я конвертировал тему в продвинутый и теперь упрощённого редактора нетchrome_Brc8oEZWm7.png.31e1cd5ce087abfbcc8da543af092fec.png

 

Стиль теперь также не отмечается возможностью упрощённого редактирования:

chrome_SOcnLsl8Ff.png.2ecffcc15d63a373c0e48b6dc133198c.png

  • Author
  On 02.07.2020 at 13:21, Maiden8 said:

И где ты это замутил? Давай поищем.

Да вот тут кнопка была:

chrome_d4VJsgniWy.png.61c18f67dfbe52007dc116897b1f7094.png

Без продвинутого режима я не мог попасть в forms.css. В упрощённом режиме его вообще не было

  • Author

По поводу обрезки в загрузчике автаарок, как оказалось её выпиливать не обязательно т.к. с настройкой из вот этого поста 


Всё работает и так, обрезка влияет только на миниатюру в профиле, превью на форуме и т.д. и т.п.

  • Author

Так, нашел баг - как только меняется вот эта часть 

<li class='cAuthorPane_photo'> {
	{
		if $comment->author()->pp_main_photo
	}
}

<a href='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}" seoTemplate="profile" seoTitle="$seoName"}' data-ipsHover data-ipsHover-target='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}&do=hovercard" seoTemplate="profile" seoTitle="$seoName"}' title="{lang="view_user_profile" sprintf="$name"}"><span class='ipsUserPhoto ipsUserPhoto_variable'><img src="{setting="base_url"}uploads/{$comment->author()->pp_main_photo}" /></span></a> {
	{
		else
	}
}

<a href='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}" seoTemplate="profile" seoTitle="$seoName"}' data-ipsHover data-ipsHover-target='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}&do=hovercard" seoTemplate="profile" seoTitle="$seoName"}' title="{lang="view_user_profile" sprintf="$name"}"><img src="Default Image Url" /></a> {
	{
		endif
	}
}

</li>

При клике по профилю пользователя перекидывает на главную форума, т.к. страница ломается и выглядит вот так:

chrome_SrWn9jfKPi.png.c20bd188fc85ceca2dc85cf3b90f1efb.png

 

Вместо оригинального линка:

chrome_EptrbP6HrM.png.feca59e3b0bceef66e153aa6e2b4ce81.png

 

Есть идеи как пофиксить это?

  • Author

Эм, код при вставке сломался, т.к. нельзя отредактировать продублирую. Оригинальный код:
 

<li class='cAuthorPane_photo'>
				{template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"}
			</li>

Код который делает размер аватаров согласно их соотношению сторон и размеру:

<li class='cAuthorPane_photo'>
                {{if $comment->author()->pp_main_photo}}<a href='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}" seoTemplate="profile" seoTitle="$seoName"}' data-ipsHover data-ipsHover-target='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}&do=hovercard" seoTemplate="profile" seoTitle="$seoName"}' title="{lang="view_user_profile" sprintf="$name"}"><span class='ipsUserPhoto ipsUserPhoto_variable'><img src="{setting="base_url"}uploads/{$comment->author()->pp_main_photo}" /></span></a>{{else}}<a href='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}" seoTemplate="profile" seoTitle="$seoName"}' data-ipsHover data-ipsHover-target='{url="app=core&module=members&controller=profile&id={$comment->author()->member_id}-{$comment->author()->name}&do=hovercard" seoTemplate="profile" seoTitle="$seoName"}' title="{lang="view_user_profile" sprintf="$name"}"><img src="Default Image Url" /></a>{{endif}}
          </li>

 

Совершенно не понимаю что там нужно переделать чтобы ссылни на профиль по клику на автар опять ожили

Дополнение - в мобильной версии код не сломан, только когда начинает отображаться аватар в ПК версии

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Ответить в этой теме...

Последние посетители 0

  • No registered users viewing this page.