mirror of
https://github.com/phpbb/phpbb.git
synced 2025-07-30 21:40:43 +02:00
[ticket/15769] Crop avatars on upload
PHPBB3-15769
This commit is contained in:
@@ -2,3 +2,70 @@
|
||||
<dt><label for="avatar_upload_file">{L_UPLOAD_AVATAR_FILE}{L_COLON}</label></dt>
|
||||
<dd><input type="hidden" name="MAX_FILE_SIZE" value="{AVATAR_UPLOAD_SIZE}" /><input type="file" name="avatar_upload_file" id="avatar_upload_file" class="inputbox autowidth" accept="{{ AVATAR_ALLOWED_EXTENSIONS }}" /></dd>
|
||||
</dl>
|
||||
|
||||
{% if S_CROPPING_AVAILABLE %}
|
||||
{% INCLUDECSS T_ASSETS_PATH ~ '/css/cropper.min.css' %}
|
||||
{% INCLUDEJS T_ASSETS_PATH ~ '/javascript/cropper.min.js' %}
|
||||
{% INCLUDEJS T_ASSETS_PATH ~ '/javascript/jquery-cropper.js' %}
|
||||
{% INCLUDEJS T_ASSETS_PATH ~ '/javascript/phpbb-avatars.js' %}
|
||||
|
||||
<input type="hidden" id="avatar-cropper-data" name="avatar_cropper_data" value=""
|
||||
data-min-width="{{ AVATAR_MIN_WIDTH }}" data-max-width="{{ AVATAR_MAX_WIDTH }}"
|
||||
data-min-height="{{ AVATAR_MIN_HEIGHT }}" data-max-height="{{ AVATAR_MAX_HEIGHT }}"
|
||||
/>
|
||||
|
||||
{% apply spaceless %}
|
||||
<div class="avatar-cropper-buttons" id="avatar-cropper-buttons">
|
||||
<div class="button-group">
|
||||
<button class="button" type="button" title="{{ lang('ZOOM_IN') }}" data-cropper-action="zoom,0.1">
|
||||
<i class="icon fa-search-plus fa-fw"></i>
|
||||
</button>
|
||||
<button class="button" type="button" title="{{ lang('ZOOM_OUT') }}" data-cropper-action="zoom,-0.1">
|
||||
<i class="icon fa-search-minus fa-fw"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="button-group">
|
||||
<button class="button" type="button" title="{{ lang('MOVE_LEFT') }}" data-cropper-action="move,-10,0">
|
||||
<i class="icon fa-arrow-left fa-fw"></i>
|
||||
</button>
|
||||
<button class="button" type="button" title="{{ lang('MOVE_RIGHT') }}" data-cropper-action="move,10,0">
|
||||
<i class="icon fa-arrow-right fa-fw"></i>
|
||||
</button>
|
||||
<button class="button" type="button" title="{{ lang('MOVE_UP') }}" data-cropper-action="move,0,-10">
|
||||
<i class="icon fa-arrow-up fa-fw"></i>
|
||||
</button>
|
||||
<button class="button" type="button" title="{{ lang('MOVE_DOWN') }}" data-cropper-action="move,0,10">
|
||||
<i class="icon fa-arrow-down fa-fw"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="button-group">
|
||||
<button class="button" type="button" title="{{ lang('ROTATE_LEFT') }}" data-cropper-action="rotate,-90">
|
||||
<i class="icon fa-rotate-left fa-fw"></i>
|
||||
</button>
|
||||
<button class="button" type="button" title="{{ lang('ROTATE_RIGHT') }}" data-cropper-action="rotate,90">
|
||||
<i class="icon fa-rotate-right fa-fw"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="button-group">
|
||||
<button class="button" type="button" title="{{ lang('FLIP_HORIZONTALLY') }}" data-cropper-action="scaleX">
|
||||
<i class="icon fa-arrows-h fa-fw"></i>
|
||||
</button>
|
||||
<button class="button" type="button" title="{{ lang('FLIP_VERTICALLY') }}" data-cropper-action="scaleY">
|
||||
<i class="icon fa-arrows-v fa-fw"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="button-group">
|
||||
<button class="button" type="button" title="{{ lang('RESET') }}" data-cropper-action="reset">
|
||||
<i class="icon fa-refresh fa-fw"></i>
|
||||
</button>
|
||||
<button class="button" type="button" title="{{ lang('CLEAR') }}" data-cropper-action="clear">
|
||||
<i class="icon fa-times fa-fw"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endapply %}
|
||||
{% endif %}
|
||||
|
@@ -113,7 +113,7 @@
|
||||
<legend>{L_GROUP_AVATAR}</legend>
|
||||
<dl>
|
||||
<dt><label>{L_CURRENT_IMAGE}{L_COLON}</label><br /><span>{L_AVATAR_EXPLAIN}</span></dt>
|
||||
<dd>{% if AVATAR_HTML %}{{ AVATAR_HTML }}{% else %}<img src="{{ ADMIN_ROOT_PATH ~ 'images/no_avatar.gif' }}" alt="">{% endif %}</dd>
|
||||
<dd id="avatar-box">{% if AVATAR_HTML %}{{ AVATAR_HTML }}{% else %}<img src="{{ ADMIN_ROOT_PATH ~ 'images/no_avatar.gif' }}" alt="">{% endif %}</dd>
|
||||
<dd><label for="avatar_delete"><input type="checkbox" name="avatar_delete" id="avatar_delete" /> {L_DELETE_AVATAR}</label></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
|
@@ -5,7 +5,7 @@
|
||||
<!-- IF ERROR --><p class="error">{ERROR}</p><!-- ENDIF -->
|
||||
<dl>
|
||||
<dt><label>{L_CURRENT_IMAGE}{L_COLON}</label><br /><span>{L_AVATAR_EXPLAIN}</span></dt>
|
||||
<dd>{% if AVATAR_HTML %}{{ AVATAR_HTML }}{% else %}<img src="{{ ADMIN_ROOT_PATH ~ 'images/no_avatar.gif' }}" alt="">{% endif %}</dd>
|
||||
<dd id="avatar-box">{% if AVATAR_HTML %}{{ AVATAR_HTML }}{% else %}<img src="{{ ADMIN_ROOT_PATH ~ 'images/no_avatar.gif' }}" alt="">{% endif %}</dd>
|
||||
<dd><label for="avatar_delete"><input type="checkbox" name="avatar_delete" id="avatar_delete" /> {L_DELETE_AVATAR}</label></dd>
|
||||
</dl>
|
||||
</fieldset>
|
||||
|
@@ -1708,6 +1708,7 @@ input.autowidth {
|
||||
|
||||
/* Form button styles
|
||||
---------------------------------------- */
|
||||
.button,
|
||||
a.button1,
|
||||
input.button1,
|
||||
a.button2,
|
||||
@@ -1721,6 +1722,7 @@ input.button2 {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button,
|
||||
a.button1,
|
||||
input.button1 {
|
||||
font-weight: bold;
|
||||
@@ -1734,6 +1736,10 @@ input.button2 {
|
||||
}
|
||||
|
||||
/* <a> button in the style of the form buttons */
|
||||
.button,
|
||||
.button:link,
|
||||
.button:visited,
|
||||
.button:active,
|
||||
a.button1,
|
||||
a.button1:link,
|
||||
a.button1:visited,
|
||||
@@ -1748,6 +1754,7 @@ a.button2:active {
|
||||
}
|
||||
|
||||
/* Hover states */
|
||||
.button:hover,
|
||||
a.button1:hover,
|
||||
input.button1:hover,
|
||||
a.button2:hover,
|
||||
@@ -1768,6 +1775,37 @@ input.button2:focus {
|
||||
outline-style: none;
|
||||
}
|
||||
|
||||
/* Avatar cropper */
|
||||
.avatar-cropper-buttons {
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/** Button groups */
|
||||
.button-group {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.button-group + .button-group {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.button-group > .button:first-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
.button-group > .button:last-child {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.button-group > .button:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.avatar-cropper-buttons > .button-group {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
/* jQuery popups
|
||||
---------------------------------------- */
|
||||
.phpbb_alert {
|
||||
|
Reference in New Issue
Block a user