<picture> CakePHP的自定义助手

时间:2018-10-30 13:33:18

标签: php cakephp

我仍在学习CakePHP,我想为图片标签创建自定义帮助程序。我已经使用过并为制作了一个,但是现在我不知道如何将其包装在中。我应该使用某种数组来解决它,包括3 和1

视图:

<div class="container-fluid">
<picture>
    <?= $this->Picture->source($article, 'photolg_dir', 'photolg', '1200px'); ?>
    <?= $this->Picture->source($article, 'photomd_dir', 'photomd', '992px'); ?>
    <?= $this->Picture->source($article, 'photosm_dir', 'photosm', '768px');?>
    <?= $this->Picture->img($article, 'photo_dir', 'photo'); ?>
</picture>

我在其中创建<源>并想要添加<图片>

的自定义帮助程序
<?php
 namespace Cake\View\Helper;

 use Cake\Core\Configure;
 use Cake\Http\Response;
 use Cake\View\Helper;
 use Cake\View\StringTemplateTrait;
 use Cake\View\View;


 class RestHelper extends Helper
 {

     use StringTemplateTrait;

     public $helpers = ['Url'];

     protected $_defaultConfig = [
         'templates' => [
             'link' => '<a href="{{url}}"{{attrs}}>{{content}}</a>',
             'image' => '<img src="{{url}}"{{attrs}}/>',
             'source' => '<source srcset="{{url}}"{{attrs}}/>',
         ]
     ];

     public function __construct(View $View, array $config = [])
     {
         parent::__construct($View, $config);
         $this->response = $this->_View->response ?: new Response();
     }

    public function link($title, $url = null, array $options = [])
    {
        $escapeTitle = true;
        if ($url !== null) {
            $url = $this->Url->build($url, $options);
            unset($options['fullBase']);
        } else {
            $url = $this->Url->build($title);
            $title = htmlspecialchars_decode($url, ENT_QUOTES);
            $title = h(urldecode($title));
            $escapeTitle = false;
        }

        if (isset($options['escapeTitle'])) {
            $escapeTitle = $options['escapeTitle'];
            unset($options['escapeTitle']);
        } elseif (isset($options['escape'])) {
            $escapeTitle = $options['escape'];
        }

        if ($escapeTitle === true) {
            $title = h($title);
        } elseif (is_string($escapeTitle)) {
            $title = htmlentities($title, ENT_QUOTES, $escapeTitle);
        }

        $confirmMessage = null;
        if (isset($options['confirm'])) {
            $confirmMessage = $options['confirm'];
            unset($options['confirm']);
        }
        if ($confirmMessage) {
            $options['onclick'] = $this->_confirm($confirmMessage, 'return true;', 'return false;', $options);
        }

        $templater = $this->templater();

        return $templater->format('link', [
            'url' => $url,
            'attrs' => $templater->formatAttributes($options),
            'content' => $title
        ]);
    }

    public function image($path, array $options = [])
    {
        $path = $this->Url->image($path, $options);
        $options = array_diff_key($options, ['fullBase' => null, 'pathPrefix' => null]);

        if (!isset($options['alt'])) {
            $options['alt'] = '';
        }

        $url = false;
        if (!empty($options['url'])) {
            $url = $options['url'];
            unset($options['url']);
        }

        $templater = $this->templater();
        $image = $templater->format('image', [
            'url' => $path,
            'attrs' => $templater->formatAttributes($options),
        ]);

        if ($url) {
            return $templater->format('link', [
                'url' => $this->Url->build($url),
                'attrs' => null,
                'content' => $image
            ]);
        }

        return $image;
    }

     public function source($path, array $options = [])
     {

         $path = $this->Url->image($path, $options);
         $options = array_diff_key($options, ['fullBase' => null, 'pathPrefix' => null]);

         if (!isset($options['alt'])) {
             $options['alt'] = '';
         }

         $url = false;
         if (!empty($options['url'])) {
             $url = $options['url'];
             unset($options['url']);
         }

         $templater = $this->templater();
         $source = $templater->format('source', [
             'url' => $path,
             'attrs' => $templater->formatAttributes($options),
         ]);

         if ($url) {
             return $templater->format('link', [
                 'url' => $this->Url->build($url),
                 'attrs' => null,
                 'content' => $source
             ]);
         }

         return $source;
     }

     public function implementedEvents()
     {
         return [];
     }
 }
?>

我在view和RestHelper之间连接的另一个帮助器:

<?php
namespace App\View\Helper;

use Cake\View\Helper;
use Cake\View\View;

/**
 * Bild helper
 */
class PictureHelper extends Helper
{
    public $helpers = ['Rest', 'Html'];
    /**
     * Default configuration.
     *
     * @var array
     */
    protected $_defaultConfig = [
    ];

    public function picture(\App\Model\Entity\Article $article)
    {

    }

    public function source(\App\Model\Entity\Article $article, $dir, $size, $brpnt)
    {
        return $this->Rest->source('/' . $article->$dir . '/' . $article->$size, ['class' => 'img-fluid', 'alt' => 'Responsive image', 'media' => "(min-width: $brpnt)"]);
    }

    public function img(\App\Model\Entity\Article $article, $dir, $size)
    {
        return $this->Rest->image('/' . $article->$dir . $article->$size, ["class" => "img-fluid"], ["alt" => "Responsive image"]);
    }


    public function thumb(\App\Model\Entity\Article $article, $dir, $size)
    {
        return $this->Rest->image('/' . $article->$dir . '/' . 'thumbnail-' . $article->$size, ["class" => "img-fluid"], ["alt" => "Responsive image"]);
    }
}

非常感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

找到了解决方案。只需检查中要使用的图片的列是否已填充,然后调用source函数。 要进一步简化,只需将路径另存为DB中的一个孔,而不是像我那样分别存储文件夹和名称。

助手:

class PictureHelper extends Helper
{
    use StringTemplateTrait;

    public $helpers = ['Html', 'Url'];

    protected $_defaultConfig = [
        'templates' => [
            'source' => '<source srcset="{{url}}"{{attrs}}/>',
        ]
    ];

    public function source($path, array $options = [])
    {

        $path = $this->Url->image($path, $options);
        $options = array_diff_key($options, ['fullBase' => null, 'pathPrefix' => null]);

        if (!isset($options['alt'])) {
            $options['alt'] = '';
        }

        $url = false;
        if (!empty($options['url'])) {
            $url = $options['url'];
            unset($options['url']);
        }

        $templater = $this->templater();
        $source = $templater->format('source', [
            'url' => $path,
            'attrs' => $templater->formatAttributes($options),
        ]);

        if ($url) {
            return $templater->format('link', [
                'url' => $this->Url->build($url),
                'attrs' => null,
                'content' => $source
            ]);
        }

        return $source;
    }

    public function thumb($what, $dir, $size)
    {
        return $this->Html->image('/' . $what->$dir . '/' . 'thumbnail-' . $what->$size, ["class" => "img-fluid"], ["alt" => "Responsive image"]);
    }

    public function picture($what, $large, $largedir, $medium, $mediumdir, $small, $smalldir, $xsmall, $xsmalldir)
    {
        //
        if (!empty($what->$large)) {
            $lg = $this->source('/' . $what->$largedir . '/' . $what->$large, ['class' => 'img-fluid', 'alt' => 'Responsive image', 'media' => "(min-width: 1200px)"]);
        } else {
            $lg = NULL;
        }

        if (!empty($what->$medium)) {
            $md = $this->source('/' . $what->$mediumdir . '/' . $what->$medium,['class' => 'img-fluid', 'alt' => 'Responsive image', 'media' => "(min-width: 998px)"]);
        } else {
            $md = NULL;
        }

        if (!empty($what->$small)) {
            $sm = $this->source('/' . $what->$smalldir . '/' . $what->$small,['class' => 'img-fluid', 'alt' => 'Responsive image', 'media' => "(min-width: 768px)"]);
        } else {
            $sm = NULL;
        }

        $img = $this->Html->image('/' . $what->$xsmalldir . $what->$xsmall, ["class" => "img-fluid"], ["alt" => "Responsive image"]);

        return "<picture> $lg $md $sm $img</picture>";
    }
}

在视图中:

<div class="container-fluid">
    <?= $this->Picture->picture($article, 'photolg', 'photolg_dir', 'photomd', 'photomd_dir', 'photosm', 'photosm_dir', 'photo', 'photo_dir'); ?>
</div>