カスタムフィールドタイプメディア の記事があります。これらの画像から、幅を固定してサムネイルを作成する必要があります(1200px, 700px, 450px and 250px
) picture element で表示し、さまざまなビュー(ブログ表示と記事表示)で表示します。
記事ビューでは、テンプレートオーバーライドを JImageクラス を使用してサムネイルを作成しています:
<?php
$fields = $this->item->jcfields;
foreach ($fields as $field):
if ($field->type == 'media'):
$img_path = $field->rawvalue;
$image = new JImage($img_path);
$image->setThumbnailGenerate(true);
$scale_method = JImage::SCALE_INSIDE;
$img_L = $image->createThumbs('1200x12000', $scale_method)[0]->getPath();
$img_M = $image->createThumbs('700x7000', $scale_method)[0]->getPath();
$img_S = $image->createThumbs('450x4500', $scale_method)[0]->getPath();
$img_XS = $image->createThumbs('250x2500', $scale_method)[0]->getPath();
?>
<picture>
<source srcset="<?php echo $img_L ?>" media="(min-width: 2001px)"/>
<source srcset="<?php echo $img_M ?>" media="(min-width: 1201px) and (max-width: 2000px)"/>
<source srcset="<?php echo $img_S ?>" media="(min-width: 701px) and (max-width: 1200px)"/>
<source srcset="<?php echo $img_XS ?>" media="(min-width: 401px) and (max-width: 700px)"/>
<img src="<?php echo $img_M ?>" srcset="<?php echo $img_M . ', ' . $img_L . ' 2x'?>" alt="Responsive image" />
</picture>
<?php endif; ?>
<?php endforeach; ?>
私の懸念は主にパフォーマンスと方法に関するものです:
正解です。このようにして常にサムネイルを作成します... 1つの可能性は、実装を調整して最初のロード時にのみサムネイルを作成し、次にそれらのパス/名前をデータベース。次に、サムネイルの存在と元のファイルとの整合性をチェックし、元のファイルを更新した場合にのみサムネイルを再作成できます。
コンテンツプラグインを使用してコンテンツを作成しているときに、これを行うこともできます。
https://docs.joomla.org/Plugin/Events/Content#onContentBeforeSave