Jump to content
Дизайн и модификация IPS Community IPBSkinsBETA
Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
Fantik

Задать размер изображения по высоте

Recommended Posts

Как задать размер изображения по высоте, с сохранением пропорций?

Поле не активное

post-59867-0-67136400-1526108368_thumb.jpg

А то сделали крайне не продумано, если вставить к примеру 3 разных фотографии имеющих разную высоту и выставить для них к примеру 300 пикселей ширину, то в итоге получается всё криво.

Если же выставить 300 высоту для всех, то всё будет ровно

Share this post


Link to post
Share on other sites

Вообще там все завязано на ширине. И в дб записывается style="width:123px;height:auto;"

Share this post


Link to post
Share on other sites

Можно в бд в таблице core_javascript найти ips.editor.image.js (SELECT * FROM `core_javascript` WHERE javascript_name='ips.editor.image.js') и отредактировать содержимое столбца javascript_content

Закомментировать

this.scope.find('[data-role="imageHeight"]').prop('disabled', true);

и

this.scope.find('[data-role="imageHeight"]').prop('disabled', sameRatio);

 

Далее сбросить кеш форума.

Share this post


Link to post
Share on other sites

что-то я накосячил кажется

/**
* Invision Community
* (c) Invision Power Services, Inc. - https://www.invisioncommunity.com
*
* ips.editor.image.js - Controller for image properties in editor
*
* Author: Mark Wade
*/
;( function($, _, undefined){
"use strict";

ips.controller.register('core.global.editor.image', {

	_typingTimer: null,
	_textTypingTimer: null,
	_ajaxObj: null,
	_imageWidth: null,
	_ratioWidth: 1,
	_ratioHeight: 1,

	initialize: function () {
		this.on( 'submit', 'form', this.formSubmit );
		this.on( 'change', '[data-role="imageHeight"]', this.changeHeight );
		this.on( 'change', '[data-role="imageWidth"]', this.changeWidth );
		this.on( 'click', 'label[for^="image_align"]', this.toggleAlign );
		this.on( 'change', 'input[name="image_aspect_ratio"]', this.toggleRatio );
		this.setup();
	},

	/**
	 * Setup
	 *
	 * @returns 	{void}
	 */
	setup: function () {
		this._ratioWidth = this.scope.attr('data-imageWidthRatio');
		this._ratioHeight = this.scope.attr('data-imageHeightRatio');

		if( this.scope.find('input[name="image_aspect_ratio"]').is(':checked') ){
/**
		*	this.scope.find('[data-role="imageHeight"]').prop('disabled', true);
*/
		}
	},

	/**
	 * Toggles between the alighment options, highlighting the one the user clicked
	 *
	 * @param 		{event} 	e 		Event object
	 * @returns 	{void}
	 */
	toggleAlign: function (e) {
		var thisLabel = $( e.currentTarget );
		this.scope.find('label[for^="image_align"]').removeClass('ipsButton_primary').addClass('ipsButton_light');
		thisLabel.removeClass('ipsButton_light').addClass('ipsButton_primary');
	},

	/**
	 * Event handler for toggling the 'preserve aspect ratio' option
	 *
	 * @param 		{event} 	e 		Event object
	 * @returns 	{void}
	 */
	toggleRatio: function (e) {
		var sameRatio = $( e.currentTarget ).is(':checked');

		if( sameRatio ){
			this.changeWidth();
		}
/**
		* this.scope.find('[data-role="imageHeight"]').prop('disabled', sameRatio);
*/
	},

	/**
	 * Event handler for changing the height
	 * Keeps the width in ratio if enabled
	 *
	 * @returns 	{void}
	 */
	changeHeight: function () {
		var sameRatio = this.scope.find('input[name="image_aspect_ratio"]').is(':checked');
		var thisVal = parseInt( this.scope.find('[data-role="imageHeight"]').val() );
		var width = this.scope.find('[data-role="imageWidth"]');
		var widthVal = parseInt( width.val() );

		if( sameRatio ){
			width.val( Math.ceil( thisVal * this._ratioWidth ) );
		}
	},

	/**
	 * Event handler for changing the width
	 * Keeps the height in ratio if enabled
	 *
	 * @returns 	{void}
	 */
	changeWidth: function () {
		var sameRatio = this.scope.find('input[name="image_aspect_ratio"]').is(':checked');
		var thisVal = parseInt( this.scope.find('[data-role="imageWidth"]').val() );
		var height = this.scope.find('[data-role="imageHeight"]');
		var heightVal = parseInt( height.val() );

		if( sameRatio ){
			height.val( Math.ceil( thisVal * this._ratioHeight ) );
		}
	},

	/**
	 * Event handler for submitting the form
	 *
	 * @param 		{event} 	e 		Event object
	 * @returns 	{void}
	 */
	formSubmit: function (e) {
		e.preventDefault();
		e.stopPropagation();
		this._updateImage(e);
	},

	/**
	 * Event handler for 'insert' url button
	 *
	 * @param 		{event} 	e 		Event object
	 * @returns 	{void}
	 */
	_updateImage: function (e) {

		var widthInput = this.scope.find('[data-role="imageWidth"]');
		var heightInput = this.scope.find('[data-role="imageHeight"]');
		var sameRatio = this.scope.find('input[name="image_aspect_ratio"]').is(':checked');
		var error = false;

		if ( parseInt( widthInput.val() ) > parseInt( widthInput.attr('max') ) ) {
			error = true;
			widthInput.closest('.ipsFieldRow').addClass('ipsFieldRow_error');
			this.scope.find('[data-role="imageSizeWarning"]').text( ips.getString( 'editorImageMaxWidth', { 'maxwidth': widthInput.attr('max') } ) );
		}
		if ( parseInt( heightInput.val() ) > parseInt( heightInput.attr('max') ) ) {
			error = true;
			widthInput.closest('.ipsFieldRow').addClass('ipsFieldRow_error');
			this.scope.find('[data-role="imageSizeWarning"]').text( ips.getString( 'editorImageMaxHeight', { 'maxheight': heightInput.attr('max') } ) );
		}

		if ( !error ) {								
			var editor = $( 'textarea[name="' + $( this.scope ).data('editorid') + '"]' ).closest('[data-ipsEditor]').data('_editor');				
			editor.updateImage( widthInput.val(), ( sameRatio ? 'auto' : heightInput.val() ), this.scope.find('[data-role="imageAlign"]:checked').val(), this.scope.find('[data-role="imageLink"]').val(), this.scope.find('[data-role="imageAlt"]').val() );

			this.trigger('closeDialog');
		}
	}
});
}(jQuery, _));

 

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

Edited by Fantik

Share this post


Link to post
Share on other sites

*

Edited by Fantik

Share this post


Link to post
Share on other sites

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

А галка установлена?

Share this post


Link to post
Share on other sites

А как в 4.3. задать что бы автоматом ужимались фото и картинки в сообщениях до 650 допустим?

Share this post


Link to post
Share on other sites

А как в 4.3. задать что бы автоматом ужимались фото и картинки в сообщениях до 650 допустим?

 

В АЦ есть настройка "Maximum image dimensions to display"

  • Upvote 1

Share this post


Link to post
Share on other sites

А где примерно? уже все глаза сломал...

Share this post


Link to post
Share on other sites

В АЦ же есть поиск или ссылка на страницу с настройками admin/?adsess=utuqc12ll6mmrewda82i8ddh55&app=core&module=settings&controller=posting

Share this post


Link to post
Share on other sites

Понял. Думал там только для загружаемых изображений. У меня загрузка отключена. А вот с внешних урл - вот это надо. Пробую.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...