如何用Joomla HTMLHelper实现<image>标签嵌套在<a>标签内

解决Joomla 4 HTMLHelper中标签无法嵌套到标签的问题 #

你当前的问题是因为分别调用HTMLHelper::_('link')和HTMLHelper::_('image')会输出两个独立的HTML元素，导致<img>被放在<a>标签外面。要实现嵌套，只需要把生成的<img>标签作为link方法的第二个参数（即链接的内部内容）传入即可。

修改后的代码（分步写法）： #

<div class="row">
    <?php
        foreach($customFields['photos']->rawvalue as $foto) { ?>
            <?php 
                // 先生成img标签的HTML代码
                $imgHtml = HTMLHelper::_('image', 'images/fiera/small/'.$foto, $foto, ["class" => "img-fluid"], false, 0);
                // 将img标签作为link的内容传入，实现嵌套
                echo HTMLHelper::_('link', 'images/fiera/big/'.$foto, $imgHtml, ["class" => "col-sm-6 col-md-4", "data-toggle" => "lightbox", "data-gallery" => "fiera"]);
            ?>  
    <?php } ?>
</div>

简化写法（直接嵌套调用）： #

<div class="row">
    <?php
        foreach($customFields['photos']->rawvalue as $foto) {
            echo HTMLHelper::_('link', 
                'images/fiera/big/'.$foto, 
                HTMLHelper::_('image', 'images/fiera/small/'.$foto, $foto, ["class" => "img-fluid"], false, 0), 
                ["class" => "col-sm-6 col-md-4", "data-toggle" => "lightbox", "data-gallery" => "fiera"]
            );
        }
    ?>
</div>

修改后输出的HTML结构： #

<div class="row">
    <a href="/images/fiera/big/10_fiera_big.jpg" class="col-sm-6 col-md-4" data-toggle="lightbox" data-gallery="fiera">
        <img class="img-fluid" src="/images/fiera/small/10_fiera_big.jpg" alt="10_fiera_big.jpg">
    </a>
    <a href="/images/fiera/big/11_fiera_big.jpg" class="col-sm-6 col-md-4" data-toggle="lightbox" data-gallery="fiera">
        <img class="img-fluid" src="/images/fiera/small/11_fiera_big.jpg" alt="11_fiera_big.jpg">
    </a>
</div>

这样就能实现你想要的<img>嵌套在<a>标签内的结构了。

内容的提问来源于stack exchange，提问作者agodoo