使用Smarty模板获取img src

Question

I have a Smarty template that is currently inserting a product image. What I would like to do is modify that code so that it gives me the src of the image only.

The template includes the file 'product_icon.tpl' and from what I gather this is the relevant code from that file:

{capture name="main_icon"}
    <a href="{"$product_detail_view_url"|fn_url}">
        {include file="common/image.tpl" obj_id=$obj_id_prefix images=$product.main_pair image_width=$settings.Thumbnails.product_lists_thumbnail_width image_height=$settings.Thumbnails.product_lists_thumbnail_height}
    </a>
{/capture}

Then the 'image.tpl' file that was included there contains this (trimmed to relevant part for brevity):

{capture name="product_image_object"}
{** Sets image displayed in product list **}
{hook name="products:product_image_object"}
    <img class="ty-pict {$valign} {$class} {if $lazy_load}lazyOwl{/if} {if $generate_image}ty-spinner{/if} cm-image" {if $obj_id && !$no_ids}id="det_img_{$obj_id}"{/if} {if $generate_image}data-ca-image-path="{$image_data.image_path}"{/if} {if $lazy_load}data-{/if}src="{if $generate_image}{$images_dir}/icons/spacer.gif{else}{$image_data.image_path}{/if}" alt="{$image_data.alt}" title="{$image_data.alt}" {if $image_onclick}onclick="{$image_onclick}"{/if}  {if $image_width || $image_height} style="min-width: {$image_data.width}px; min-height: {$image_data.height}px; "{/if}/>
    {if $image_data.alt}<span class="stonestreets-caption">{$image_data.alt}</span>{/if}
{/hook}
{/capture}

Can these snippets of code be combined and simplified down to only output the src of the resized image?

Answer 1

You can always use prin_r in tpl to check the variables

{$product.main_pair|print_r}

will be displayed something similar with different paths

 Array
(
    [pair_id] => 1072
    [image_id] => 0
    [detailed_id] => 1285
    [position] => 0
    [detailed] => Array
        (
            [object_id] => 247
            [object_type] => product
            [image_path] => http://localhost/cs-cart-git-dev/images/detailed/1/nokia_n1_perspectives_-_app.jpg
            [alt] => 
            [image_x] => 5000
            [image_y] => 3096
            [http_image_path] => http://localhost/cs-cart-git-dev/images/detailed/1/nokia_n1_perspectives_-_app.jpg
            [https_image_path] => https://localhost/cs-cart-git-dev/images/detailed/1/nokia_n1_perspectives_-_app.jpg
            [absolute_path] => /Applications/MAMP/htdocs/cs-cart-git-dev/images/detailed/1/nokia_n1_perspectives_-_app.jpg
            [relative_path] => detailed/1/nokia_n1_perspectives_-_app.jpg
        )
)

Now are more easier to spot what you need

<img src="{$product.main_pair.detailed.image_path}" width="{$product.main_pair.detailed.image_x}" height="{$product.main_pair.detailed.image_y}" alt="{$product.main_pair.detailed.alt}" />

To resize the image on the fly please use

{$image_data=$product.main_pair|fn_image_to_display:$image_width:$image_height}
<img src="{$image_data.detailed.image_path}" width="{$image_data.detailed.image_x}" height="{$image_data.detailed.image_y}" alt="{$image_data.detailed.alt}" />