как сделать чтобы в поле url блока image попадала картинка из папки блока logo

[mpyctam]

Не могу разобратьcя:

{
    block: 'logo',
    mix: { block: 'header', elem: 'logo' },
    content: [
        {
            elem: 'name',
            content: {
                block: 'image',
                mix: {block: 'logo', elem: 'pic'},
                url: 'карзина.svg',
                alt: ' альтернативный текст '
            }
        }
} 

Вопрос: Как сделать чтобы image блок находил картинку которая лежит в папке блока logo, но не хочется менять путь url

[qfox]

Если коротко, то это делает борщик.

Но как настраивать его — не подскажу ;-)

[tadatuta]

@mpyctam Универсально решить задачу в текущей постановке невозможно: блок image может оказаться в совершенно разных местах (и зачастую одновременно): в библиотеке или на проекте на разных уровнях переопределения. Поэтому, если вообще ничего не менять в указанном BEMJSON, найти картинку не получится.

Однако есть несколько вариантов разный степени сложности, которые потребуют изменений в коде. 1) Самый простой — переложить картинку в бекграунд в CSS. 2) Как [1] + включить инлайнинг с помощью borschik. Потребуется вот такой конфиг:

{
    "freeze_paths" : {
        "libs/**": ":base64:",
        "libs/**/*.svg": ":encodeURIComponent:",
        "*.blocks/**": ":base64:",
        "*.blocks/**/*.svg": ":encodeURIComponent:"
    }
}

3) Считать BEMJSON динамическим и класть все используемые в нем картинки в отдельную папку, а пути указывать примерно так: url: '/i/cart.svg' — считаю, что это самый годный вариант.

4) Если же есть уверенность, что это явно статическая картинка, относящаяся к конкретному блоку, но она обязана быть в src, то можно унести ее из BEMJSON в шаблоны и использовать внутри borschik.link().

5) Как [4], но для BEMJSON. Это будет менее красиво, т.к. придется писать относительные пути от BEMJSON до картинок в блоках.

[tavriaforever]

Еще хотел добавить. Нужно перестать хотеть в этом случае класть картинку в папку блока логотипа, так как:

1. Вы можете использовать блок логотипа от проекта в проекта и Вам каждый раз придется переопределять путь к картинке внутри исходных файлов блока, делая блок менее универсальным + сама картинка логотипа напрямую не относится к блоку логотипа.
2. Из предыдущего ответа - наиболее правильными с точки зрения верстки, использовать вариант [3], также из коробки будет работать вариант [1] – но он плох тем, что если у Вашего пользователя будут отключены картинки, он даже и не узнает о том, что это был логотип. Вообще картинки могут быть отключены не всегда по вине пользователя. Бывает, что и на Вашей стороне косяки.
3. Представьте, что Вы пишете обычный html

<div class="logo">
    <img class="image logo__picture" src="../../img/logo.svg" alt="Ваш логотип" />
</div>

В этом случае Вы в любом случае будете указывать какой то прямой путь до картинки логотипа, bemjson в этом смысле не отличается.

[voischev]

@tadatuta @tavriaforever ну вы чего человека пугаете? ) Из нашего опыта блок лого практически на всех проектах используется с одной и той же картинкой, максимум меняется модификатором что-то в лого.

В таком случае нужно всего лишь преложить вынести шаблон блока лого.

block(‘logo’).content()(function(){
    return {
            elem: 'name',
            content: {
                block: 'image',
                mix: {block: 'logo', elem: 'pic'},
                url: this.ctx.image || 'карзина.svg',
                alt: this.ctx.alt || ' альтернативный текст '
            }
        }
})

А на страницу в BEMJSON подключать блок так

{
    block: 'logo',
    mix: { block: 'header', elem: 'logo' },
    alt : ‘Есть возможность при желании менять из BEMJSON поля блока'
}

Использование блока лого «из проекта в проект» всегда ведет за собой изменение css просто до неузнаваемости. Так что картинку рядом с блоком положить это не затратно.

[tadatuta]

@voischev почему пугаем? это же и есть мой вариант [4] ;)

[tavriaforever]

Видите, сколько вариантов мы предложили)

[mpyctam]

спасибо за бем.

[tadatuta]

@mpyctam бэм ;)