Tvorba HD Shopu: Integrace mediálních souborů

V rámci pokračujícího vývoje rozšíření HD Shop jsme vytvořili základní funkce pro seznam produktů a detailní stránky. Nyní nastal čas vylepšit prezentaci produktů integrací obrázků a videí. Tato aktualizace nám umožní zobrazit jeden obrázek pro stránku s výpisem a galerii více obrázků nebo videí v zobrazení detailu produktu.

Konfigurace TCA pro mediální pole

Pro práci s mediálními soubory definujeme v konfiguraci TCA dvě pole: image pro hlavní obrázek produktu a gallery pro další média. Upravte soubor Configuration/TCA/tx_hdshop_domain_model_product.php podle následující definice:

'image' => [
   'label' => 'Image',
   'config' => [
       'type' => 'file',
       'maxitems' => 1,
       'allowed' => 'common-image-types',
   ]
],
'gallery' => [
   'label' => 'Gallery',
   'config' => [
       'type' => 'file',
       'allowed' => 'common-media-types',
   ]
]

Aby byl formulář na zadní straně strukturovaný, vytvoříme pro tato pole paletu a přiřadíme je k vyhrazené záložce:

'images' => [
   'showitem' => 'image, --linebreak--, gallery',
],

Nyní tuto paletu integrujte do backendového zobrazení produktu přidáním:

--div--;Images & Media, --palette--;;images,

Tato konfigurace vytvoří novou kartu „Images & Media“ a seskupí pole médií pro přehledné a uspořádané rozhraní backendu.

Akutalizace modelu

Dále upravíme model produktu tak, aby podporoval práci s médii. Rozšíčíme Classes/Domain/Model/Product.php s nádledujícími metodami a atributy:

use TYPO3\CMS\Extbase\Annotation as Extbase;
use TYPO3\CMS\Extbase\Persistence\ObjectStorage;
use TYPO3\CMS\Extbase\Domain\Model\FileReference;
use TYPO3\CMS\Extbase\Persistence\Generic\LazyLoadingProxy;

/**
* @var FileReference|null
*/
protected $image;

/**
* @var ObjectStorage<FileReference>|null
* @phpstan-var ObjectStorage|LazyLoadingProxy|null
* @Extbase\ORM\Lazy
*/
protected $gallery;

/**
* @return FileReference|null
*/
public function getImage()
{
   return $this->image;
}

/**
* @param FileReference|null $image
*/
public function setImage($image)
{
   $this->image = $image;
}

/**
* @return ObjectStorage|null
*/
public function getGallery()
{
   if ($this->gallery instanceof LazyLoadingProxy) {
       $this->gallery = $this->gallery->_loadRealInstance();
   }
   return $this->gallery;
}

/**
* @param ObjectStorage|null $gallery
*/
public function setGallery($gallery)
{
   $this->gallery = $gallery;
}

Vysvětlení

• Atribut image zahrnuje jednu FileReference jako hlavní obrázek.
• Atribnut gallery je ObjectStorage<FileReference> což je objekt, který zahrnuje více objektů typu FileReference.
• Anotace @Extbase\ORM\Lazy zajišťuje, že se data galerie načítají pouze v případě potřeby, čímž se optimalizuje výkon.

Vykreslování médií ve Fluidi

Pro zobrazení médií ve frontendu aktualizujeme šablony Fluid.

Tabulka produktů:

<f:if condition="{product.image}">
   <f:image image="{product.image}" width="300" fileExtension="webp" />
</f:if>

Tím zajistíte, že se obrázek produktu zobrazí na šířku 300px ve formátu WebP.

Detailní stránka:

<f:if condition="{product.gallery}">
   <f:for each="{product.gallery}" as="image">
       <f:image image="{image}" width="300" fileExtension="webp" />
   </f:for>
</f:if>

Nejlepší praktiky

• Před vykreslením vždy ověřte pole médií, abyste předešli chybám.
• Pole gallery podporuje obrázky i videa, takže podle toho upravte svůj frontend.

Závěr

Integrací podpory médií do rozšíření HD Shop jsme vylepšili prezentaci produktů a použitelnost. Tato aktualizace zlepšuje celkový uživatelský zážitek a zajišťuje, že se produkty zobrazují tím nejlepším možným způsobem.

Dále se budeme zabývat variantami ořezu obrázků, abychom dále zdokonalili správu médií. Zůstaňte naladěni!