{"id":23408581,"url":"https://github.com/magyarandras/amp-converter","last_synced_at":"2025-05-07T15:21:31.932Z","repository":{"id":34903875,"uuid":"188547308","full_name":"magyarandras/amp-converter","owner":"magyarandras","description":"A PHP library to convert HTML articles, blog posts or similar content to AMP (Accelerated Mobile Pages).","archived":false,"fork":false,"pushed_at":"2023-01-03T23:21:10.000Z","size":66,"stargazers_count":65,"open_issues_count":0,"forks_count":6,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-27T17:49:29.549Z","etag":null,"topics":["amp","amp-html","converter-library","html","php","php-library","php7","php8"],"latest_commit_sha":null,"homepage":"","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/magyarandras.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"License.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-25T09:36:00.000Z","updated_at":"2025-03-26T18:10:16.000Z","dependencies_parsed_at":"2023-01-15T10:08:24.820Z","dependency_job_id":null,"html_url":"https://github.com/magyarandras/amp-converter","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magyarandras%2Famp-converter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magyarandras%2Famp-converter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magyarandras%2Famp-converter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magyarandras%2Famp-converter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/magyarandras","download_url":"https://codeload.github.com/magyarandras/amp-converter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252902726,"owners_count":21822291,"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":["amp","amp-html","converter-library","html","php","php-library","php7","php8"],"created_at":"2024-12-22T15:15:52.054Z","updated_at":"2025-05-07T15:21:31.915Z","avatar_url":"https://github.com/magyarandras.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AMP ⚡ converter library\n\n[![Build Status](https://github.com/magyarandras/amp-converter/workflows/test/badge.svg)](https://github.com/magyarandras/amp-converter/actions)\n\nA library to convert HTML articles, blog posts or similar content to [AMP (Accelerated Mobile Pages)](https://amp.dev).\n\n**Note**: This library is not intended to convert entire HTML documents if you want to convert an entire page you should use a more advanced library, for example: [Lullabot/amp-library](https://github.com/Lullabot/amp-library/)\n\n## Installation:\n\n```\ncomposer require magyarandras/amp-converter\n```\n\n## Currently supported elments:\n* [x] amp-img\n* [x] amp-img in amp-pan-zoom\n* [x] amp-img with lightbox\n* [x] amp-video\n* [x] amp-audio\n* [x] amp-iframe(A placeholder is automatically added to the iframes, so you can [embed iframes even above the fold](https://www.youtube.com/watch?v=TqfYmlkHVCs).)\n* [x] amp-youtube\n* [x] amp-facebook\n* [x] amp-instagram\n* [x] amp-twitter\n* [x] amp-pinterest\n* [x] amp-playbuzz\n* [x] amp-gist(Github gist embed)\n* [x] amp-vimeo\n* [ ] amp-soundcloud(You can use amp-iframe instead)\n* [x] amp-vk\n* [x] amp-imgur\n* [x] amp-dailymotion\n* [x] amp-gfycat\n\n## Usage:\n\nSimple example:\n\n**Make sure your HTML code doesn't contain tags or attributes invalid in HTML5 otherwise, the generated AMP will be invalid too.**\n\n```php\n\u003c?php\n\nuse magyarandras\\AMPConverter\\Converter;\n\n/*\nIf you have images with unknown dimensions in your HTML code and use relative URLs, you must pass the images' base URL to the constructor.\n\nExamples:\n$converter = new Converter('https://example.com');\n$converter = new Converter('https://cdn.example.com');\n\n*/\n$converter = new Converter();\n\n//Load built-in converters\n$converter-\u003eloadDefaultConverters();\n\n//HTML to convert\n$html = '\n\u003cp\u003e\u003cstrong\u003eThis is a sample HTML code generated by TinyMCE.\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cimg src=\"https://cdn.example.com/photo/example_960_720.jpg\" alt=\"\" width=\"960\" height=\"640\" /\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003cspan style=\"font-family: \\'times new roman\\', times;\"\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\u003c/span\u003e\u003c/p\u003e\n\u003cp style=\"text-align: center;\"\u003e\u003ciframe src=\"https://www.youtube.com/embed/gYJ03GyrSrM\" width=\"560\" height=\"314\" allowfullscreen=\"allowfullscreen\"\u003e\u003c/iframe\u003e\u003c/p\u003e\n\u003cp style=\"text-align: center;\"\u003e\u0026nbsp;\u003c/p\u003e\n\u003cblockquote class=\"twitter-tweet\"\u003e\n\u003cp dir=\"ltr\" lang=\"en\"\u003eCheck out the latest post on the AMP Blog to learn how \u003ca href=\"https://twitter.com/AdobeExpCloud?ref_src=twsrc%5Etfw\"\u003e@AdobeExpCloud\u003c/a\u003e has been working to seamless integrate AMP support into its applications ⚡\u003cbr /\u003e\u003cbr /\u003eLearn more here 👉 \u003ca href=\"https://t.co/hX3QmJ707x\"\u003ehttps://t.co/hX3QmJ707x\u003c/a\u003e\u003c/p\u003e\n\u0026mdash; AMP Project (@AMPhtml) \u003ca href=\"https://twitter.com/AMPhtml/status/1248666798901194753?ref_src=twsrc%5Etfw\"\u003eApril 10, 2020\u003c/a\u003e\u003c/blockquote\u003e\n';\n\n//Convert html to amp html\n$amphtml = $converter-\u003econvert($html);\n\n//Get the necessary amp components\n$amp_scripts = $converter-\u003egetScripts();\n\nprint_r($amphtml);\necho PHP_EOL;\nprint_r($amp_scripts);\n\n```\nThe output:\n```html\n\u003cp\u003e\u003cstrong\u003eThis is a sample HTML code generated by TinyMCE.\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003camp-img src=\"https://cdn.example.com/photo/example_960_720.jpg\" width=\"960\" height=\"640\" alt layout=\"responsive\"\u003e\u003c/amp-img\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003cspan\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\u003c/span\u003e\u003c/p\u003e\n\u003cp\u003e\u003camp-youtube data-videoid=\"gYJ03GyrSrM\" width=\"480\" height=\"270\" layout=\"responsive\"\u003e\u003c/amp-youtube\u003e\u003c/p\u003e\n\u003cp\u003e\u0026nbsp;\u003c/p\u003e\n\u003camp-twitter width=\"375\" height=\"472\" layout=\"responsive\" data-tweetid=\"1248666798901194753\"\u003e\u003c/amp-twitter\u003e\n```\n\n```\nArray\n(\n    [0] =\u003e \u003cscript async custom-element=\"amp-youtube\" src=\"https://cdn.ampproject.org/v0/amp-youtube-0.1.js\"\u003e\u003c/script\u003e\n    [1] =\u003e \u003cscript async custom-element=\"amp-twitter\" src=\"https://cdn.ampproject.org/v0/amp-twitter-0.1.js\"\u003e\u003c/script\u003e\n)\n```\n\nYou can specify which converters to use by loading them manually:\n\n```php\n\u003c?php\n\nuse magyarandras\\AMPConverter\\Converter;\n\nuse magyarandras\\AMPConverter\\TagConverter\\AMPImgZoom;\nuse magyarandras\\AMPConverter\\TagConverter\\AMPYoutube;\n\n//PHP 7+ syntax:\n//use magyarandras\\AMPConverter\\TagConverter\\{AMPImgZoom,AMPYoutube}\n\n$converter = new Converter();\n\n$converter-\u003eaddConverter(new AMPImgZoom());\n$converter-\u003eaddConverter(new AMPYoutube());\n\n$amphtml = $converter-\u003econvert($html);\n\n$amp_scripts = $converter-\u003egetScripts();\n\nprint_r($amphtml);\nprint_r($amp_scripts);\n\n```\n\n## Images with unknown sizes\n\nIf you have images with unknown dimensions in your HTML code (you should avoid this situation if possible) and use relative URLs, you must pass the images' base URL to the constructor. You can also specify the time limit for obtaining the size of a single image (the default is 10 seconds). (Note: the time limit applies for every single image, not for the entire process)\n\n```php\n\u003c?php\n\nuse magyarandras\\AMPConverter\\Converter;\n\n$converter = new Converter([\n    'image_base_url' =\u003e 'https://example.com', //This base URL will be used if the src of an image is a relative path.\n    'image_timeout' =\u003e 5 //Obtaining the size of a single image (downloading the required data) can't take longer than 5 seconds.\n]);\n\n//Load built-in converters\n$converter-\u003eloadDefaultConverters();\n\n//HTML to convert\n$html = '\n\u003cp\u003e\u003cstrong\u003eThis is a sample HTML code generated by TinyMCE.\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cimg src=\"images/picture.jpg\" alt=\"Sample image\" /\u003e\u003c/strong\u003e\u003c/p\u003e\n';\n\n//Convert html to amp html\n$amphtml = $converter-\u003econvert($html);\n\n//Get the necessary amp components\n$amp_scripts = $converter-\u003egetScripts();\n\nprint_r($amphtml);\necho PHP_EOL;\nprint_r($amp_scripts);\n```\n\n## Writing your own converters:\n\nThe library can't support everything out of the box, but you can extend it with your own converters(or you can replace existing ones if you need).\n\nFor example, consider the following: You use a jQuery countdown library in some of your articles/blog posts and you want to convert the following code to AMP.\n\n```html\n\u003c!-- The following line should be replaced with amp-date-countdown component --\u003e\n\u003cdiv data-countdown=\"2038/01/19\"\u003e\u003c/div\u003e\n\n\u003c!-- Countdown library: http://hilios.github.io/jQuery.countdown/examples/multiple-instances.html --\u003e\n\u003cscript\u003e\n$('[data-countdown]').each(function() {\n  var $this = $(this), finalDate = $(this).data('countdown');\n  $this.countdown(finalDate, function(event) {\n    $this.html(event.strftime('%D days %H:%M:%S'));\n  });\n});\n\u003c/script\u003e\n```\n\nYou can create a custom converter class that implements the TagConverterInterface.\n\n```php\n\u003c?php\n\nclass CountdownConverter implements \\magyarandras\\AMPConverter\\TagConverterInterface\n{\n\n    private $necessary_scripts = [];\n\n    private $extension_scripts = [\n    '\u003cscript async custom-element=\"amp-date-countdown\" src=\"https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js\"\u003e\u003c/script\u003e',\n    '\u003cscript async custom-template=\"amp-mustache\" src=\"https://cdn.ampproject.org/v0/amp-mustache-0.2.js\"\u003e\u003c/script\u003e'\n    ];\n\n    public function convert(\\DOMDocument $doc)\n    {\n\n        $query = '//div[@data-countdown]';\n\n        $xpath = new \\DOMXPath($doc);\n\n        $entries = $xpath-\u003equery($query);\n\n        if ($entries-\u003elength \u003e 0) {\n            $this-\u003enecessary_scripts = $this-\u003eextension_scripts;\n        }\n\n        foreach ($entries as $tag) {\n\n            //Although in this example there isn't any validation, you definitely should check if the date is valid.\n            $timestamp = strtotime($tag-\u003egetAttribute('data-countdown'));\n\n            $countdown = $doc-\u003ecreateElement('amp-date-countdown');\n\n            $countdown-\u003esetAttribute('timestamp-seconds', $timestamp);\n            $countdown-\u003esetAttribute('layout', 'fixed-height');\n            $countdown-\u003esetAttribute('height', '50');\n\n            $template = $doc-\u003ecreateElement('template');\n            $template-\u003esetAttribute('type', 'amp-mustache');\n\n            $paragraph = $doc-\u003ecreateElement('p');\n            $paragraph-\u003esetAttribute('class', 'p1');\n\n            $text = $doc-\u003ecreateTextNode('{{d}} days, {{h}} hours, {{m}} minutes and {{s}} seconds');\n\n            $paragraph-\u003eappendChild($text);\n            \n            $template-\u003eappendChild($paragraph);\n            $countdown-\u003eappendChild($template);\n\n            $tag-\u003eparentNode-\u003ereplaceChild($countdown, $tag);\n        }\n                  \n\n\n        return $doc;\n    }\n\n    public function getNecessaryScripts() \n    {\n        return $this-\u003enecessary_scripts;\n    }\n\n}\n\n```\n\nUsing the custom converter:\n\n```php\n\u003c?php\n\nrequire_once 'vendor/autoload.php';\nrequire_once 'CountdownConverter.php';\n\nuse magyarandras\\AMPConverter\\Converter;\n\n$converter = new Converter();\n\n//Load built-in converters\n$converter-\u003eloadDefaultConverters();\n\n$converter-\u003eaddConverter(new CountdownConverter());\n\n$html = '\u003cdiv\u003e\u003ch1\u003eHello!\u003c/h1\u003e\u003cdiv data-countdown=\"2038/01/19\"\u003e\u003c/div\u003e\u003c/div\u003e';\n\n//Convert html to amp html\n$amphtml = $converter-\u003econvert($html);\n\n//Get the necessary amp components\n$amp_scripts = $converter-\u003egetScripts();\n\nprint_r($amphtml);\nprint_r($amp_scripts);\n\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagyarandras%2Famp-converter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmagyarandras%2Famp-converter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagyarandras%2Famp-converter/lists"}