OpenCart: Удаление встроенного стиля

Question

На странице категории мои стили css переопределяются встроенными стилями, создаваемыми платформой. В области администрирования под номером настройки> система - изображения [tab] вы получаете возможность изменять размер изображений. Например, я изменен продукта Размер списка Image 400 х 400, чтобы получить тот же эффект, но это делает невозможным стиль для реагирования, потому что он генерирует URL вроде так:

http://localhost/THEME/image/cache/data/demo/w1-**400x400.jpg** 

Код, который генерирует это в корень/catelog/вид/темы/шаблона/продукта/category.tpl

<img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" class="" /></a> 

Как остановить OpenCart от создания такого размера? Есть идеи?

Заранее благодарим за помощь!

Answer 1

Проблема, с которой вы сталкиваетесь, - это не встроенные стили, переопределяющие правила css, потому что по умолчанию файлы css OpenCart не устанавливают свойства CSS для ширины и высоты изображений на странице категории.

OpenCart автоматически изменяет размер изображений в соответствии с тем, что вы установили в Admin (в вашем случае 400x400). Поскольку нет правил css, отображаемыми размерами будет размер изображения.

Чтобы исправить это, вы можете попробовать одно из следующих действий:

1. В основном файле CSS, Ищет .product-list .image img и добавить width и height тегов с процентным значением. Поскольку вы упомянули, что пытаетесь получить отзывчивый сайт, вам могут потребоваться отдельные файлы css для разных размеров экрана. Проблема, с которой вы можете столкнуться, заключается в том, что если вы изменяете размеры изображений до 400x400 пикселей, но ваши определения css увеличивают изображение до более крупного размера (скажем, 600x600 пикселей), вы получите пиксельное изображение, которое будет выглядеть как низкое разрешение. Чтобы исправить это, посмотрите на второй вариант.

2. OpenCart изменяет размер изображения, чтобы повысить производительность и сэкономить на полосе пропускания. В файле контроллера каталог/контроллер/продукта/category.php, вокруг линии 213 вы увидеть следующую строку:

   $image = $this->model_tool_image->resize($result['image'], $this->config->get('config_image_product_width'), 
   

   $ this-> config-> получить ('config_image_product_height'));

   Это код, который сообщает OpenCart об изменении размера изображения в параметрах , определенных вами в настройках администратора. Если вы хотите получить ответную ширину и высоту, вы можете обнаружить устройство пользователя (с пакетом с открытым исходным кодом, например MobileDetect http://mobiledetect.net/) и отрегулировать размеры размеров в соответствии с используемым устройством.

   • При изменении размера динамически вы предотвратить изображение для пикселизированным, предполагая, что исходное изображение больше, чем требуемый размер, и в то же время, вы увеличиваете производительность и экономить на трафике.

Надеется, что это помогает!