Перейти к содержимому


Как Сделать Фиксированный Размер Рамки Фото В Описании Товара?

Автор 551, 26 июля 2012 15:04

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 55

#1 551

551

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 650 сообщений
  • ГородМосква

Отправлено 26 Июль 2012 - 15:04

Добрый день.

Подскажите, пожалуйста, как сделать фиксированный размер рамки большого фото (и маленьких) в описании товара. Сейчас, если добавляешь не квадратную фотографию, рамка тоже становится не квадратной. Во вложении скрин, на котором показано, как хотелось бы сделать.

Прикрепленные изображения

  • screen_ramka_foto.jpg

#2 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 26 Июль 2012 - 20:28

Вам необходимо в шаблоне "Товар" раздела редактора тем - найти 

<img class="cornerAll withBorder" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" />

и заменить на 

<img src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" />

Далее в файл стилей main.css добавить 

.goodsDataMainImage {
	padding: 2px;
	text-align: center;
	width: 280px;
}

#3 551

551

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 650 сообщений
  • ГородМосква

Отправлено 26 Июль 2012 - 23:13

Так не работает. Просто пропадает рамка у большого изображения и все.

#4 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 27 Июль 2012 - 20:03

Прошу прощенья, видимо сообщение потерлось. Вам необходимо ко всему выше предложенному еще в шаблоне "Товар" найти 

<div class="goodsDataMainImage">

и заменить на 

<div class="goodsDataMainImage cornerAll withBorder">

#5 Flagman86@mail.ru

Flagman86@mail.ru

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 130 сообщений
  • ГородМосква

Отправлено 28 Июль 2012 - 11:55

А как установить размер картинки, которая будет появляться когда увеличиваешь изображение товара . А то у меня сейчас фото товара и даже когда увеличиваешь это фото они одного размера

#6 551

551

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 650 сообщений
  • ГородМосква

Отправлено 28 Июль 2012 - 14:17

Просмотр сообщенияFlagman86@mail.ru (28 Июль 2012 - 11:55) писал:

А как установить размер картинки, которая будет появляться когда увеличиваешь изображение товара . А то у меня сейчас фото товара и даже когда увеличиваешь это фото они одного размера

Значит у тебя само изображение маленького размера. Если ты установишь его размер при окрытии бо'льшим, чем он на самом деле есть, то качество изображения ухудшится. Просто загружай картинки большого размера, и тогда при увеличении они будут большими.

Просмотр сообщенияVaccina (27 Июль 2012 - 20:03) писал:

Прошу прощенья, видимо сообщение потерлось. Вам необходимо ко всему выше предложенному еще в шаблоне "Товар" найти 

<div class="goodsDataMainImage">

и заменить на 

<div class="goodsDataMainImage cornerAll withBorder">


Спасибо, так работает. А как сделать, чтобы маленькие изображения под основным тоже были в рамках одинакового размера?

#7 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 30 Июль 2012 - 19:52

Это делается аналогично, только картинка <img> находиться в блоке 

<div class="goodsDataMainImagesIcon left">

и потом уже получиться 
<div class="goodsDataMainImagesIcon left cornerAll withBorder">

В данном случае даже не нужно будет задавать размеры, так как они уже заданы в классе .goodsDataMainImagesIcon

#8 551

551

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 650 сообщений
  • ГородМосква

Отправлено 30 Июль 2012 - 22:20

Спасибо. Рамки стали одинаковые, но появился еще вопрос: как выровнять по вертикали картинки в этих рамках? Добавляю vertical-align:middle; сюда .goodsDataMainImagesIcon {width:50px;height:50px;margin:0.2em 0.4em 0.2em 0em;text-align:center;} , но ничего не происходит.

#9 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 31 Июль 2012 - 19:51

Попробуйте так же добавить display:table-cell вместе с vertical-align:middle

#10 551

551

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 650 сообщений
  • ГородМосква

Отправлено 31 Июль 2012 - 22:20

Нет, так не работает. Если добавить это к маленьким изображениям, то ничего не меняется. Если добавить к большому, то картинка становится посередине по вертикали, но при этом углы рамки перестают быть скругленными и становятся острыми.

#11 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 01 Август 2012 - 20:10

Попробуйте сделать так - в файле стилей найти 

.goodsDataMainImagesIcon {
	height: 50px;
	margin: 0.2em 0.4em 0.2em 0;
	text-align: center;
	vertical-align: bottom;
	width: 50px;
}

заменить на 

.goodsDataMainImagesIcon {
	display: table;
	height: 50px;
	margin: 0.2em 0.4em 0.2em 0;
	text-align: center;
	vertical-align: bottom;
	width: 50px;
}

далее добавить 

.goodsDataMainImagesIcon a {
	 display: table-cell;
	 vertical-align: middle;
}

далее найти 

.goodsDataMainImagesIcon img {
	padding: 2px;
}

и заменить на 
.goodsDataMainImagesIcon img {
	padding: 2px;
	vertical-align: bottom;
}

#12 ogonek7777

ogonek7777

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 01 Август 2012 - 22:08

Просмотр сообщенияVaccina (30 Июль 2012 - 19:52) писал:

Это делается аналогично, только картинка <img> находиться в блоке 

<div class="goodsDataMainImagesIcon left">

и потом уже получиться 
<div class="goodsDataMainImagesIcon left cornerAll withBorder">

В данном случае даже не нужно будет задавать размеры, так как они уже заданы в классе .goodsDataMainImagesIcon

С большой картинкой все супер, а вот в маленьких картинках не получается, у меня код немного другой  <div class="goodsDataMainImagesIcon floatLeft"> , помогите, пож-та.

#13 551

551

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 650 сообщений
  • ГородМосква

Отправлено 01 Август 2012 - 22:17

Просмотр сообщенияVaccina (01 Август 2012 - 20:10) писал:

Попробуйте сделать так - в файле стилей найти 

.goodsDataMainImagesIcon {
	height: 50px;
	margin: 0.2em 0.4em 0.2em 0;
	text-align: center;
	vertical-align: bottom;
	width: 50px;
}

заменить на 

.goodsDataMainImagesIcon {
	display: table;
	height: 50px;
	margin: 0.2em 0.4em 0.2em 0;
	text-align: center;
	vertical-align: bottom;
	width: 50px;
}

далее добавить 

.goodsDataMainImagesIcon a {
	 display: table-cell;
	 vertical-align: middle;
}

далее найти 

.goodsDataMainImagesIcon img {
	padding: 2px;
}

и заменить на 
.goodsDataMainImagesIcon img {
	padding: 2px;
	vertical-align: bottom;
}

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

#14 551

551

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 650 сообщений
  • ГородМосква

Отправлено 01 Август 2012 - 22:25

Просмотр сообщенияogonek7777 (01 Август 2012 - 22:08) писал:

С большой картинкой все супер, а вот в маленьких картинках не получается, у меня код немного другой  <div class="goodsDataMainImagesIcon floatLeft"> , помогите, пож-та.

У меня работает и floatLeft , по-моему, тут вообще не причем. Также найдите в коде goodsDataMainImagesIcon и меняйте, как написано.

#15 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 02 Август 2012 - 21:07

Закругление можно задать если обвернуть блок изображения в еще один блок, и уже этому новому блоку задать закругление. Проблема в том что при display:table; блок начинает вести себя как таблица, а задавать закругление краев через border-radius для таблиц нельзя.

Пример: 

<!-- Уменьшенное изображение товара -->
				<div class="goodsDataMainImagesIcon left">
				  <a href="{goods_images.LARGE}" rel="gallery"  target="_blank" title="{goods_images.NAME}"><img class="cornerAll withBorder" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
	
				  <!-- Идентификатор изображения товара, используется для галереи изображений -->
				  <input type="hidden" rel="{goods_images.ID}" />
				</div>
получиться

<!-- Уменьшенное изображение товара -->
			  <div class="withBorder cornerAll left">
				<div class="goodsDataMainImagesIcon">
				  <a href="{goods_images.LARGE}" rel="gallery"  target="_blank" title="{goods_images.NAME}"><img class="cornerAll withBorder" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
	
				  <!-- Идентификатор изображения товара, используется для галереи изображений -->
				  <input type="hidden" rel="{goods_images.ID}" />
				</div>
			  </div>

У блока 
<div class="goodsDataMainImagesIcon left">
должно быть убрана бордюр и закругление.

Класс withBorder задает бордюр, а cornerAll закругление, left или floatLeft это обтекание по левому краю.

#16 551

551

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 650 сообщений
  • ГородМосква

Отправлено 02 Август 2012 - 23:21

Спасибо, попробую сделать так.

#17 ogonek7777

ogonek7777

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 03 Август 2012 - 15:39

Просмотр сообщения551 (01 Август 2012 - 22:25) писал:

У меня работает и floatLeft , по-моему, тут вообще не причем. Также найдите в коде goodsDataMainImagesIcon и меняйте, как написано.

Не знаю, не работает.
Что хотелось бы:
1. выровнять все иконки в одинаковую высоту и ширины (вписать в квадрат),
2. отцентровать посередине,
3. сделать полностью белый фон.

При попытке изменить по вышеуказанному появляется вторая рамка, между рамками сохранился цвет фона, выравнивание по высоте, а хочется по центру. Высота иконок разная.

#18 551

551

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 650 сообщений
  • ГородМосква

Отправлено 03 Август 2012 - 16:05

Просмотр сообщенияogonek7777 (03 Август 2012 - 15:39) писал:

Не знаю, не работает.
Что хотелось бы:
1. выровнять все иконки в одинаковую высоту и ширины (вписать в квадрат),
2. отцентровать посередине,
3. сделать полностью белый фон.

При попытке изменить по вышеуказанному появляется вторая рамка, между рамками сохранился цвет фона, выравнивание по высоте, а хочется по центру. Высота иконок разная.

Ах, да. Там, по-моему, в стилях нужно удалить рамку. Я точно не помню, но у меня сначала тоже было 2 рамки. Сейчас у меня такой код в шаблоне "товары":

<!-- Другие изображения товара. Отображаются если есть изображения товара -->
			{% IFNOT goods_images_empty %}
			  {% FOR goods_images %}
				
				<!-- Заголовок и обёртка для изображений, которая позволяет не показывать уменьшенное изображение товара если оно у него лишь одно -->
				{% IF goods_images.first %}
				  <div {% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>
					
				{% ENDIF %}
			  
				<!-- Уменьшенное изображение товара -->
				<div class="goodsDataMainImagesIcon left cornerAll withBorder">
				  <a href="{goods_images.LARGE}" rel="gallery"  target="_blank" title="{goods_images.NAME}"><img rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
	
				  <!-- Идентификатор изображения товара, используется для галереи изображений -->
				  <input type="hidden" rel="{goods_images.ID}" />
				</div>
				
				<!-- В самом конце закрываем обёртку для списка маленьких изображений товара -->
				{% IF goods_images.last %}
				
				  </div>
				{% ENDIF %}
			  {% ENDFOR %}
			{% ENDIF %}

И вот такой в стилях:

/* Страница товара. Характеристики */
.goodsDataFeatures				  {width:100%;font-size:12px;}
.goodsDataFeatures p				{line-height:1.2em;float:left;margin:0.2em 0em 0em 0em;padding:0;width:100%;background:transparent url('{ASSETS_IMAGES_PATH}grey_dotted.gif') repeat-x scroll 0 100%;}
.goodsDataFeatures p span		   {line-height:1.2em;border-bottom:1px solid #FFFFFF;background:#FFFFFF none repeat scroll 0 0;color:#A9A9A9;}
/* Страница товара. Основные данные */
.goodsDataMain td				   {vertical-align:top}
.goodsDataMainImageBlock			{width:280px;}
.goodsDataMainImageBlock img		{padding:2px;}
.goodsDataMainImagesIcon			{width:50px;height:50px;margin:0.2em 0.4em 0.2em 0em;text-align:center;vertical-align:middle;}
.goodsDataMainImagesIcon img		{padding:2px;}
.goodsDataMainImageZoom			 {text-align:center;padding:0.5em;}
.goodsDataMainImageZoom a		   {padding:5px 0px 5px 25px;background:transparent url('{ASSETS_IMAGES_PATH}zoom-magnifying.png') no-repeat scroll center left;}
.goodsDataMainModificationDataBlock,
.goodsDataMainModificationsBlock,
.goodsDataMainDiscountBlock,
.goodsDataMainDeliveryBlock,
.goodsDataFormSubmitButton,
.goodsDataMainModificationsDescriptionBlock		  {padding:1em;}

На скриншоте видно, что все рамки одинаковые, но фотки в них не выровнены по вертикали. Если к этому добавить то, что написали:

Попробуйте сделать так - в файле стилей найти 

.goodsDataMainImagesIcon {
	height: 50px;
	margin: 0.2em 0.4em 0.2em 0;
	text-align: center;
	vertical-align: bottom;
	width: 50px;
}


заменить на 

.goodsDataMainImagesIcon {
	display: table;
	height: 50px;
	margin: 0.2em 0.4em 0.2em 0;
	text-align: center;
	vertical-align: bottom;
	width: 50px;
}


далее добавить 

.goodsDataMainImagesIcon a {
	 display: table-cell;
	 vertical-align: middle;
}


далее найти 

.goodsDataMainImagesIcon img {
	padding: 2px;
}


и заменить на 
.goodsDataMainImagesIcon img {
	padding: 2px;
	vertical-align: bottom;
}

То получится - все изображения в ряд, рамки одинакового размера по горизонтали/вертикали, внутри рамок фотки посередине по вертикали/горизонтали. Но у рамок в таком случае пропадают скругленные углы. Чтобы их сделать круглыми, надо прописать остальное, но я пока не разбирался.

Прикрепленные изображения

  • Панамка CHOBI.png

#19 ogonek7777

ogonek7777

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 04 Август 2012 - 14:20

Пришлось помучится, но получилось. Большое всем спасибо!

#20 ogonek7777

ogonek7777

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 07 Январь 2013 - 22:00

Здравствуйте, я использовала настройки из данной темы, но сейчас хотелось бы сделать изображение пошире. К моему удивлению, увеличение
width: 280px; на ширину не влияет.
Обратно в Общие вопросы


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Повышение продаж, продвижение
  3. → Общие вопросы
  4. Privacy Policy