{"id":15519417,"url":"https://github.com/barryceelen/wp-relative-width-images","last_synced_at":"2026-05-17T02:39:34.353Z","repository":{"id":72312665,"uuid":"91324805","full_name":"barryceelen/wp-relative-width-images","owner":"barryceelen","description":"Make image widths percentage-based in the TinyMCE editor.","archived":false,"fork":false,"pushed_at":"2017-08-23T19:19:02.000Z","size":10,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-13T23:24:14.077Z","etag":null,"topics":["tinymce","wordpress","wordpress-plugin"],"latest_commit_sha":null,"homepage":null,"language":"PHP","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":"https://github.com/barryceelen.png","metadata":{"files":{"readme":"README.md","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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-05-15T10:20:53.000Z","updated_at":"2017-05-15T11:44:39.000Z","dependencies_parsed_at":"2023-03-11T12:29:27.493Z","dependency_job_id":null,"html_url":"https://github.com/barryceelen/wp-relative-width-images","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/barryceelen/wp-relative-width-images","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barryceelen%2Fwp-relative-width-images","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barryceelen%2Fwp-relative-width-images/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barryceelen%2Fwp-relative-width-images/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barryceelen%2Fwp-relative-width-images/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/barryceelen","download_url":"https://codeload.github.com/barryceelen/wp-relative-width-images/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barryceelen%2Fwp-relative-width-images/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279077491,"owners_count":26098288,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-15T02:00:07.814Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["tinymce","wordpress","wordpress-plugin"],"created_at":"2024-10-02T10:21:29.423Z","updated_at":"2025-10-15T12:22:56.437Z","avatar_url":"https://github.com/barryceelen.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"WordPress Fluid Width Images Plugin\n===================================\n\n[![Build Status](https://travis-ci.org/barryceelen/wp-relative-width-images.svg?branch=master)](https://travis-ci.org/barryceelen/wp-relative-width-images)\n\nFluid page widths and responsive text sizes are all the rage, but, but.. what about those poor images?\n\nThis somewhat experimental plugin adds a `rwi` data attribute to the image tag after resizing an image in the TinyMCE editor. Its value is the width of the image in percentages of the current editor width. Note that rounding will occur as css is only included for integers.\nA stylesheet is enqueued containing selectors that 'translate' the data attribute values to a percentage width, eg.\n\n```\n[data-rwi=\"50\"] { width: 50% }\n```\n\nBy default the stylesheet is only enqueued if `is_singular()` returns `true`.\nThe `relative_width_images_enqueue_styles` filter can be used to change this behaviour.\n\n```\nadd_filter( 'relative_width_images_enqueue_styles', 'prefix_my_cool_filter' );\n\nfunction prefix_my_cool_filter( $enqueue_styles ) {\n\n\tif ( is_singular() || is_archive() ) {\n\t\t$enqueue_styles = true;\n\t}\n\n\treturn $enqueue_styles;\n}\n```\n\nOn narrow screens you might want to make the relatively sized images 100% wide.\nYou could specify one or more breakpoints in your css file, setting widths for the `[data-rwi]` selector.\nFor convenience, when using a single breakpoint the `relative_width_images_breakpoint` is available where you can define a max_width value:\n\n```\nadd_filter( 'relative_width_images_breakpoint', 'prefix_my_cool_max_width_filter' );\n\nfunction prefix_my_cool_max_width_filter( $breakpoint ) {\n\n\treturn '620px'; // This is an arbitrary number, use your own.\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarryceelen%2Fwp-relative-width-images","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbarryceelen%2Fwp-relative-width-images","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarryceelen%2Fwp-relative-width-images/lists"}