Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

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


Recommended Posts

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

Опенкарт 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".

Link to comment
Share on other sites


Спасибо.

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

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

Link to comment
Share on other sites


Спасибо.

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

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

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

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

Link to comment
Share on other sites


Спасибо.

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

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

Link to comment
Share on other sites


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

Link to comment
Share on other sites


  • 4 weeks later...
  • 2 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.