1"use strict";(self.webpackChunkframeright_docs=self.webpackChunkframeright_docs||[]).push([[9787],{3905:(e,t,r)=>{r.d(t,{Zo:()=>c,kt:()=>h});var a=r(7294);function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function o(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){n(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function s(e,t){if(null==e)return{};var r,a,n=function(e,t){if(null==e)return{};var r,a,n={},i=Object.keys(e);for(a=0;a<i.length;a++)r=i[a],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)r=i[a],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var p=a.createContext({}),l=function(e){var t=a.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):o(o({},t),e)),r},c=function(e){var t=l(e.components);return a.createElement(p.Provider,{value:t},e.children)},m="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},u=a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,i=e.originalType,p=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),m=l(r),u=n,h=m["".concat(p,".").concat(u)]||m[u]||d[u]||i;return r?a.createElement(h,o(o({ref:t},c),{},{components:r})):a.createElement(h,o({ref:t},c))}));function h(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=r.length,o=new Array(i);o[0]=u;var s={};for(var p in t)hasOwnProperty.call(t,p)&&(s[p]=t[p]);s.originalType=e,s[m]="string"==typeof e?e:n,o[1]=s;for(var l=2;l<i;l++)o[l]=r[l];return a.createElement.apply(null,o)}return a.createElement.apply(null,r)}u.displayName="MDXCreateElement"},2235:(e,t,r)=>{r.d(t,{P:()=>i});var a=r(7294),n=r(9960);function i(e){let{href:t}=e;return a.createElement(n.Z,{className:"github-corner-icon",href:t},a.createElement("img",{src:"/img/thirdparty/github-mark.svg",alt:"GitHub repository"}))}},3439:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>l,contentTitle:()=>s,default:()=>u,frontMatter:()=>o,metadata:()=>p,toc:()=>c});var a=r(7462),n=(r(7294),r(3905)),i=r(2235);const o={sidebar_position:60,tags:["explanation"],pagination_prev:null},s="WordPress Plugin",p={unversionedId:"wordpress/README",id:"wordpress/README",title:"WordPress Plugin",description:"\x3c!--",source:"@site/docs/wordpress/README.md",sourceDirName:"wordpress",slug:"/wordpress/",permalink:"/wordpress/",draft:!1,editUrl:"https://github.com/frameright/docs.frameright.io/tree/main/docs/wordpress/README.md",tags:[{label:"explanation",permalink:"/tags/explanation"}],version:"current",sidebarPosition:60,frontMatter:{sidebar_position:60,tags:["explanation"],pagination_prev:null},sidebar:"documentationSidebar",next:{title:"Contributing",permalink:"/wordpress/contributing"}},l={},c=[{value:"Which image metadata?",id:"which-image-metadata",level:2},{value:"How does it work?",id:"how-does-it-work",level:2}],m={toc:c},d="wrapper";
1function u(e){let{components:t,...r}=e;return(0,n.kt)(d,(0,a.Z)({},m,r,{components:t,mdxType:"MDXLayout"}),(0,n.kt)("h1",{id:"wordpress-plugin"},"WordPress Plugin"),(0,n.kt)(i.P,{href:"https://github.com/Frameright/image-display-control-wordpress",mdxType:"GitHubCornerIcon"}),(0,n.kt)("p",null,"An easy way to leverage image region metadata on your site."),(0,n.kt)("h2",{id:"which-image-metadata"},"Which image metadata?"),(0,n.kt)("p",null,"An image file (e.g. JPEG, PNG) contains metadata, i.e. information about the\nimage, e.g. which camera model was used or when the picture has been taken.\nThis information is usually stored at the beginning of the file. Three main\nformats, or bags of metadata, can coexist in a file and the information they\ncontain partly overlap:"),(0,n.kt)("ul",null,(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://en.wikipedia.org/wiki/IPTC_Information_Interchange_Model"},"IPTC IIM"),",\ndeveloped in the early 1990s;"),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://en.wikipedia.org/wiki/Exif"},"Exif"),", late 1990s;"),(0,n.kt)("li",{parentName:"ul"},(0,n.kt)("a",{parentName:"li",href:"https://en.wikipedia.org/wiki/Extensible_Metadata_Platform"},"XMP"),", late 2000s.")),(0,n.kt)("p",null,"The IPTC IIM format (often just called IPTC format) and the Exif format\nrepresent sets of key-value pairs, whereas the newer XMP format is an XML\nrepresentation of a more complex\n",(0,n.kt)("a",{parentName:"p",href:"https://en.wikipedia.org/wiki/Resource_Description_Framework"},"RDF")," graph. The\n",(0,n.kt)("a",{parentName:"p",href:"https://developer.adobe.com/xmp/docs/XMPSpecifications/"},"XMP Specification Part 3"),"\nspecifies how the XMP metadata are to be serialized and stored in each image\nfile format (e.g. JPEG, PNG)."),(0,n.kt)("p",null,"The\n",(0,n.kt)("a",{parentName:"p",href:"https://en.wikipedia.org/wiki/International_Press_Telecommunications_Council"},"IPTC council"),"\nhas defined a standard for storing\n",(0,n.kt)("a",{parentName:"p",href:"https://iptc.org/std/photometadata/specification/IPTC-PhotoMetadata#image-region"},"Image Regions"),"\nin XMP. ",(0,n.kt)("em",{parentName:"p"},"Image Regions")," are useful for describing specific areas of the image\n(e.g. objects, people) or for indicating how the image should be cropped or\nrotated to best fit a given container. The\n",(0,n.kt)("a",{parentName:"p",href:"https://frameright.app/"},"Frameright webapp")," can be used to define such ",(0,n.kt)("em",{parentName:"p"},"Image\nRegions")," and insert them in the metadata of a picture."),(0,n.kt)("p",null,"This WordPress plugin reads such ",(0,n.kt)("em",{parentName:"p"},"Image Regions")," in order to automatically crop\nimages the best possible way, depending on which container they are being\ndisplayed in."),(0,n.kt)("div",{className:"youtube-embed"},(0,n.kt)("iframe",{className:"youtube-embed",src:"https://www.youtube.com/embed/vlyoAPku_NU",title:"YouTube video player",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",allowFullScreen:!0})),(0,n.kt)("h2",{id:"how-does-it-work"},"How does it work?"),(0,n.kt)("p",null,"When rendering a post or a page, the plugin looks for images that have ",(0,n.kt)("em",{parentName:"p"},"Image\nRegion")," metadata and replaces them on the front-end with a\n",(0,n.kt)("a",{parentName:"p",href:"/web-component/"},"web component"),"\nautomatically zooming on the best suited ",(0,n.kt)("em",{parentName:"p"},"Image Region"),", effectively\ndoing better than a classical middle-crop."))}u.isMDXComponent=!0}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.