Размещение фотографии любого размера — различия между версиями

Материал из Umicms
Перейти к:навигация, поиск
Строка 1: Строка 1:
Размещение фотографии любого размера в строго заданной области в XSLT шаблонизаторе
+
задача: выводить фотографии объектов каталога без обрезания на демонстрационном сайте demodizi (шаблон современный).
 +
Решение:
  
Нередко при создании сайта нам необходимо размещать изображения в четко заданные дизайном рамки, заранее не зная и не учитывая размеры изображения. Для решения данной задачи подойдет следующее решение
+
За вывод обьектов каталога отвечает шаблон ~\xsltTpls\modules\catalog\common.xsl
  
 +
В этом файле нужно заменить блок, отвечающий за создание уменьшенной картинки:
 +
<source lang="xml">
 +
<a href="{@link}" class="image">
 +
<xsl:call-template name="catalog-thumbnail">
 +
<xsl:with-param name="element-id" select="@id" />
 +
<xsl:with-param name="field-name">photo</xsl:with-param>
 +
<xsl:with-param name="empty">&empty-photo;</xsl:with-param>
 +
 +
<xsl:with-param name="width">114</xsl:with-param>
 +
<xsl:with-param name="height">120</xsl:with-param>
 +
        /xsl:call-template>
 +
</a>
 +
</source>
 +
 +
на вызов следующего шаблона с доработанной логикой.
  
 
<source lang="xml">  
 
<source lang="xml">  
 +
 +
<xsl:variable name="image_w" select="document(concat('upage://', @id))/udata/page/properties/group[@name='opisanie_tovara']/property/value/@width"/> <xsl:variable name="image_h" select="document(concat('upage://', @id))/udata/page/properties/group[@name='opisanie_tovara']/property/value/@height"/>
  
 
<xsl:choose>
 
<xsl:choose>
<xsl:when test="$image_h &lt; $image_w">
+
<xsl:when test="$image_h &lt; $image_w">
<td>
+
<td>
<a href="{@link}">
+
<a href="{@link}" class="image">
<xsl:call-template name="catalog-thumbnail">
+
<xsl:call-template name="catalog-thumbnail">
<xsl:with-param name="element_id" select="@id" />
+
<xsl:with-param name="element-id" select="@id" />
<xsl:with-param name="field_name">fotofajl_new</xsl:with-param>
+
<xsl:with-param name="field-name">photo</xsl:with-param>
<xsl:with-param name="width">160</xsl:with-param>
+
<xsl:with-param name="empty">&empty-photo;</xsl:with-param>
</xsl:call-template>
+
<xsl:with-param name="width">160</xsl:with-param>
</a>
+
<xsl:with-param name="height">auto</xsl:with-param>
</td>
+
</xsl:call-template>
</xsl:when>
+
</a>
<xsl:when test="$image_h &gt; $image_w">
+
</td>
<td>
+
</xsl:when>
<a href="{@link}">
+
<xsl:when test="$image_h &gt; $image_w">
<xsl:call-template name="catalog-thumbnail">
+
<td>
<xsl:with-param name="element_id" select="@id" />
+
<a href="{@link}" class="image">
<xsl:with-param name="field_name">fotofajl_new</xsl:with-param>
+
<xsl:call-template name="catalog-thumbnail">
<xsl:with-param name="height">160</xsl:with-param>
+
<xsl:with-param name="element-id" select="@id" />
</xsl:call-template>
+
<xsl:with-param name="field-name">photo</xsl:with-param>
</a>
+
<xsl:with-param name="empty">&empty-photo;</xsl:with-param>
</td>
+
<xsl:with-param name="height">160</xsl:with-param>
</xsl:when>
+
<xsl:with-param name="width">auto</xsl:with-param>
<xsl:otherwise>
+
</xsl:call-template>
<td>
+
</a>
<a href="{@link}">
+
</td>
<xsl:call-template name="catalog-thumbnail">
+
</xsl:when>
<xsl:with-param name="element_id" select="@id" />
+
<xsl:otherwise>
<xsl:with-param name="field_name">fotofajl_new</xsl:with-param>
+
<td>
<xsl:with-param name="height">160</xsl:with-param>
+
<a href="{@link}" class="image">
</xsl:call-template>
+
<xsl:call-template name="catalog-thumbnail">
</a>
+
<xsl:with-param name="element-id" select="@id" />
</td>
+
<xsl:with-param name="field-name">photo</xsl:with-param>
</xsl:otherwise>
+
<xsl:with-param name="empty">&empty-photo;</xsl:with-param>
 +
<xsl:with-param name="height">160</xsl:with-param>
 +
<xsl:with-param name="width">auto</xsl:with-param>
 +
</xsl:call-template>
 +
</a>
 +
</td>
 +
</xsl:otherwise>
 +
</xsl:choose>
  
 
</source>  
 
</source>  
 +
 
[[Категория:Верстка в XSLT]]
 
[[Категория:Верстка в XSLT]]

Версия 14:18, 27 февраля 2012

задача: выводить фотографии объектов каталога без обрезания на демонстрационном сайте demodizi (шаблон современный). Решение:

За вывод обьектов каталога отвечает шаблон ~\xsltTpls\modules\catalog\common.xsl

В этом файле нужно заменить блок, отвечающий за создание уменьшенной картинки:

 
 <a href="{@link}" class="image">
	<xsl:call-template name="catalog-thumbnail">
	<xsl:with-param name="element-id" select="@id" />
	<xsl:with-param name="field-name">photo</xsl:with-param>
	<xsl:with-param name="empty">&empty-photo;</xsl:with-param>
					
	<xsl:with-param name="width">114</xsl:with-param>
	<xsl:with-param name="height">120</xsl:with-param>
        /xsl:call-template>
</a>

на вызов следующего шаблона с доработанной логикой.

 

<xsl:variable name="image_w" select="document(concat('upage://', @id))/udata/page/properties/group[@name='opisanie_tovara']/property/value/@width"/> <xsl:variable name="image_h" select="document(concat('upage://', @id))/udata/page/properties/group[@name='opisanie_tovara']/property/value/@height"/> 	

<xsl:choose>
					<xsl:when test="$image_h &lt; $image_w">
						<td>
							<a href="{@link}" class="image">
								<xsl:call-template name="catalog-thumbnail">
									<xsl:with-param name="element-id" select="@id" />
									<xsl:with-param name="field-name">photo</xsl:with-param>
									<xsl:with-param name="empty">&empty-photo;</xsl:with-param>
									<xsl:with-param name="width">160</xsl:with-param>
									<xsl:with-param name="height">auto</xsl:with-param>
								</xsl:call-template>				
							</a>
						</td>
					</xsl:when>					
					<xsl:when test="$image_h &gt; $image_w">
						<td>
							<a href="{@link}" class="image">
								<xsl:call-template name="catalog-thumbnail">
									<xsl:with-param name="element-id" select="@id" />
									<xsl:with-param name="field-name">photo</xsl:with-param>
									<xsl:with-param name="empty">&empty-photo;</xsl:with-param>
									<xsl:with-param name="height">160</xsl:with-param>
									<xsl:with-param name="width">auto</xsl:with-param>
								</xsl:call-template>				
							</a>
						</td>
					</xsl:when>				
					<xsl:otherwise>
						<td>
							<a href="{@link}" class="image">
								<xsl:call-template name="catalog-thumbnail">
									<xsl:with-param name="element-id" select="@id" />
									<xsl:with-param name="field-name">photo</xsl:with-param>
									<xsl:with-param name="empty">&empty-photo;</xsl:with-param>
									<xsl:with-param name="height">160</xsl:with-param>
									<xsl:with-param name="width">auto</xsl:with-param>
								</xsl:call-template>				
							</a>
						</td>							
					</xsl:otherwise>
</xsl:choose>