Перейти к содержанию
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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

img {max-width: 100%;}

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Спасибо.

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Спасибо.

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

Вложил скрипт в тег <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";
    }

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

class="img-responsive"  а не style

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

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

Изменено пользователем vtkach

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Спасибо.

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   1 пользователь онлайн

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.