Please tell me how to display "all product categories" as a picture and text display!

Question

<div class="site-header" style="clear:both;">
 <div class="container">
     <div class="header-logo">
         <a href="library/index.php" title="{$shop_name}"><img src="images/logo.gif" /></a>
        </div>
        <div class="header-nav">
         <ul class="nav-list">
             <li class="nav-category">
                 <a class="btn-category-list" href="library/catalog.php" {if $script_name eq 'index'}style="display:none;"{/if}>全部商品分类</a>
                 <div class="site-category {if $script_name neq 'index'}category-hidden{/if}">
                     <ul class="site-category-list clearfix" id="site-category-list">
                            <!--{foreach from=$categories item=cat name=foo}-->
                         <li class="category-item">
                             <a class="title" href="{$cat.url}">{$cat.name|escape:html}<i class="iconfont"></i></a>
                                <div class="children clearfix">
                                 <!--{foreach from=$cat.cat_id item=child name=no1}-->
                                    <!--{if $smarty.foreach.no1.iteration %6 ==1}-->
                                 <ul class="children-list">
                                    <!--{/if}-->
                                     <li>
                                         <a href="{$child.url}" class="link">
                                             <img class="thumb" src="data/catthumb/{$child.thumb}" width="40" height="40">
                                             <span>{$child.name|escape:html}</span>
                                            </a>
                                        </li>
                                    <!--{if $smarty.foreach.no1.iteration % 6 == 0 || $smarty.foreach.no1.last}-->
                                    </ul>
                                    <!--{/if}-->
                                    <!--{/foreach}-->
                                </div>
                            </li>
                            <!--{/foreach}-->
                        </ul>
                    </div>
                </li>
                <!-- {foreach name=nav_middle_list from=$navigator_list.middle item=nav} -->
             <li class="nav-item">
                 <a class="link" href="{$nav.url}" {if $nav.opennew eq 1}target="_blank"{/if} {if $nav.active eq 1} class="current"{/if}><span>{$nav.name}</span></a>
                    <!-- {if $nav.cat_list}-->
                    <div class='item-children'>
                     <div class="container">
                         <ul class="children-list clearfix">
                             <!--{foreach from=$nav.goods item=cat name=cat}-->
                                    <!-- {if $smarty.foreach.cat.iteration<7}-->
                                    <!--{foreach from=$cat.goods item=good name=good}-->
                                    <!-- {if $smarty.foreach.good.iteration==1}-->
                                    <li class="first">
                                        <div class="figure figure-thumb"><a href="{$good.url}"><img src="{$good.thumb|escape:html}"  alt="{$good.name|escape:html}"></a></div>
                                        <div class="title"><a href="{$good.url}">{$good.name|escape:html}</a></div>
                                        <p class="price">{$good.shop_price}元</p>
                                    </li>
                                    <!-- {/if} -->
                                    <!--{/foreach}-->
                                    <!-- {/if} -->
                                <!--{/foreach}-->
                            </ul>
                     </div>
                    </div>
                    <!-- {/if}-->
                </li>
                <!-- {/foreach} -->
            </ul>
        </div>
        <div class="header-search">
         <form action="library/search.php" method="get" id="searchForm" name="searchForm" onSubmit="return checkSearchForm()" class="search-form clearfix">
             <label class="hide">站内搜索</label>
          <input class="search-text" type="text" name="keywords" id="keyword" value="{$search_keywords|escape}" autocomplete="off">
          <input type="hidden" value="k1" name="dataBi">
          <button type="submit" class="search-btn iconfont"></button>
                {if $searchkeywords}
                <div class="hot-words" {if $search_keywords}style="display:none"{/if}>
                 {foreach from=$searchkeywords item=val} <a href="search.php?keywords={$val|escape:url}" target="_blank">{$val}</a> {/foreach}
                </div>
                {/if}
        </form>
        </div>
    </div>
 <div id="J_navMenu" class="header-nav-menu" style="display: none;">
     <div class="container"></div>
    </div>
</div>

Answer 1

Picture and text display? Do you mean to display all product categories?