Jump to content
Soong

Вопрос по фото в статьях

Recommended Posts

Добрый день!

Подскажите как фото сделать адаптивными? 

Share this post


Link to post
Share on other sites

img {

max-width: 100%;

}

Share this post


Link to post
Share on other sites

в режиме исходного кода добавить им class="image-responsive"

class="img-responsive"

Share this post


Link to post
Share on other sites
10 hours ago, AlexDW said:

в режиме исходного кода добавить им class="image-responsive"

 

class="img-responsive"

  • +1 1

Share this post


Link to post
Share on other sites
12 часов назад, AlexDW сказал:

в режиме исходного кода добавить им class="image-responsive"

 

1 час назад, Agatha65 сказал:

 

class="img-responsive"

 

Если говорить о таких статьях , то озвученный вариант мне дал не полную растяжку фото, что называется, справа было еще два пальца молоко, тогда пришлось выкручиваться старым дедовским способом 

style="width: 100%; height: auto;"

 

Но что-то я стал переживать, что мой способ не правильный, так сказать.

Что думаете?

  • +1 1

Share this post


Link to post
Share on other sites
<script type="text/javascript">
    $(document).ready(function() {
        $("img").addClass("img-responsive");
});
</script>

Можно добавить  удаление style

<script type="text/javascript">
    $(document).ready(function() {
        $("img").addClass("img-responsive");
		$("img").attr("style","");
});
</script>

скрипт соответственно добавить в файл information.tpl в самый конец.

Edited by Tom

Share this post


Link to post
Share on other sites
46 минут назад, specialforce22 сказал:

Если говорить о таких статьях , то озвученный вариант мне дал не полную растяжку фото, что называется, справа было еще два пальца молоко, тогда пришлось выкручиваться старым дедовским способом 

style="width: 100%; height: auto;"

 

Но что-то я стал переживать, что мой способ не правильный, так сказать.

Что думаете?

 

просто ТС изначально не уточнил этот момент

адаптивность - она разная может быть

 

вариант с class="img-responsive" - штатное решение движка и прекрасно работает, уменьшая изображение если оно не вписывается в размер экрана

если же вписывается или меньше - оно показывается в текущем масштабе и не растягивается

 

style="width: 100%; height: auto;" - будет масштабировать по размеру области

и если размер изображения меньше области - растягивать до ее размера, что не совсем хорошо и приводит к логичной потере качества

Share this post


Link to post
Share on other sites

можно сделать методом @Tom

но это зацепит все изображения страницы, не только статьи

 

только для самой статьи можно так:

в файле catalog\controller\information\information.php

после строки

$data['description'] = html_entity_decode($information_info['description'], ENT_QUOTES, 'UTF-8');

добавить

$data['description'] = str_replace("<img", "<img class='img-responsive'", $data['description']);

и обновить кеш модификаторов для верности

 

PS: если статья где-то используется для подтверждения - еще и про метод agree() не забыть

  • +1 1

Share this post


Link to post
Share on other sites
5 минут назад, AlexDW сказал:

но это зацепит все изображения страницы, не только статьи

Это действительно так. Можно добавить класс который использует описание, а так как в шаблонах оно у всех разное, то и общее для всех предложить не могу.

 

Как то так

 $(".класс_описания img").addClass("img-responsive");
 $(".класс_описания img").attr("style","");

  • +1 1

Share this post


Link to post
Share on other sites

Всем спасибо за ответы)

Все работает, простейший метод
class="img-responsive"

Edited by Soong

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.