{"id":15172939,"url":"https://gitlab.com/sashainparis/imagefield_css","last_synced_at":"2026-02-02T12:17:19.712Z","repository":{"id":62696249,"uuid":"13227643","full_name":"sashainparis/imagefield_css","owner":"sashainparis","description":"Inspired by Color Field module proposed by targoo, this module provide a formatter that allows an imagefield value to be displayed through CSS.","archived":false,"fork":false,"pushed_at":null,"size":null,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":null,"default_branch":"master","last_synced_at":"2024-12-29T09:42:36.293Z","etag":null,"topics":["drupal7","module"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":null,"metadata":{"files":{"readme":"README.txt","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-08T22:21:35.810Z","updated_at":"2019-07-08T22:21:35.810Z","dependencies_parsed_at":"2022-11-04T15:47:05.136Z","dependency_job_id":null,"html_url":"https://gitlab.com/sashainparis/imagefield_css","commit_stats":null,"previous_names":[],"tags_count":3,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/repositories/sashainparis%2Fimagefield_css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/repositories/sashainparis%2Fimagefield_css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/repositories/sashainparis%2Fimagefield_css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/repositories/sashainparis%2Fimagefield_css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/owners/sashainparis","download_url":"https://gitlab.com/sashainparis/imagefield_css/-/archive/master/imagefield_css-master.zip","host":{"name":"gitlab.com","url":"https://gitlab.com","kind":"gitlab","repositories_count":4517729,"owners_count":6761,"icon_url":"https://github.com/gitlab.png","version":null,"created_at":"2022-05-30T11:31:42.605Z","updated_at":"2024-07-18T11:24:13.055Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/owners"}},"keywords":["drupal7","module"],"created_at":"2024-09-27T10:24:14.492Z","updated_at":"2026-02-02T12:17:14.690Z","avatar_url":null,"language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"IMAGEFIELD_CSS module\n---------------------\n\nMaintainer: Alexandre Israël \u003cdrupal@w3w.fr\u003e\n\nInspired by Color Field module proposed by targoo, this module provides a \nformatter that allows an imagefield value to be displayed through CSS.\n\nNotice: \n * This module will not add any new html tag in the template. It only \ndefine a CSS declaration that put the image on the HTML selector you choose.\nThis CSS declaration is added inline in the HTML header.\n * Please note Selector field default value to \"body\" because I still did not\nfind any better value. Do not hesitate to make proposal in the issue queue.\n\nFeatures:\n * Display an image through CSS declaration\n * Add options to the formatter : CSS standards for background tag, Imagecache \npreset, Additional CSS field\n * Use token to define CSS path - e.g. use tid or nid to apply properly on list \npages\n\n\nREQUIREMENTS\n------------\n\n * Drupal 7.x\n\nModules\n * Token\n * Image\n\n\nINSTALLATION\n------------\n\nOrdinary installation.\nhttp://drupal.org/documentation/install/modules-themes/modules-7\n\n\nSETTING THE VALUES\n-------------------\n\nGo on the \"Manage display\" page of the Entity \u003e\u003e Bundle \u003e\u003e View mode you want\nto configure.\n\nIf the imagefield you want to configure does not exist yet, go on the \n\"Manage field\" page and create one, then come back here :-)\n\n * Select \"CSS Declaration\" in the select dropdown menu of your imagefield\n * Default values will appear on the right: you will probably want to adapt them\n * Click the Update button of the settings\n * Click the Save button of the \"Manage display\" page\n\n\nCHOOSING THE VALUES\n-------------------\n\nHere are the available values to set:\n\nWhere should we display the image?\n * Selector: A valid CSS selector such as .links li a, #logo\n\nWhat the image should look like?\n * Image Style: Select any defined Image style preset\n\nGenerating the CSS syntax for the \"background\" property\n * Color: A valid CSS color value\n * Repeat: horizontally? vertically? both? neither? etc.\n * Attachment: should it be scrolling or not?\n * Horizontal position: A valid CSS vertical position value\n * Vertical position: A valid CSS vertical position value\n * Important: check it to make this CSS have \" !important\" at the end\n\n\nEXAMPLES\n--------\n\n1) Displaying a pattern background on the node main page\n\nGo on the Full content view mode, and use \"#main-content\" as selector value.\nChoose the best Image style that will suite your expectations.\nYou don't need background color here, you probably want to repeat the image to\nhave a pattern effect dedicated to this node.\nVertical and Horizontal position or not important, but having \"important\" value\nchecked will certainly be!\n\n\n2) Place a photo, in Views list, on the right side of a teaser\n\nGo on the Teaser view mode, and use the Token integration stuff in selector: \n\"#node-[node:nid]\". This make sure you address #node-126 and #node-237 correctly\nso each one receive the right image, and don't mix up.\nHere, I find it cool to use transparency as background color: \nrgba(255,255,255,.2)\nPlease, no-repeat and scroll. I position it: right and top - but do as you \nprefer. And keep it \"important\", unless you know what you're doing.\n\n\n3) Full page background and Panel compatibility\n\nLet's say we installed Drupal Commons 3, and we want to have a beautiful image\nas background when displaying the group page.\nWe could do this on view mode page... if Commons were using it to display this \npage. But these guys prefer to use Panel, and more fun: panelizer ;-)\nClick on \"Customize this page\", add a field in Node section: get \"Field: Group \nLogo (field_gorup_logo)\". Do whatever you want with the Title, and select the\n\"CSS Declaration\" formatter - click Continue.\nHere I keep default \"body\" value for selector, no image styling (keep the \noriginal size), no color, no repeat, no scroll, center and top - and it's \n\"important\". Click Finish. Click Save\nIf you chose the right picture, this should be beautiful!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/gitlab.com%2Fsashainparis%2Fimagefield_css","html_url":"https://awesome.ecosyste.ms/projects/gitlab.com%2Fsashainparis%2Fimagefield_css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/gitlab.com%2Fsashainparis%2Fimagefield_css/lists"}