{"id":21065646,"url":"https://github.com/adaptlearning/adapt-contrib-graphic","last_synced_at":"2025-05-16T02:33:34.134Z","repository":{"id":12178746,"uuid":"14778746","full_name":"adaptlearning/adapt-contrib-graphic","owner":"adaptlearning","description":"A graphic component for adapt that displays different image resolutions based upon device width","archived":false,"fork":false,"pushed_at":"2024-03-11T11:33:32.000Z","size":263,"stargazers_count":3,"open_issues_count":2,"forks_count":23,"subscribers_count":26,"default_branch":"master","last_synced_at":"2024-04-13T08:10:59.147Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adaptlearning.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","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":"2013-11-28T14:16:22.000Z","updated_at":"2024-08-13T16:20:20.313Z","dependencies_parsed_at":"2024-02-22T09:29:42.542Z","dependency_job_id":"dbb4bec5-5f16-4bac-b18a-73c62c7983d3","html_url":"https://github.com/adaptlearning/adapt-contrib-graphic","commit_stats":null,"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adaptlearning%2Fadapt-contrib-graphic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adaptlearning%2Fadapt-contrib-graphic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adaptlearning%2Fadapt-contrib-graphic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adaptlearning%2Fadapt-contrib-graphic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adaptlearning","download_url":"https://codeload.github.com/adaptlearning/adapt-contrib-graphic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225402081,"owners_count":17468828,"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-19T17:55:56.764Z","updated_at":"2024-11-19T17:55:57.671Z","avatar_url":"https://github.com/adaptlearning.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# adapt-contrib-graphic\n\n**Graphic** is a *presentation component* bundled with the [Adapt framework](https://github.com/adaptlearning/adapt_framework).\n\n\u003cimg src=\"https://github.com/adaptlearning/documentation/blob/master/04_wiki_assets/plug-ins/images/graphic01.png\" alt=\"sample graphic component\" align=\"center\"\u003e\n\n**Graphic** displays graphic content that has been optimized for various devices. The component swaps out images based upon the device's screen size. Graphic can also be used as a hyperlink. When selected, it could link to an external URL, course resource (e.g. PDF) or location within the Adapt course.\n\n[Visit the **Graphic** wiki](https://github.com/adaptlearning/adapt-contrib-graphic/wiki) for more information about its functionality and for explanations of key properties.\n\n## Installation\n\nAs one of Adapt's *[core components](https://github.com/adaptlearning/adapt_framework/wiki/Core-Plug-ins-in-the-Adapt-Learning-Framework#components),* **Graphic** is included with the [installation of the Adapt framework](https://github.com/adaptlearning/adapt_framework/wiki/Manual-installation-of-the-Adapt-framework#installation) and the [installation of the Adapt authoring tool](https://github.com/adaptlearning/adapt_authoring/wiki/Installing-Adapt-Origin).\n\n* If **Graphic** has been uninstalled from the Adapt framework, it may be reinstalled.\nWith the [Adapt CLI](https://github.com/adaptlearning/adapt-cli) installed, run the following from the command line:\n`adapt install adapt-contrib-graphic`\n\n    Alternatively, this component can also be installed by adding the following line of code to the *adapt.json* file:\n    `\"adapt-contrib-graphic\": \"*\"`\n    Then running the command:\n    `adapt install`\n    (This second method will reinstall all plug-ins listed in *adapt.json*.)\n\n* If **Graphic** has been uninstalled from the Adapt authoring tool, it may be reinstalled using the [Plug-in Manager](https://github.com/adaptlearning/adapt_authoring/wiki/Plugin-Manager).\n\n## Settings Overview\n\nThe attributes listed below are used in *components.json* to configure **Graphic**, and are properly formatted as JSON in [*example.json*](https://github.com/adaptlearning/adapt-contrib-graphic/blob/master/example.json). Visit the [**Graphic** wiki](https://github.com/adaptlearning/adapt-contrib-graphic/wiki) for more information about how they appear in the [authoring tool](https://github.com/adaptlearning/adapt_authoring/wiki).\n\n### Attributes\n\n[**core model attributes**](https://github.com/adaptlearning/adapt_framework/wiki/Core-model-attributes): These are inherited by every Adapt component. [Read more](https://github.com/adaptlearning/adapt_framework/wiki/Core-model-attributes).\n\n**\\_component** (string): This value must be: `graphic`.\n\n**\\_classes** (string): CSS class name to be applied to **Graphic**’s containing `div`. The class must be predefined in one of the Less files. Separate multiple classes with a space.\n\n**\\_layout** (string): This defines the horizontal position of the component in the block. Acceptable values are `full`, `left` or `right`.\n\n**instruction** (string): This optional text appears above the component. It is frequently used to\nguide the learner’s interaction with the component.\n\n**\\_graphic** (object): The image that constitutes the component. It contains values for **alt**, **large**, and **small**.\n\n\u003e**alt** (string): The alternative text for this image or link. For image only, assign [alt text](https://github.com/adaptlearning/adapt_framework/wiki/Providing-good-alt-text) for images that convey course content only. For links, the alt text should convey the navigation or resource.\n\n\u003e**longdescription** (string): A long description of the image. This text appear below the image.\n\n\u003e**large** (string): File name (including path) of the image used with large device width. Path should be relative to the *src* folder (e.g., *course/en/images/origami-menu-two.jpg*).  \n\n\u003e**small** (string): File name (including path) of the image used with small device width. Path should be relative to the *src* folder (e.g., *course/en/images/origami-menu-two.jpg*).\n\n\u003e**attribution** (string): Optional text to be displayed as an [attribution](https://wiki.creativecommons.org/Best_practices_for_attribution). By default it is displayed below the image. Adjust positioning by modifying CSS. Text can contain HTML tags, e.g., `Copyright © 2015 by \u003cb\u003eLukasz 'Severiaan' Grela\u003c/b\u003e`\n\n\u003e**\\_url** (string): When the graphic is selected this is the url it will follow. Can be an Adapt reference, `#/id/co-10`, external, `https://www.adaptlearning.org/`, or file `course/en/images/vanilla-swatch.jpg`. If using an Adapt reference `_target` must be set to `_self`.\n\n\u003e**\\_target** (string): The target attribute specifies where to open the link or linked document. Acceptable values are `_blank` opens the linked document in a new window or tab, `_parent` opens the linked document in the parent frame, `_top` opens the linked document in the full body of the window or `_self` opens the linked document in the same frame as it was selected. If no value is set, the default is `_blank`.\n\n**_isScrollable** (boolean): Scrolls horizontally for extra wide images.\n\n**_defaultScrollPercent** (number): Starting scroll position. `0` is to the left, `50` is in the center, `100` is to the right.\n\n### Notes\nIf you don't need this component to display a different image for large/small screen sizes, you can use **src** (instead of **large** and **small**) to specify an image that will be displayed for all screen sizes.\n\n## Accessibility\nIf the 'alternative text' is left empty, the image will *not* be included in the tab order. If the component is configured to display [title or body text]((https://github.com/adaptlearning/adapt_framework/wiki/Core-model-attributes)), these will remain keyboard accessible.\n\nThe 'alternative text' for links should be descriptive of the linked resource or where the link navigates to. [See examples of alt text for functional images](https://webaim.org/techniques/alttext/#functional).\n\n## Limitations\n\nNo known limitations.\n\n----------------------------\n\u003ca href=\"https://community.adaptlearning.org/\" target=\"_blank\"\u003e\u003cimg src=\"https://github.com/adaptlearning/documentation/blob/master/04_wiki_assets/plug-ins/images/adapt-logo-mrgn-lft.jpg\" alt=\"adapt learning logo\" align=\"right\"\u003e\u003c/a\u003e\n**Author / maintainer:** Adapt Core Team with [contributors](https://github.com/adaptlearning/adapt-contrib-graphic/graphs/contributors)\n**Accessibility support:** WAI AA\n**RTL support:** Yes\n**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, IE11, Safari 12+13 for macOS/iOS/iPadOS, Opera\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadaptlearning%2Fadapt-contrib-graphic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadaptlearning%2Fadapt-contrib-graphic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadaptlearning%2Fadapt-contrib-graphic/lists"}