{"id":19623843,"url":"https://github.com/appleple/acms-image-placeholder","last_synced_at":"2025-02-26T19:32:14.837Z","repository":{"id":66341121,"uuid":"134015059","full_name":"appleple/acms-image-placeholder","owner":"appleple","description":"Image placeholder for a-blog cms.","archived":false,"fork":false,"pushed_at":"2018-05-19T00:58:51.000Z","size":63,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-01-09T11:55:40.163Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/appleple.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2018-05-19T00:09:11.000Z","updated_at":"2019-05-01T15:27:33.000Z","dependencies_parsed_at":"2023-03-10T23:51:28.811Z","dependency_job_id":null,"html_url":"https://github.com/appleple/acms-image-placeholder","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appleple%2Facms-image-placeholder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appleple%2Facms-image-placeholder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appleple%2Facms-image-placeholder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appleple%2Facms-image-placeholder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/appleple","download_url":"https://codeload.github.com/appleple/acms-image-placeholder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240921526,"owners_count":19878944,"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","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":[],"created_at":"2024-11-11T11:35:49.121Z","updated_at":"2025-02-26T19:32:14.801Z","avatar_url":"https://github.com/appleple.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ImagePlaceholder for a-blog cms\n\na-blog cms Ver.2.8.0より拡張アプリ「ImagePlaceholder」を利用できるようになります。\n\n## ダウンロード\n[ImagePlaceholder for a-blog cms](https://github.com/appleple/acms-image-placeholder/raw/master/build/ImagePlaceholder.zip)\n\n\n## 使い方\nまず、SVG画像はエントリーなどの保存時に生成されますので、上記の設定が完了後、エントリーを再保存して下さい。その後、SVGプレイスホルダーの出すには校正オプションを使って出力します。\n\n### 単色プレイスホルダーの場合\n\n```\n\u003cimg src=\"{path}[fillCollorImage]\" alt=\"{alt}\" width=\"{x}\" height=\"{y}\"/\u003e\n```\n\n### シルエットプレイスホルダーの場合\n```\n\u003cimg src=\"{path}[dataUrlSvg]\" alt=\"{alt}\" width=\"{x}\" height=\"{y}\"/\u003e\n```\n\nただ、このままだと画像がプレイスホルダー画像に差し代わるだけで、プレイスホルダーとして動きません。 そこで、最初はSVGプレイスホルダー画像を表示しておき、JavaScriptを使って画像がロードされたタイミングで、本来の画像に差し替える処理を行います。\n\n```\n\u003cscript\u003e\n  ACMS.Ready(function(){\n    $('.js-lazy-load').each(function(){\n      var $self = $(this);\n      var url = $self.data('url');\n      var imageObj = new Image();\n      imageObj.item = $self;\n      imageObj.source = url;\n      imageObj.onload = function(){\n        var self = this;\n        setTimeout(function(){\n          self.item.attr('src', self.source);\n        }, 500 + 3000 * Math.random());\n      };\n      imageObj.src = url;\n    });\n  });\n\u003c/script\u003e\n\u003cimg class=\"js-lazy-load\"\n     src=\"{path}[dataUrlSvg]\"\n     alt=\"{alt}\"\n     width=\"{x}\"\n     height=\"{y}\"\n     data-url=\"%{HTTP_ROOT}{path}\"\n     data-placeholder=\"{path}[dataUrlSvg]\"\n\u003e\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappleple%2Facms-image-placeholder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fappleple%2Facms-image-placeholder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappleple%2Facms-image-placeholder/lists"}