23 марта 2015 в 17:52
Здравствуйте, уважаемы разработчики друпал!
У меня есть одна задача, которую я решил частично и требуется помощь в доработке (совет, рекомендация).
Я решил свой пост "Как дать пользователю возможность изменять стиль отображения тамбнейла записи?" при помощи модуля Image Style Selector. Благодаря модулю я сделал к записи в блог поле, в котором выбирается желаемый стиль отображения картинки. И в выводе картинки используется именно это поле, которое преобразует добавленную картинку в нужный формат. Также с помощью модуля Link Field я сделал картинку ссылкой на запись в тизере и на оригинальный файл на странице сообщения!
Все отлично!
Но есть еще одна задача усовершенствования.
Задача: В тизерах с большой картинкой текст анонса должен обрезаться до 60 букв, а в тизерах с мелкой картинкой 600 букв. Как это сделать?
Мой сайт имеет такую структуру тизеров записей на данный момент:
Тут видно, что тизер с большой картинкой и текстом 600 букв выше другого тизера, образуется пустое место.
Мне нужно, чтобы размеры тизеров по высоте были примерно одинаковыми. Модуль Masonry который это все умеет решать у меня не работает, так как он конфликтует с модулем Infinite Scroll, то есть просто не работает. Мне важнее Infinite Scroll чем Masonry.
Я думаю что нужно просто сделать хук, в котором текст анонса обрезается до 60, если в поле размер картинки анонса выбран вариант "большая картинка".
Как это сделать?
Варианты сделать в CSS фиксированную высоту тизера не подходит, так как у меня сайт адаптивный.
Просто я не знаю как прочитать поле field-image-style-teaser и если оно равно 500x400 то надо изменить поле field-body обрезать до 60 букв.
То есть если обрезать анонс текста для тизера номер 1, то все будет выровнено по высоте:
Комментарии
«Модуль Masonry который это все умеет решать у меня не работает, так как он конфликтует с модулем Infinite Scroll»
Может разобраться с конфликтом?
В вашем случае можно сделать высоту через обычный js. Но если вы хотите менять поле тизера в зависимости от параметра пресета в поле, то и его получить можно.
вопрос. а где вы обрабатываете это все? И распечатайте объект ноды с полями - должен быть указатель на пресет.
обработка полей настроена только через менеджер отображения в друпале в админке.
как обращаться к полям через хук в теме я не знаю. и где смотреть тоже не знаю. наверное есть но где достать эту теорию. в апи просто так сложно искать
Ага.
Давайте внесем ясность.
У вас вывод, который на картинке - это вьюха? или какой-то другой вывод?
вам нужно.
1. сделать сам материал (тип контента) и распределить поля. Все что вам нужно - боди и поле с картинкой. Я до конца так и не понял, зачем делать условие вывода (выбор со стороны пользователя) большая картинка или маленькая.. ну ладно, ваше право.
2. Вам нужно сделать вывод сущностей (нод). Можно вьювс. Можно блог. По сути вам нужно будет выводить настраеваемый тизер ноды.
3. Определение картинки (тут самое интересное).
У вас есть 2 пути. Даже больше.
1. Вашу задачу подобного рода решали дизайном + js. js для высчета размера картинки, дизайн - для условного обрезания текстом перехода фона в нейтральный цвет (хотя можно было бы сделать и простое обрезание по количеству слов, кстати, вам это решение подошло бы тоже). И не лезть в дебри апи. Потому что контриб решениями тут без молотка и отвертки не обойтись.
2. Можно написать свой тип поля (я бы так и делал). Но для этого нужны знания по апи и время. И желание.
3. Третий вариант (для извращенцев). В файле template.php вашей темы вы можете опреледить предпроцесс в момент построения вашей ноды или страницы. И там захайдить тизер и картинку и организовать ваш вывод так, как нужно вам.
4. Пожалуй, тоже верный, хотя и не особо друпал вей. Это node_view. Где в зависимости от вида вывода опять же - переопределять соержимое вашего тизера и на выводе делать с ним уже что угодно посредством css и шаблона.
К сожалению, я сейчас не смогу вам подробно расписать каждый вариант со стороны готового решения. Их нужно делать.
Ради собственного интереса могу сделать через свой тип поля, виджет + форматтер вывода самого поля в фул вью и в превью ноды (второй вариант). Но не ранее выходных.
Может, конечно, комрады подскажут уже готовое решение или решение из связки контриб модулей. Уверен, вы не первый, кто решает подобную задачу. Да и все мы когда-то учились.
п.с. есл в ваших планах в будущем изучать друпал и дальше, то настоятельно реккомендую изучать его апи и возможности. Очень, я бы сказал ОЧЕНЬ облегчает работу в будущем. Особенно в подобных задачах.
это вьюс, который отображает тизеры (то ест краткое содержание).
В тизере есть только два поля, как вы правильно сказали: боди и картинка.
"зачем делать условие вывода (выбор со стороны пользователя) большая картинка или маленькая" - бывает просто картинка ради развлечения глаза, и она просто мелкой болтается. а бывает важная картинка, которую надо показать крупнее - это и решают пользователи. и я им такую возможность предоставляю. на значимой большой картинке иногда есть надпись то есть текст внутри фотки, так что такое точно надо укрупнять, а не показывать 300 на 300.
js я бы рад, но не знаю как, я им просто не владею. обычно тормозит загрузку, но сводит текст до цвета фона - я думаю такой код не много весит.
3й вариант как раз что я и спрашивал. я даже точно не знаю как функция должна называться MYTHEME_node_preprocess() ?? Так. если так, то дело за малым, где найти как правильно обращаться к значениям полей field-image-style-teaser ? И как обрезать поле field-body, если field-image-style-teaser == 500x400?
да, все-таки css можно попробовать.
я пробовал сделать затухание css как тут:
http://jsfiddle.net/bLud7zpq/117/
и если делать градиент розовым то он виден, и она налазиет на буквы.
но если белым то он не виден и буквы остаются видны, то есть не покрываются этим градиентом.