Раздел "статьи", как сделать изображения адаптивными?

[Dimitriyy]

Здравствуйте.

Опенкарт 2.3. В разделе статьи весь контент, который загружается в админке, выводится одной переменной "$description".

<div class="row"><?php echo $column_left; ?>
    <?php if ($column_left && $column_right) { ?>
    <?php $class = 'col-sm-6'; ?>
    <?php } elseif ($column_left || $column_right) { ?>
    <?php $class = 'col-sm-9'; ?>
    <?php } else { ?>
    <?php $class = 'col-sm-12'; ?>
    <?php } ?>
    <div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?>
      <h1><?php echo $heading_title; ?></h1>
      <?php echo $description; ?><?php echo $content_bottom; ?></div>
    <?php echo $column_right; ?></div>
</div>

Изображения в этом разделе получаются неадаптивными. 

Не получается выделить эти изображения отдельно, чтобы создать для них стили.

Можно ли сделать эти изображения адаптивными или не загружать их в админке, а прописать их отдельным скриптом присвоив класс "img-responsive".

[anboza]

заходите в редактор статьи, переключаетесь в режим "просмотр кода", кнопка </> и добавляете стиль для блока

Змінено 24 серпня 2018 користувачем anboza

[SiteMix]

Самое простое, это добавить в стили код:

img {max-width: 100%;}

 

Если будет недостаточно, то можно задать селектор поточнее.

[Dimitriyy]

Спасибо.

Через редактор, как Вы писали, пытался делать раньше. Я изменял стиль для картинки с того, который подставляется автоматически (по ширине изображения style="width: 750px;") на style="img-responsive;". 

Изменения не сохраняются. Нажимаешь сохранить, пишет, что изменения сохранены. Когда открываешь посмотреть код заново, видишь старый код (style="width: 750px;). 

[Dimitriyy]

Спасибо.

Через стили делал до этого, тоже не работает.

Вложил скрипт в тег <div> с идетификатором:

<div id="information">
    <div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?>
      <h1><?php echo $heading_title; ?></h1>
      <?php echo $description; ?>
      <?php echo $content_bottom; ?></div>
    </div>

После этого прописал в стилях:

@media (max-width: 478px) {
    #information img {
        max-width: 100%;
    }
}
@media (max-width: 768px) {
    #information img {
        max-width: 100%;
    }
}
#information img {
        style="img-responsive";
    }

Не работает. Пробовал разные варианты.

Тут может ошибка в фонетике или орфографии. 

[vtkach]

class="img-responsive"  а не style

Этот клас нужно добавить к изображением в самой статье в админке в режиме просмотра кода.

https://getbootstrap.com/docs/3.3/css/#images-responsive

Змінено 25 серпня 2018 користувачем vtkach

[Dimitriyy]

Спасибо.

Получилось. Работает class="img-responsive" и style="img-responsive" тоже. Проверил оба варианта.

Проблема была в том, что в админке не сохранялись изменения. Получилось если внести изменения в код, закрыть режим просмотра кода, потом сохранять. Если режим просмотра кода не закрыть и сохранить, изменения не сохраняются.

[Dimitriyy]

class="img-responsive" работает и на локальном сайте и в сети. style="img-responsive" на локальном работает, а в сети не на каждом устройстве и не в каждом браузере.

[vtkach]

style="img-responsive" - это ошибка. Почитайте что должно быть в inline styles https://www.codecademy.com/articles/html-inline-styles

[Dimitriyy]

Спасибо.

[mardash]

В 25.08.2018 в 15:44, vtkach сказал:

class="img-responsive"  а не style

Этот клас нужно добавить к изображением в самой статье в админке в режиме просмотра кода.

https://getbootstrap.com/docs/3.3/css/#images-responsive

спасибо работает