# Képminták megjelenése és archív képek

> A kiválasztott képminta keretszíne, a képek oszlopszáma mobilon, és külön kép a bolt- és archívoldalakra.

## A kiválasztott képminta keretszíne

A **Képminta** mezőnél a kiválasztott elem alapértelmezetten szürke keretet kap. A keretszínt kétféleképp módosíthatod.

**Testreszabóval:** nyiss meg egy kiegészítő mezős termékoldalt, kattints a felső sávban a **Testreszabás** pontra, majd a bővítmény **Styles** szakaszában állítsd a kiválasztott képminta keretszínét, és kattints a **Közzététel** gombra. A részleteket a [Megjelenés](https://hub.hellowp.io/hu/plugins/product-extras-for-woocommerce/megjelenes/) fejezet írja le.

**CSS-sel:** add hozzá a sablon `style.css` fájljához, vagy a Testreszabó **További CSS** részéhez:

```css
.pewc-radio-image-wrapper label input:checked + img,
.pewc-checkbox-image-wrapper label input:checked + img {
  border: 4px solid #ff0000;
}
```

A példa piros színt és 4 képpontos vastagságot használ, a színkódot és a vastagságot cseréld a sajátodra.

## Képoszlopok száma mobilon

A jelölőnégyzet- és rádiógomb-képmezők mobilon alapértelmezetten egy oszlopban jelennek meg. Az oszlopszámot media query-vel módosíthatod a 481 és 768 képpont közötti kijelzőkre. A képek burkolóinak szélességét az oszlopok számának megfelelően állítsd: 100% osztva az oszlopok számával (két oszlop 50%, négy oszlop 25%, egy oszlop 100%).

```css
@media (min-width: 481px) and (max-width: 768px) {
  .pewc-radio-images-wrapper .pewc-radio-image-wrapper,
  .pewc-checkboxes-images-wrapper .pewc-checkbox-image-wrapper {
    width: 25%;
  }
}
```

A CSS-t a sablon `style.css` fájljába vagy a Testreszabó **További CSS** részébe írd.

## Más kép a bolt- és archívoldalakon

Ha a bolt- és archívoldalakon más képet szeretnél mutatni, mint a termékoldal kiemelt képe, ehhez a **Kép előnézet** vagy a **Szöveg előnézet** kiegészítő is kell a bővítmény mellé.

1. Töltsd fel a másik képet a médiatárba, és másold ki az URL-jét.
2. A termék szerkesztőjében, az **Egyedi mezők** részben vegyél fel egy `pr_custom_archive_image` nevű mezőt, értéke a kép URL-je.
3. Add hozzá a lenti kódot a gyermeksablonod `functions.php` fájljához vagy egy kódrészlet-bővítményhez.

A kód a WooCommerce `woocommerce_product_get_image` szűrőjére kapcsolódik. Az önálló termékoldalon változatlanul hagyja a képet, máshol pedig, ha a termékhez van `pr_custom_archive_image` érték, az ahhoz tartozó képet írja ki `woocommerce_thumbnail` méretben.

```php
function sajat_archiv_kep( $image, $product, $size, $attr, $placeholder ) {
    if ( is_product() ) {
        return $image;
    }
    $url = get_post_meta( $product->get_id(), 'pr_custom_archive_image', true );
    if ( $url ) {
        $attachment_id = attachment_url_to_postid( $url );
        $image = wp_get_attachment_image( $attachment_id, 'woocommerce_thumbnail' );
    }
    return $image;
}
add_filter( 'woocommerce_product_get_image', 'sajat_archiv_kep', 10, 5 );
```