Magento 2에서 기본 제품 이미지 크기를 어떻게 변경합니까?


25

magento 1.xx 에서는 admin에서 기본 썸네일 이미지를 변경할 수 있습니다.

시스템> 구성> 카탈로그

그러나 magento 2.0 에서이 값을 어떻게 변경할 수 있습니까?이를 허용하는 구성을 찾을 수없는 것 같습니다. 문제는 내 제품 이미지가 큰 흰색 줄무늬로 표시되고 있으며 이것을 방지하고 싶습니다.

답변:


39

Magento는 view.xml응용 프로그램의 테마 수준에서 유지되는 파일을 사용합니다 .

예를 들어 기본 테마 luma를 사용하는 경우 view.xml아래에서vendor/magento/theme-frontend-luma/etc/view.xml

이 파일에는 <images/>노드 내부에 <media>노드가 있습니다.

<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <media>
        <images module="Magento_Catalog">
            <image id="bundled_product_customization_page" type="thumbnail">
                <width>140</width>
                <height>140</height>
            </image>
            <image id="cart_cross_sell_products" type="thumbnail">
                <width>200</width>
                <height>248</height>
            </image>
            <image id="cart_page_product_thumbnail" type="small_image">
                <width>165</width>
                <height>165</height>
            </image>
            ........
        </images>
    </media>
    ......
</view>

이미지의 크기는 여기서 <image/>노드 아래에 유지됩니다 .

노드 의 id속성 값은 <image/>코드베이스에서 참조됩니다.

예를 들면 다음과 같습니다.

<image id="related_products_list" type="small_image">
    <width>152</width>
    <height>190</height>
</image>

id 값은보기 파일에서 사용됩니다 vendor/magento/module-catalog/view/frontend/templates/product/list/items.phtml

case 'related':
    /** @var \Magento\Catalog\Block\Product\ProductList\Related $block */
    if ($exist = $block->getItems()->getSize()) {
        $type = 'related';
        $class = $type;

        $image = 'related_products_list';
        $title = __('Related Products');
        $items = $block->getItems();
        $limit = 0;
        $shuffle = 0;
        $canItemsAddToCart = $block->canItemsAddToCart();

        $showWishlist = true;
        $showCompare = true;
        $showCart = false;
        $templateType = null;
        $description = false;
    }
break;

여기서는 $image이미지 크기의 값을 나타냅니다.

<?php echo $block->getImage($_item, $image)->toHtml(); ?>

테마에가없는 경우 파일 view.xml이있는 대체 테마 (부모 테마)를 사용 중일 수 있습니다 view.xml.

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Magento Luma</title>
    <parent>Magento/blank</parent>
    .....
</theme>

Magento/blank부모 테마는 다음과 같습니다 .

view.xml파일 값을 변경 / 중복하는 경우 전체 view.xml파일을 사용자 정의 테마 로 완전히 복사 하고 값을 변경해야합니다.

view.xml노드 값 대체 시스템이 없습니다. 즉, 노드의 값이 사용자 정의 테마에 view.xml 없으면 상위 테마의 view.xml 값으로 대체 되지 않으므로 전체 파일을 복사해야합니다.

값이 변경되면 다음을 실행해야합니다.

php bin/magento catalog:images:resize

새로운 이미지 크기가 재생성됩니다.


감사. 나는 이것이 어디에서 생성되고 있는지 알지 못했을 것입니다. +1
앤디 존스

5
과도하게 엔지니어링되었지만 문서화가 부족한 것을 좋아합니다. 이러한 이름을 파악하려면 코드를 살펴 보거나 db 스키마를 파헤쳐 야합니다.
Miguel Felipe Guillen Calo

답을 주셔서 감사하지만 피곤하고 마지막 설정 실행 php bin/magento catalog:images:resize 이 필요하지 않다는 것을 알았습니다 (많은 시간 이 소요됨). 캐시를 지우면 작동합니다.
키 샹

@KeyShang 당신이 맞습니다, 크기가 조정 된 이미지는 아직 존재하지 않으면 런타임에 생성됩니다. 그러나 프로덕션 성능을 향상시키는 데 도움이
되므로이

6

Magento 제품은 vendor / magento / theme-frontend-luma / etc / view.xml 경로에서 이미지 크기 치수에 view.xml 파일을 사용합니다.

여기 노드 안에 노드가 있습니다.

view.xml 파일을 복사하여 테마 경로에 넣고 app / design / frontend / MyThemePackage / MyTheme / etc / view.xml과 같이 변경하십시오.

<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
<media>
    <images module="Magento_Catalog">
        ........
        <image id="category_page_list" type="small_image">
             <width>270</width>
             <height>450</height>
        </image>
        ........
    </images>
</media>
......
</view>

캐시를 지우고 카테고리 목록 페이지를로드하십시오. 변경 사항이 반영됩니다.


확장 경로 "vendor / magento / theme-frontend-luma / etc / view.xml"도 기본 테마 패키지에 따라 "vendor / magento / theme-frontend-blank / etc / view.xml"일 수 있습니다. 너는 사용한다.
이너 마이트

제품 세부 정보 페이지에서 축소판 이미지 크기를 변경하는 방법은 무엇입니까?
jafar pinjar

1

다음과 같이 템플릿 파일에서 이미지 크기를 직접 지정할 수도 있습니다.

<?php
/**
* @var $block \Magento\Catalog\Block\Product\Widget\NewWidget
*/
$image = 'new_products_content_widget_grid';
$items = $block->getProductCollection()->getItems();
$width = 100;
$height = 100;
foreach ($items as $_item) {
    $resizedUrl = $block->resizeImage($_item, $image , $width, $height)->getUrl();
    echo '<img src="'.$resizedUrl .'" alt="alt text" />';
}

여기에 더 많은 샘플이 있습니다-https: //nwdthemes.com/2017/12/19/magento-2-product-image-size/

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.