Можно ли как то через css менять размер изображений и выводимые файлы?

Question

[Алексей]

т.е. прописать у изображений пользовательский класс и исходя из его свойств в CSS
выводить изображение, ПРИЧЕМ
так как в вордпрессе содержится несколько размеров каждого изображения, выводить наиболее подходящее по размеру
(т.е. если выводится маленькое — выводить миниатюру, если большой — выводить полное)

Answer 1

[Игорь Воротнёв]

Какой размер изображения выводить определяется на сервере. Это делает PHP.
Как его отображать (в оригинальном размере, уменьшить визуально, растянуть визуально, добавить рамку и отступы и тд) определяется на клиенте (в браузере) с помощью CSS.

Это разные вещи. Мухи отдельно, котлеты отдельно.

Comments

[Алексей]

ок, как можно указать серверу, что для изображений с классом таким то нужно в обязательном порядке выводить изображение такого то размера (из такого то фала)?

[Игорь Воротнёв]

Алексей selftrips.ru, речь идет о картинках в контенте (визуальный редактор) или другие картинки, которые выводятся через код?

[Алексей]

Игорь Воротнёв, то что видно на готовой странице посторонним пользователям

[Игорь Воротнёв]

Алексей selftrips.ru, то что видно пользователям на готовой странице - это уже готовый РЕЗУЛЬТАТ. Он может формироваться тысячей и одним способом, и для каждого способа будет свое решение. Вот я вас и спрашиваю, о каком из способов идет речь? Картинка вставляетя в визуальный редактор в админке и выводится среди контента функцией the_content() в шаблоне? Или же в коде выводится другим способом?

[Алексей]

Игорь Воротнёв, вставляется в визуальный редактор, в текстовом редакторе правится - заменяется ссылка на полный файл - выводится старый файл.
А вот если еще удалить высоту и ширину, начнет выводится новый (полный) файл.

[Игорь Воротнёв]

Алексей selftrips.ru, когда вставляете в визуальный редактор, вы можете выбрать какой размер вставить: take.ms/PjIJl

Выбирайте там нужный размер сразу, зачем вы ковыряете ссылку?

[Алексей]

Игорь Воротнёв, Это я понимаю, вопрос был в другом

[Игорь Воротнёв]

Алексей selftrips.ru, В чем же?

[Алексей]

раз в вордпрессе имеется несколько размеров изображений, иметь возможно аналогичную CSS - в одном месте указать какого размера файл надо брать, при наличии у этого изображения класса zzz.
указали некий параметр=1 берем большие файлы (и zzz под них изменили)
указали параметр=2 берем средние файлы (и zzz под них изменили)
!!но параметр влияет только на изображения у которых есть zzz!!

[Игорь Воротнёв]

Алексей selftrips.ru, кажется вы не понимаете как работает CSS. Из вашего объяснения вообще сложно что-то понять ( не только я вам на это указываю - вы сегодня уже несколько вопросов на эту тему создали и несколько человек пытаются вам объяснить, что из ваших слов ничего не понятно).

В общем, CSS классы не для этого. Это не так работает.

[Алексей]

Игорь Воротнёв, ок давайте с другого конца.
Как я понимаю через CSS легко можно управлять размером выводимого изображения, например прописав класс, в нем размеры установить.
Так вот в вордпрессе этого сделать нельзя, без дополнительных ухищрений!

[Игорь Воротнёв]

Алексей selftrips.ru,

через CSS легко можно управлять размером выводимого изображения, например прописав класс, в нем размеры установить

Нет, не так. Через CSS вы можете изменить визуальный размер, то есть сколько оно места занимать будет на странице. Сам же физический размер изображения не изменится.

Давайте по другому. В HTML вставлена картинка test.jpg, ее реальный физически размер - 800х600px. Именно в таком размере она существует и лежит на сервере. Когда ваш CSS код применяется к содержимому страницы, HTML и эта картинка считайте уже загружены с сервера в браузер, и теперь вы можете управлять только тем, что находится в вашем браузере. Напомню, картинка уже загрузилась (или будет асинхронно догружена) в размере 800x600, и с помощью CSS вы никак не можете сказать серверу "дай мне картинку другого размера". Все что вы можете сделать с помощью CSS - изменить визуальный размер. По сути, уменьшить или увеличить прямоугольник, в котором картинка будет отображена. Сама же картинка все еще 800х600.

Допустим, вы в CSS прописали

.xxx {
  width: 400px;
  height: 300px;
}

Визуально на странице картинка станет в 2 раза меньше, размером 400 на 300 пикселей. Но на самом деле это все так же картинка 800х600, только ужата в 2 раза.

Далее, вы можете прописать

.xxx {
  width: 1200px;
  height: 900px;
}

И визуально картинка будет растянута до 1200 на 900 (и ее качество станет визуально заметно хуже). Но это все так же картинка 800х600, просто растянута в 1,5 раза.

Так вот в вордпрессе этого сделать нельзя, без дополнительных ухищрений!

Да при чем здесь WordPress если вы все делаете через пень-колоду? Это далеко не первый ваш вопрос здесь. Простите, но дело в вас - вы не понимаете основ.

Answer 2

[Денис Янчевский]

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

Видимо, речь про srcset? WordPress генерирует этот атрибут автоматически начиная с версии 4.4.

Comments

[Алексей]

Это был следующий вопрос!)) обратил внимание что в коде редактора и в коде итоговой страницы код различается, как раз на этот код... зачем это было сделано?
А смысл моего вопроса в другом.
Изначально Через CSS можно управлять размером изображения. Сейчас фактически, в водпресс это сделать сложно.

[Денис Янчевский]

зачем это было сделано?

Вы прочитали про srcset? Параметр предназначен для оптимизации адаптивных изображений. Браузер загружает оптимальное по размерам изображение из списка, чтобы не грузить лишнего.

Изначально Через CSS можно управлять размером изображения. Сейчас фактически, в водпресс это сделать сложно.

С помощью CSS нельзя управлять размером изображения, Вы его можете только смаштабировать, но в любом случае будет загружено изображение оригинального размера.

[Алексей]

да, почитал, это 90% того что я хочу. (мысли сходятся)) )
Как можно «цетрализовано» менять атрибуты sizes атрибута srcset?