Jump to content

Recommended Posts

Доброго времени суток! пожалуйста, кто может подсказать по шахматному порядку:

есть CSS и HTML для шахматного порядка:

.items-wrap {
  width: 250px;
}
.items-wrap>div {
  width: 100px;
  height: 100px;
  display:inline-block;
  background: blue;
}

.items-wrap>div:nth-child(4n-3),
.items-wrap>div:nth-child(4n) {
  background: red;
}

<div class="items-wrap">
  <div>текст</div>
  <div>фото</div>

  <div>фото</div>
  <div>текст</div>

  <div>текст</div>
  <div>фото</div>
</div>

Теперь хочу в карточке товара вывести

{foreach $properties as $property}
<div>{$property->name}</div>
{/foreach}

и изображение:

{foreach $product->images as $i=>$image}
<div><img src="{$image->filename|resize:600:600}" style="width:100%;" /></div>
{/foreach}

как правильно написать, чтобы создавался шахматный порядок?

Link to post
Share on other sites

Попробуй так

 

<div class="items-wrap">
  {foreach $properties as $i => $property}
    <div>{$property->name}</div>
    {if isset($product->images[$i])}
    <div><img src="{$product->images[$i]->filename|resize:600:600}" style="width:100%;" /></div>
    {/if}
  {/foreach}
</div>

 

Link to post
Share on other sites
1 час назад, Chudo сказал:

Попробуй так

 


<div class="items-wrap">
  {foreach $properties as $i => $property}
    <div>{$property->name}</div>
    {if isset($product->images[$i])}
    <div><img src="{$product->images[$i]->filename|resize:600:600}" style="width:100%;" /></div>
    {/if}
  {/foreach}
</div>

 

Не подходит, создает:

текст фото

текст фото

текст фото

...

Link to post
Share on other sites
<div class="items-wrap">
  {foreach $properties as $i => $property}
	{if $i % 2}
    <div>{$property->name}</div>
    <div>{if isset($product->images[$i])}<img src="{$product->images[$i]->filename|resize:600:600}" style="width:100%;" />{/if}</div>
	{else}
    <div>{if isset($product->images[$i])}<img src="{$product->images[$i]->filename|resize:600:600}" style="width:100%;" />{/if}</div>
    <div>{$property->name}</div>
	{/if}
  {/foreach}
</div>

 

Link to post
Share on other sites
13 часов назад, phukortsin сказал:

<div class="items-wrap">
  {foreach $properties as $i => $property}
	{if $i % 2}
    <div>{$property->name}</div>
    <div>{if isset($product->images[$i])}<img src="{$product->images[$i]->filename|resize:600:600}" style="width:100%;" />{/if}</div>
	{else}
    <div>{if isset($product->images[$i])}<img src="{$product->images[$i]->filename|resize:600:600}" style="width:100%;" />{/if}</div>
    <div>{$property->name}</div>
	{/if}
  {/foreach}
</div>

 

Супер! спасибо!

Только сейчас столкнулся с проблемой порядка изображений. Я добавил в изображение select выборку отображения. Через foreach работает как нужно:

{foreach $product->images as $image}
	{if $image->image_main == 1}
		<img src="{$image->filename|resize:600:600}">
	{/if}
{/foreach}

а вот если сделать вывод изображений в данном коде:

<div>{if isset($product->images[$i])}{if $product->images[$i]->image_main == 1}<img src="{$product->images[$i]->filename|resize:600:600}" style="width:100%;" />{/if}{/if}</div>

то из-за {if $product->images[$i]->image_main == 1} отображение идет:

пусто, пусто, фото, фото фото.....где "пусто" там фото которое без {if $image->image_main == 1}

Как сделать нормальный порядок без пустого?

 

 

 

 

 

 

Link to post
Share on other sites
3 часа назад, get31 сказал:

Как сделать нормальный порядок без пустого?

Сначала надо определить ТОЧНО, что такое "нормальный порядок".

И код надо бы выкладывать полностью, а не кусками.

И значения  $product->images[$i]->image_main  в Simpla стандартно нет. Если свои доработки делались, то надо все нужные детали выкладывать...

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

 

Link to post
Share on other sites
2 минуты назад, phukortsin сказал:

Сначала надо определить ТОЧНО, что такое "нормальный порядок".

И код надо бы выкладывать полностью, а не кусками.

И значения  $product->images[$i]->image_main  в Simpla стандартно нет. Если свои доработки делались, то надо все нужные детали выкладывать...

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

 

Про значение $product->images[$i]->image_main я ранее написал, что в админке добавил в изображение select выборку где отображать (код в админке карточки товара)

				{foreach $product_images as $image}
				<li style="position:relative;" id='img_{$image->id}'>
					<img src="{$image->filename|resize:600:600}" />
					<input type=hidden name='images[]' value='{$image->id}'>
					<select name="var_to_img[{$image->id}]" style="position:absolute;bottom:0;left:0;width:100%;height:18px;{if $image->image_main == 1}background:lime;{else}{/if}">
						<option value="0">---</option>
						<option value="1" {if $image->image_main == 1}selected{/if}>Преимущества</option>
					</select>
					
				</li>
				{/foreach}

в шаблоне если

{foreach $product->images as $image}
	{if $image->image_main == 0}
		<img src="{$image->filename|resize:600:600}">
	{/if}
{/foreach} 

показываем изображения которые имею значения {if $image->image_main == 0}, а в другом месте если {if $image->image_main == 1} покажем другие изображения.

Так вот, по вашему коду, который работает, за это спасибо!

<div class="items-wrap">
	{foreach $properties as $i => $property}
		{if $i % 2}
			<div>{$property->name}</div>
			<div>
            {if isset($product->images[$i])}
              	{if $product->images[$i]->image_main == 1}<img src="{$product->images[$i]->filename|resize:600:600}" style="width:100%;" />{/if}
            {/if}
  			</div>
		{else}
			<div>
            {if isset($product->images[$i])}
            	{if $product->images[$i]->image_main == 1}<img src="{$product->images[$i]->filename|resize:600:600}" style="width:100%;" />{/if}
            {/if}
  			</div>
			<div>{$property->name}</div>
		{/if}
	{/foreach}
</div>

в админке отображается вот так:

https://ibb.co/6nD0fTM

на скрине видно, что первые 2 картинки имеют image_main == 0, следующие картинки имеют image_main == 1, вот и отображение в шаблоне идет не правильное, первые 2 блока где должны быть картинки пусто, остальные имеют картинки, вот скрин как на сайте: https://ibb.co/ns6xr0Z

П.С. сайт на локалке

 

 

 

Link to post
Share on other sites
2 часа назад, shooroop сказал:

а что вы хотите выводить если пусто

делайте условие if else

так мне не нужно чтобы было пусто , мне нужно вывести то что в условии.

В данном случаи условия получается:

            {if isset($product->images[$i])}
              	{if $product->images[$i]->image_main == 1}<img src="{$product->images[$i]->filename|resize:600:600}" style="width:100%;" />{/if}
            {/if}
  			
Link to post
Share on other sites

Надо программировать более сложно. Если не хотите список нужных изображений формировать в PHP, то, например, в шаблоне помнить последнюю позицию изображения и определять следующее нужное изображение перебором по условию...

Link to post
Share on other sites
23 часа назад, get31 сказал:

{if isset($product->images[$i])} {if $product->images[$i]->image_main == 1}<img src="{$product->images[$i]->filename|resize:600:600}" style="width:100%;" />{/if} {/if}

 

{if isset($product->images[$i])}
              	{if $product->images[$i]->image_main == 1}<img src="{$product->images[$i]->filename|resize:600:600}" style="width:100%;" />{else}<img src="{$product->images[$i]->filename|resize:600:600}" style="width:100%;" />{/if}
            {/if}
  			
Link to post
Share on other sites
13 часов назад, shooroop сказал:

 


{if isset($product->images[$i])}
              	{if $product->images[$i]->image_main == 1}<img src="{$product->images[$i]->filename|resize:600:600}" style="width:100%;" />{else}<img src="{$product->images[$i]->filename|resize:600:600}" style="width:100%;" />{/if}
            {/if}
  			

Остроумно пошутил...

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...