No external requests \u2014 the stereo-img library is bundled with the plugin by default<\/li>\n<\/ul>\n\nShortcode Parameter Reference<\/h3>\n\n
All attributes are optional except src<\/code>. Anything you omit falls back to the site-wide default configured on the settings page.<\/p>\n\nSource<\/h4>\n\n\nsrc<\/code> \u2014 URL of the primary (or combined) source image. Required.<\/li>\nsrc_right<\/code> \u2014 URL of the right-eye image. Required only when source_format=\"pair\"<\/code>.<\/li>\nsource_format<\/code> \u2014 How the source image encodes both eyes. Default: left-right<\/code>.\n\n\nleft-right<\/code> \u2014 Side-by-side, left eye on the left.<\/li>\ntop-bottom<\/code> \u2014 Top-bottom, left eye on top.<\/li>\nanaglyph-rc<\/code> \u2014 Anaglyph red-cyan composite.<\/li>\nanaglyph-rb<\/code> \u2014 Anaglyph red-blue composite.<\/li>\ninterlaced-row<\/code> \u2014 Row-interlaced (polarised display source).<\/li>\ninterlaced-col<\/code> \u2014 Column-interlaced.<\/li>\npair<\/code> \u2014 Two separate images (requires src_right<\/code>).<\/li>\n<\/ul><\/li>\nsource_squeeze<\/code> \u2014 1<\/code> if the source is anamorphic (half-width SBS or half-height TB). Default: 0<\/code>.<\/li>\n<\/ul>\n\nDisplay<\/h4>\n\n\ndisplay_mode<\/code> \u2014 How to present the image. Default: anaglyph-rc<\/code>.\n\n\nanaglyph-rc<\/code> \u2014 Red-cyan anaglyph (requires red-cyan glasses).<\/li>\nanaglyph-rb<\/code> \u2014 Red-blue anaglyph (requires red-blue glasses).<\/li>\nwiggle<\/code> \u2014 Alternating left\/right frames (no glasses needed).<\/li>\nleft<\/code> \u2014 Left eye only.<\/li>\nright<\/code> \u2014 Right eye only.<\/li>\nside-by-side<\/code> \u2014 Side-by-side composite output.<\/li>\ntop-bottom<\/code> \u2014 Top-bottom composite output.<\/li>\ninterlaced-row<\/code> \u2014 Row-interlaced output.<\/li>\ninterlaced-col<\/code> \u2014 Column-interlaced output.<\/li>\n<\/ul><\/li>\ndisplay_squeeze<\/code> \u2014 1<\/code> to output as anamorphic (half-width SBS \/ half-height TB). Default: 0<\/code>. Only effective for side-by-side<\/code> and top-bottom<\/code> display modes.<\/li>\nswap<\/code> \u2014 1<\/code> to swap left and right eye sources. Default: 0<\/code>.<\/li>\ncontrolslist<\/code> \u2014 Space-separated list of mode-switching buttons to show in the viewer. Default: wiggle left right anaglyph<\/code>. Valid tokens: wiggle<\/code>, left<\/code>, right<\/code>, anaglyph<\/code>. Leave empty to show all controls (including VR). Only applies when the stereo-img renderer handles the output, i.e. not Canvas modes.<\/li>\n<\/ul>\n\nSize and style<\/h4>\n\n\nwidth<\/code> \u2014 CSS width of the viewer. Accepts px<\/code>, %<\/code>, or vw<\/code>. Default: 100%<\/code>. Example: 640px<\/code>.<\/li>\nborder<\/code> \u2014 1<\/code> to show a border. Default: 0<\/code>.<\/li>\nborder_width<\/code> \u2014 Border thickness. Default: 1px<\/code>. Example: 2px<\/code>.<\/li>\nborder_color<\/code> \u2014 Hex border color. Default: #000000<\/code>.<\/li>\nshadow<\/code> \u2014 1<\/code> to show a drop shadow. Default: 0<\/code>.<\/li>\nshadow_offset_x<\/code> \u2014 Shadow horizontal offset. Default: 0px<\/code>. Negative values move the shadow left.<\/li>\nshadow_offset_y<\/code> \u2014 Shadow vertical offset. Default: 4px<\/code>.<\/li>\nshadow_blur<\/code> \u2014 Shadow blur radius. Default: 12px<\/code>.<\/li>\nshadow_spread<\/code> \u2014 Shadow spread radius. Default: 0px<\/code>.<\/li>\nshadow_color<\/code> \u2014 Shadow color (any CSS color). Default: rgba(0,0,0,0.25)<\/code>.<\/li>\n<\/ul>\n\nExamples<\/h3>\n\nSide-by-side source, anaglyph output<\/h4>\n\n
The most common case: a photo taken with a 3D camera or phone that saves both eyes side-by-side in one JPEG.<\/p>\n\n
[sterimvi_image src=\"https:\/\/example.com\/photo-sbs.jpg\" source_format=\"left-right\" display_mode=\"anaglyph-rc\"]\n<\/code><\/pre>\n\nSide-by-side source, wiggle output (no glasses needed)<\/h4>\n\n[sterimvi_image src=\"https:\/\/example.com\/photo-sbs.jpg\" source_format=\"left-right\" display_mode=\"wiggle\"]\n<\/code><\/pre>\n\nTop-bottom source, anaglyph output<\/h4>\n\n[sterimvi_image src=\"https:\/\/example.com\/photo-tb.jpg\" source_format=\"top-bottom\" display_mode=\"anaglyph-rc\"]\n<\/code><\/pre>\n\nAnamorphic (half-width) side-by-side source<\/h4>\n\n
Some 3D cameras save a squeezed (HSBS) image where each eye occupies half the frame width. Use source_squeeze=\"1\"<\/code> to unsqueeze it before rendering.<\/p>\n\n[sterimvi_image src=\"https:\/\/example.com\/photo-hsbs.jpg\" source_format=\"left-right\" source_squeeze=\"1\" display_mode=\"anaglyph-rc\"]\n<\/code><\/pre>\n\nAnamorphic (half-height) top-bottom source<\/h4>\n\n[sterimvi_image src=\"https:\/\/example.com\/photo-htb.jpg\" source_format=\"top-bottom\" source_squeeze=\"1\" display_mode=\"anaglyph-rc\"]\n<\/code><\/pre>\n\nSeparate left and right images<\/h4>\n\n
When you have two individual files \u2014 one per eye \u2014 use source_format=\"pair\"<\/code> and provide both src<\/code> and src_right<\/code>.<\/p>\n\n[sterimvi_image src=\"https:\/\/example.com\/left.jpg\" src_right=\"https:\/\/example.com\/right.jpg\" source_format=\"pair\" display_mode=\"anaglyph-rc\"]\n<\/code><\/pre>\n\nSeparate images, wiggle output<\/h4>\n\n[sterimvi_image src=\"https:\/\/example.com\/left.jpg\" src_right=\"https:\/\/example.com\/right.jpg\" source_format=\"pair\" display_mode=\"wiggle\"]\n<\/code><\/pre>\n\nSources are stored right-eye-first<\/h4>\n\n
If your side-by-side image has the right eye on the left, add swap=\"1\"<\/code> to correct the eye order.<\/p>\n\n[sterimvi_image src=\"https:\/\/example.com\/photo-rls.jpg\" source_format=\"left-right\" swap=\"1\" display_mode=\"anaglyph-rc\"]\n<\/code><\/pre>\n\nAnaglyph red-blue output<\/h4>\n\n
For viewers who only have red-blue (not red-cyan) glasses.<\/p>\n\n
[sterimvi_image src=\"https:\/\/example.com\/photo-sbs.jpg\" source_format=\"left-right\" display_mode=\"anaglyph-rb\"]\n<\/code><\/pre>\n\nSide-by-side composite output<\/h4>\n\n
Useful for cross-eyed free-viewing or feeding into a VR headset app. The output image places the left eye on the left and the right eye on the right.<\/p>\n\n
[sterimvi_image src=\"https:\/\/example.com\/photo-sbs.jpg\" source_format=\"left-right\" display_mode=\"side-by-side\" width=\"800px\"]\n<\/code><\/pre>\n\nSqueezed side-by-side output<\/h4>\n\n
Produces a half-width-per-eye (HSBS) output image suitable for players that expect that format.<\/p>\n\n
[sterimvi_image src=\"https:\/\/example.com\/photo-sbs.jpg\" source_format=\"left-right\" display_mode=\"side-by-side\" display_squeeze=\"1\"]\n<\/code><\/pre>\n\nAnaglyph red-cyan source displayed as-is<\/h4>\n\n
If your source image is already an anaglyph red-cyan composite and you just want to display it, set both source and display to anaglyph-rc<\/code>.<\/p>\n\n[sterimvi_image src=\"https:\/\/example.com\/photo-anaglyph.jpg\" source_format=\"anaglyph-rc\" display_mode=\"anaglyph-rc\"]\n<\/code><\/pre>\n\nRow-interlaced source, anaglyph output<\/h4>\n\n
Row-interlaced images (common on polarised 3D monitor captures) can be decoded and re-displayed in any mode.<\/p>\n\n
[sterimvi_image src=\"https:\/\/example.com\/photo-interlaced.jpg\" source_format=\"interlaced-row\" display_mode=\"anaglyph-rc\"]\n<\/code><\/pre>\n\nFixed width<\/h4>\n\n[sterimvi_image src=\"https:\/\/example.com\/photo-sbs.jpg\" source_format=\"left-right\" display_mode=\"anaglyph-rc\" width=\"640px\"]\n<\/code><\/pre>\n\nResponsive width capped at 80% of viewport<\/h4>\n\n[sterimvi_image src=\"https:\/\/example.com\/photo-sbs.jpg\" source_format=\"left-right\" display_mode=\"anaglyph-rc\" width=\"80vw\"]\n<\/code><\/pre>\n\nWith border and drop shadow<\/h4>\n\n[sterimvi_image src=\"https:\/\/example.com\/photo-sbs.jpg\" source_format=\"left-right\" display_mode=\"anaglyph-rc\" border=\"1\" border_width=\"2px\" border_color=\"#333333\" shadow=\"1\" shadow_offset_x=\"0px\" shadow_offset_y=\"6px\" shadow_blur=\"16px\" shadow_spread=\"0px\" shadow_color=\"rgba(0,0,0,0.35)\"]\n<\/code><\/pre>\n\nLimit which viewer control buttons appear<\/h4>\n\n
Show only the wiggle and anaglyph buttons; hide the left\/right-eye buttons.<\/p>\n\n
[sterimvi_image src=\"https:\/\/example.com\/photo-sbs.jpg\" source_format=\"left-right\" display_mode=\"anaglyph-rc\" controlslist=\"wiggle anaglyph\"]\n<\/code><\/pre>\n\nShow no controls at all, so the viewer is static with no mode switching:<\/p>\n\n
[sterimvi_image src=\"https:\/\/example.com\/photo-sbs.jpg\" source_format=\"left-right\" display_mode=\"wiggle\" controlslist=\"\"]\n<\/code><\/pre>\n\n\n\n- Upload the
stereoscopic-image-viewer<\/code> folder to \/wp-content\/plugins\/<\/code>.<\/li>\n- Activate the plugin through the Plugins<\/strong> menu in WordPress.<\/li>\n
- Visit Stereoscopic<\/strong> in the admin menu to configure site-wide defaults.<\/li>\n
- Add the Stereoscopic Image<\/strong> block in the block editor, or use the
[sterimvi_image]<\/code> shortcode.<\/li>\n<\/ol>\n\n\n\nWhat image formats are supported?<\/h3><\/dt>\nAny image format your browser supports: JPEG, PNG, WebP. Upload images through the standard WordPress media library.<\/p><\/dd>\n
Do I need special glasses?<\/h3><\/dt>\nIt depends on the display mode you choose:<\/p>\n\n
\n- Anaglyph red-cyan<\/strong> \u2014 requires red-cyan 3D glasses<\/li>\n
- Anaglyph red-blue<\/strong> \u2014 requires red-blue 3D glasses<\/li>\n
- Wiggle<\/strong> \u2014 no glasses required (creates a 3D illusion through motion)<\/li>\n
- Left\/Right only<\/strong> \u2014 no glasses required (shows one eye's perspective only)<\/li>\n<\/ul><\/dd>\n
My images load from an external URL and the anaglyph\/interlaced modes don't work.<\/h3><\/dt>\nAnaglyph red-blue and interlaced rendering use the browser Canvas API, which requires images to be served from the same domain (or with CORS headers). Images in the WordPress media library are always same-origin and work correctly. External URLs may trigger a CORS error.<\/p><\/dd>\n
Can I set different defaults for each image?<\/h3><\/dt>\nYes. Every parameter can be overridden in the block's InspectorControls sidebar, or as an attribute on the shortcode. The settings page supplies the value used whenever a parameter is omitted.<\/p><\/dd>\n
Where does the stereo-img script load from?<\/h3><\/dt>\nBy default the plugin serves the stereo-img web component, and its Three.js, exifr and parser dependencies, from a copy bundled inside the plugin at assets\/vendor\/stereo-img\/<\/code>. No external requests are made and the viewer works offline.<\/p>\n\nOn the settings page you can switch the stereo-img Load Method<\/strong> to load from the external CDN at https:\/\/stereo-img.steren.fr\/stereo-img.js<\/code>, or from a custom URL. Because stereo-img uses relative ES-module imports, a custom URL must point at a complete stereo-img release directory tree, not just the single JS file.<\/p><\/dd>\nHow do I use the shortcode?<\/h3><\/dt>\nBasic example:<\/p>\n\n
[sterimvi_image src=\"https:\/\/example.com\/photo-sbs.jpg\" source_format=\"left-right\" display_mode=\"anaglyph-rc\"]\n<\/code><\/pre>\n\nSeparate left\/right image pair:<\/p>\n\n
[sterimvi_image src=\"https:\/\/example.com\/left.jpg\" src_right=\"https:\/\/example.com\/right.jpg\" source_format=\"pair\" display_mode=\"wiggle\"]\n<\/code><\/pre>\n\nAnamorphic (half-width side-by-side) source displayed as red-cyan anaglyph, with border and shadow:<\/p>\n\n
[sterimvi_image src=\"https:\/\/example.com\/hsbs.jpg\" source_format=\"left-right\" source_squeeze=\"1\" display_mode=\"anaglyph-rc\" border=\"1\" border_width=\"2px\" border_color=\"#222222\" shadow=\"1\" shadow_offset_x=\"0px\" shadow_offset_y=\"6px\" shadow_blur=\"16px\" shadow_spread=\"0px\" shadow_color=\"rgba(0,0,0,0.4)\"]\n<\/code><\/pre>\n\nSee the Shortcode Parameter Reference section below for every attribute.<\/p><\/dd>\n\n<\/dl>\n\n\n
1.0.0<\/h4>\n\n\n- Initial release.<\/li>\n<\/ul>","raw_excerpt":"Embed 3D stereoscopic images in posts and pages, with anaglyph, wiggle, side-by-side and interlaced viewing modes.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/347763","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=347763"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/nductiv"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=347763"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=347763"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=347763"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=347763"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=347763"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=347763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}