[ROZWIĄZANY] Wyświetlanie grafik w 4 kolumnach na stronie głównej.

[Viktorson]

Cześć. Chciałbym się przywitać z uczestnikami tego forum. Na imię mam Michał i od jakiegoś czasu zajmuję się budową sklepu z koszulkami i bluzami z nadrukiem (plus troche innych różności z nadrukami). Dotarłem do etapu gdy sam już nie do końca potrafię rozwiązać pojawiające się problemy.

W związku z czym zwracam się z prośbą o pomoc.

 

Otóż nie radzę sobie z kwestią wyświetlania grafik w 3 kolumnach w tym miejscu:

Planuję przenieść tę cześć sklepu w górę i wykorzystać ją jako menu z kategoriami w formie kafelków (troche jak w Windows 8). Sam kwadratowy obrazek i naniesona na nmi nazwa kategorii. Bez dodatkowych opisów. Chcialbym wybrane kategorie wyróżnić podwójnym rozmiarem, tak by zajęły np. 2 "miejsca" (jak ta torebka na dole). W tym celu chciałbym aby obrazki wyświetlały się w 4 kolumnach, nie w 3 jak obecnie. Proszę o pomoc z dodaniem 4 kolumny. A może jest jakiś inny sposób na wykonanie kafelków w tym miejscu.

 

Pozdrawiam

Edited November 22, 2014 by Viktorson (see edit history)

[endriu107]

33 to jest ten element  col-xs-4, sugeruje troszkę literatury na temat bootstrap.

Edited November 16, 2014 by endriu107 (see edit history)

[endriu107]

Musisz zmienić klasę dla tych zdjęć teraz jest 33% więc się mieszczą maksymalnie 3 w jednej linii.

[Viktorson]

Dziękuję za odpowiedź.

Prosiłbym jeszcze o dokładniejsze informacje w jakim pliku to się robi. Nie znam jeszcze dobrze struktury sklepu od strony serwera.

Czy to będzie jedyna zmiana czy pociągnie za sobą konieczność innych zmian?

[endriu107]

W pliku hook.tpl modułu themeconfigurator.

[Viktorson]

Zawartość pliku hook.tpl wygląda jak poniżej. Nie widzę tu nigdzie 33% więc nie mam pojęcia co zmienić.

{if isset($htmlitems) && $htmlitems}
<div id="htmlcontent_{$hook|escape:'htmlall':'UTF-8'}">
	<ul class="htmlcontent-home clearfix row">
		{foreach name=items from=$htmlitems item=hItem}
			{if $hook == 'left' || $hook == 'right'}
				<li class="htmlcontent-item-{$smarty.foreach.items.iteration|escape:'htmlall':'UTF-8'} col-xs-12">
			{else}
				<li class="htmlcontent-item-{$smarty.foreach.items.iteration|escape:'htmlall':'UTF-8'} col-xs-4">
			{/if}
					{if $hItem.url}
						<a href="{$hItem.url|escape:'htmlall':'UTF-8'}" class="item-link"{if $hItem.target == 1} onclick="return !window.open(this.href);"{/if} title="{$hItem.title|escape:'htmlall':'UTF-8'}">
					{/if}
						{if $hItem.image}
							<img src="{$link->getMediaLink("`$module_dir`img/`$hItem.image`")}" class="item-img {if $hook == 'left' || $hook == 'right'}img-responsive{/if}" title="{$hItem.title|escape:'htmlall':'UTF-8'}" alt="{$hItem.title|escape:'htmlall':'UTF-8'}" width="{if $hItem.image_w}{$hItem.image_w|intval}{else}100%{/if}" height="{if $hItem.image_h}{$hItem.image_h|intval}{else}100%{/if}"/>
						{/if}
						{if $hItem.title && $hItem.title_use == 1}
							<h3 class="item-title">{$hItem.title|escape:'htmlall':'UTF-8'}</h3>
						{/if}
						{if $hItem.html}
							<div class="item-html">
								{$hItem.html} <i class="icon-double-angle-right"></i>
							</div>
						{/if}
					{if $hItem.url}
						</a>
					{/if}
				</li>
		{/foreach}
	</ul>
</div>
{/if}

[Viktorson]

Dziękuję. Sugestia jak najbardziej słuszna.

[Viktorson]

No i lektura pomogła. Mam już swoje 4 kolumny. Muszę przyznać, że to całkiem sensowne jest jak już się załapie:). Dziękuję za pomoc.