Jump to content
Dimitriyy

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

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".

Share this post


Link to post
Share on other sites

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

Edited by anboza

Share this post


Link to post
Share on other sites

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

img {max-width: 100%;}

 

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

Share this post


Link to post
Share on other sites

Спасибо.

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

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

Share this post


Link to post
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";
    }

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

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

Share this post


Link to post
Share on other sites

class="img-responsive"  а не style

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

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

Edited by vtkach

Share this post


Link to post
Share on other sites

Спасибо.

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×

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.