Шахматный порядок

[get31]

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

есть 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}

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

[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>

 

[get31]

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>

 

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

текст фото

текст фото

текст фото

...

[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>

 

[get31]

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}

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

 

 

 

 

 

 

[phukortsin]

3 часа назад, get31 сказал:

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

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

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

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

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

 

[get31]

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

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

 

 

 

[shooroop]

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

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

[get31]

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}
  			

[phukortsin]

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

[shooroop]

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}
  			

[phukortsin]

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}
  			

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