Этот быстрый совет объясняет, как добавить пользовательский столбец на экранах управления вашего блога WordPress.
Недавно я почувствовал необходимость начать использовать избранные изображения вместо timthumb.php в первый раз. Все было замечательно, за исключением того, что я нахожу это действительно раздражающим, потому что я не мог точно указать, какой размер должен быть у изображения (жесткая обрезка).
Посмотрев некоторое время вокруг себя, я обнаружил, что большинство людей решило использовать плагин, который в конечном итоге содержал слишком много кода.
Кроме того, я хотел иметь возможность обслуживать адаптивный макет, используя класс системы сетки Skeleton « scale-with-grid » — первоначальную причину использования избранных изображений, для которых не требуется атрибут ширины и высоты внешнего интерфейса.
Вот обходной путь, который я придумал, учитывая требования проекта.
Шаг 1 Применение произвольного класса к избранным изображениям
Нам нужно иметь возможность контролировать изображение с помощью нашей таблицы стилей, поэтому нам нужно применить класс, который влияет только на само изображение. Я решил просто обернуть свое изображение в figure / div называемую « headline ». Это было в дополнение к пользовательскому размеру эскиза поста, который я уже установил в файле functions.php под названием « huge » — максимальный размер этого эскиза составлял 940, а высота — 900.
Это нормально, если вы хотите изображение с высотой 900 пикселей — но давайте посмотрим правде в глаза: вы, вероятно, не хотите, потому что это выглядит так:
Вот код, который я написал для шаблона:
|
1
2
3
|
<figure id=»headline»>
<?php the_post_thumbnail(‘huge’, array(‘class’ => ‘scale-with-grid’));
</figure>
|
Шаг 2. Немного хакерства CSS
|
1
2
3
4
|
#headline {
max-height: 400px;
overflow: hidden;
}
|
И после того, как мы добавили этот код, мы получили следующий результат, который намного более управляем:
Почему это работает
Это работает, потому что мы устанавливаем только максимальную высоту, а не максимальную ширину. WordPress по умолчанию использует максимальную ширину, которую мы устанавливаем с помощью нашей функции:
|
1
2
3
4
5
|
add_action( ‘init’, ‘my_register_image_sizes’ );
function my_register_image_sizes() {
add_image_size( ‘huge’, 940,900, true );
}
|
Технически изображение все еще там в полном размере, но мы заставили браузер скрывать что-либо на высоте 400 пикселей с помощью атрибута overflow: hidden .
Оно работает!
Одна проблема, хотя …
Хотя это выглядит хорошо, мы на самом деле дико взломали наш браузер здесь. Помните, что изображение выглядит так, как будто оно изменило размеры — как мы уже говорили, изображение все еще там в полном объеме.
Это означает, что, несмотря на то, что он отлично смотрится на мобильных устройствах, на самом деле он занимает довольно много места.
У кого-нибудь есть лучшее решение? Оставьте свои идеи в комментариях ниже!