{"id":5721,"date":"2017-12-17T16:31:50","date_gmt":"2017-12-17T15:31:50","guid":{"rendered":"http:\/\/wppa.nl\/?page_id=5721"},"modified":"2021-11-07T11:26:27","modified_gmt":"2021-11-07T10:26:27","slug":"shortcode-photo","status":"publish","type":"page","link":"https:\/\/wppa.nl\/sv\/docs-by-subject\/advanced-topics\/shortcode-photo\/","title":{"rendered":"Shortcode [photo]"},"content":{"rendered":"<h6>Description<\/h6>\n<p>There is a special - simple - shortcode to display a single image (photo or video).<br \/>\nThe syntax is: <code>[&#112;hoto nnn]<\/code> where nnn is the photo id.<br \/>\nExample: <code>[<b><\/b>photo 4668]<\/code> produces:<br \/>\n\r\n\t\t\t\t<div\r\n\t\t\t\t\tid=\"wppa-container-wrapper-1\"\r\n\t\t\t\t\tclass=\"aligncenter wppa-container-wrapper \"\r\n\t\t\t\t\tstyle=\"width:350px;display:block;margin-left:auto;margin-right:auto;padding:0;position:relative;\"\r\n\t\t\t\t\t>\r\n\t\t<div\r\n\t\t\tid=\"wppa-container-1\"\r\n\t\t\tstyle=\"width:100%;\"\r\n\t\t\tclass=\"wppa-container aligncenter wp-caption\"\r\n\t\t\t><div style=\"font-size:0;line-height:0\"><img id=\"ph-4668-1\" title=\"Hallelujah\" style=\"width:100%;margin:0;padding:0;border:none;\" alt=\"4668\" class=\"size-medium wppa-mphoto\" onload=\"wppaLazyLoaded++;wppaMakeLazyVisible(&#039;onload&#039;);\" onerror=\"wppaLazyLoaded++;\" decoding=\"async\" data-src=\"https:\/\/wppa.nl\/wp-content\/uploads\/wppa\/4668.jpg?ver=689\" data-stack=\"picture:296:functions:4225\"><\/div><div class=\"wp-caption-text\"><a href=\"https:\/\/wppa.nl\/wp-content\/wppa-pl\/Screenshots\/Hallelujah.jpg\" data-rel=\"wppa-pl\" target=\"_blank\" onclick=\"wppaAjaxBumpDownloadCount('81b82b47d4fd')\">https:\/\/wppa.nl\/wp-content\/wppa-pl\/Screenshots\/Hallelujah.jpg<\/a><\/div><svg id=\"wppa-ajax-spin-1\" class=\"wppa-ajax-spin uil-default\" width=\"120px\" height=\"120px\" viewBox=\"0 0 135 135\" preserveAspectRatio=\"xMidYMid\" stroke=\"\" style=\"\n\t\t\t\twidth:120px;\n\t\t\t\theight:120px;\n\t\t\t\tposition:fixed;\n\t\t\t\ttop:50%;\n\t\t\t\tmargin-top:-60px;\n\t\t\t\tleft:50%;\n\t\t\t\tmargin-left:-60px;\n\t\t\t\topacity:1;\n\t\t\t\tdisplay:none;\n\t\t\t\tfill:#404040;\n\t\t\t\tbackground-color:transparent;\n\t\t\t\tborder-radius:12px;\"><path d=\"M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z\">\n\t\t\t\t\t\t<animateTransform\n\t\t\t\t\t\t\tattributeName=\"transform\"\n\t\t\t\t\t\t\ttype=\"rotate\"\n\t\t\t\t\t\t\tfrom=\"0 67 67\"\n\t\t\t\t\t\t\tto=\"-360 67 67\"\n\t\t\t\t\t\t\tdur=\"2.5s\"\n\t\t\t\t\t\t\trepeatCount=\"indefinite\"\/>\n\t\t\t\t\t<\/path>\n\t\t\t\t\t<path d=\"M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z\">\n\t\t\t\t\t\t<animateTransform\n\t\t\t\t\t\t\tattributeName=\"transform\"\n\t\t\t\t\t\t\ttype=\"rotate\"\n\t\t\t\t\t\t\tfrom=\"0 67 67\"\n\t\t\t\t\t\t\tto=\"360 67 67\"\n\t\t\t\t\t\t\tdur=\"8s\"\n\t\t\t\t\t\t\trepeatCount=\"indefinite\"\/>\n\t\t\t\t\t<\/path><\/svg><\/div><\/div>\n<!-- End [photo 4668 cache=\"inf\"] \/sv\/wp-json\/wp\/v2\/pages\/5721 oc 1 19 queries in 55.9 ms. at 18:05. Max mem:  60.50 Mb. (cached)  --><br \/>\nYou can configure in <strong>Basic settings -> Photos -> II: Shortcode [&#112;hoto ... ] specifications<\/strong> what the shortcode <code>[<b><\/b>photo]<\/code> stands for.<br \/>\nYou can configure it to be one of the folowing four possible display types:<\/p>\n<ul>\n<li>A plain single photo, in <code>[<b><\/b>wppa]<\/code> shortcode known as <code>type=\"photo\"<\/code><\/li>\n<li>A single photo with caption, in <code>[<b><\/b>wppa]<\/code> shortcode known as <code>type=\"mphoto\"<\/code><\/li>\n<li>A single photo with extended caption, in <code>[<b><\/b>wppa]<\/code> shortcode known as <code>type=\"xphoto\"<\/code><\/li>\n<li>A single photo in the style of a slideshow, in <code>[<b><\/b>wppa]<\/code> shortcode known as <code>type=\"slphoto\"<\/code><\/li>\n<\/ul>\n<p>For 'simple' users who can add\/edit posts and\/or comments there is a simple shortcode generator available on the wp editor in 'Visual' mode. See the icon <img decoding=\"async\" src=\"https:\/\/wppa.nl\/wp-content\/plugins\/wp-photo-album-plus\/img\/camera32.png\" style=\"vertical-align:bottom;\" \/> in the toolbar above the wp editor.<\/p>\n<h6>Availablility at the front-end<\/h6>\n<p>Some plugins offer the possibility to edit posts etc. at the front-end of the website.<br \/>\nYou can enable this feature by selecting <em>shortcode<\/em> in <strong>Basic settings -> Photos -> II: Shortcode [&#112;hoto ... ] specifications -> Item 4: Fe type<\/strong>.<br \/>\nExamples of plugins that do support this are:<\/p>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/wp-user-frontend\/\" >WP User Frontend<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/bbpress\/\" >bbPress<\/a><\/li>\n<\/ul>\n<p>These plugins use the wp editor - at least they use the php function <code>wp_editor()<\/code> - to edit posts\/replies.<br \/>\nFor as far as it is technically possible, wppa's shortcode generator is also available on the wp editor instances in the plugins that use it.<br \/>\n<!--\n\n\n<h6>Technical limitations<\/h6>\n\n\nThe following technical restrictions apply that are beyond the control of <strong>WPPA<\/strong>:\n\n\n<ul>\n\n\n<li>The shortcode dialog will show-up in a jQuery modal dialog box, because the dialog box type that is used at the admin side (the so-called <em>Thickbox<\/em>) will not work at the website frontend.<\/li>\n\n\n\n\n<li>The call to <code>wp_editor()<\/code> must have the option to run in <em><strong>tinymce<\/strong><\/em> mode (aka as '<em>Visual<\/em>' mode). This means that the array <code>$settings<\/code> should have the element <code>'tinymce' => true,<\/code> in:<br \/><code>wp_editor( string $content, string $editor_id, array $settings = array() );<\/code><\/li>\n\n\n\n\n<li>The call to <code>wp_editor()<\/code> must have the option to add additional buttons by other plugins, i.c. the camera icon of <strong>WPPA<\/strong>. This means that the array <code>$settings<\/code> should have the element <code>'teeny' => false,<\/code><\/li>\n\n\n\n\n<li>The text of the post, reply or comment processed by the plugin should be filtered by the normal wp content filters ( <code>$content = apply_filters( 'the_content', $content );<\/code> ), or at least process shortcodes by <code>$content = apply_filters( 'do_shortcode', $content );<\/code> or by a call to <code>do_shortcode()<\/code> directly.<\/li>\n\n\n<\/ul>\n\n\n--><\/p>\n<h6>Compatibility with other plugins<\/h6>\n<ul>\n<li><strong>WP User Frontend<\/strong><br \/>\nThis plugin is compatible without any restriction. It is recommended to add in the plugins custom css on its Settings -> General Options page:<\/p>\n<pre>\r\n#wpuf-insert-image-container {\r\ndisplay:none;\r\n}\r\n<\/pre>\n<p>This will hide the button to insert a native wp media photo.\n<\/li>\n<li><strong>bbPress<\/strong><br \/>\nTo get this plugin compatible with the <code>[<b><\/b>photo]<\/code> shortcode:<br \/>\n- Tick the box in <strong>Advanced settings -> Misc -> IV: Other plugins related settings -> Item 9: Shortcode [&#112;hoto nnn] on bbPress<\/strong>.<br \/>\nRecommended other settings:<br \/>\n- <strong>Basic settings -> Photos -> II: Shortcode [&#112;hoto ... ] specifications -> Item 2: Size<\/strong> Not larger than 440;<br \/>\n- <strong>Basic settings -> Photos -> II: Shortcode [&#112;hoto ... ] specifications -> Item 3: Align<\/strong> <em>--- none ---<\/em> or <em>right<\/em>.\n<\/li>\n<\/ul>\n<h6>Alternative code insertions<\/h6>\n<p>For plugins that do not properly process textual content resulting in not processing shortcodes, <strong>WPPA<\/strong> offers two alternative code snippets that will be inserted in the text content of the editor. Both alternatives have their restrictions, so select the one that suits your needs best, and keep the restrictions in mind!<\/p>\n<ul>\n<li><b>html<\/b><br \/>\nThis choice will insert - more or less - the html code that would be generated if the shortcode was processed properly. It is made using a template, what means that you can only configure the Single Image Type: A plain single image. Subtitles will be wrong. The editor will damage the code a bit: you can link to lightbox, but you should not use social media buttons in lightbox. Videos are not supported here.\n<\/li>\n<li><b>img tag<\/b><br \/>\nThis choice will output a simple img tag with a 100% width style setting. Videos are supported.\n<\/li>\n<\/ul>\n<p>Note: if you change anything in <strong>Basic settings -> Photos -> II: Shortcode [&#112;hoto ... ]<\/strong> specifications afterwards, the changes will not be reflected in existing posts when an alternative code is selected during the creation of a post.<br \/>\n\r\n\t\t\t\t<div\r\n\t\t\t\t\tid=\"wppa-container-wrapper-2\"\r\n\t\t\t\t\tclass=\"aligncenter wppa-container-wrapper \"\r\n\t\t\t\t\tstyle=\"width:350px;display:block;margin-left:auto;margin-right:auto;padding:0;position:relative;\"\r\n\t\t\t\t\t>\r\n\t\t<div\r\n\t\t\tid=\"wppa-container-2\"\r\n\t\t\tstyle=\"width:100%;\"\r\n\t\t\tclass=\"wppa-container aligncenter wp-caption\"\r\n\t\t\t><div style=\"font-size:0;line-height:0\"><img id=\"ph-4967-2\" title=\"Shortcode  settings\" style=\"width:100%;margin:0;padding:0;border:none;\" alt=\"4967\" class=\"size-medium wppa-mphoto\" onload=\"wppaLazyLoaded++;wppaMakeLazyVisible(&#039;onload&#039;);\" onerror=\"wppaLazyLoaded++;\" decoding=\"async\" data-src=\"https:\/\/wppa.nl\/wp-content\/uploads\/wppa\/4967.jpg?ver=689\" data-stack=\"picture:296:functions:4225\"><\/div><div class=\"wp-caption-text\">Shortcode [photo ...] settings<\/div><svg id=\"wppa-ajax-spin-2\" class=\"wppa-ajax-spin uil-default\" width=\"120px\" height=\"120px\" viewBox=\"0 0 135 135\" preserveAspectRatio=\"xMidYMid\" stroke=\"\" style=\"\n\t\t\t\twidth:120px;\n\t\t\t\theight:120px;\n\t\t\t\tposition:fixed;\n\t\t\t\ttop:50%;\n\t\t\t\tmargin-top:-60px;\n\t\t\t\tleft:50%;\n\t\t\t\tmargin-left:-60px;\n\t\t\t\topacity:1;\n\t\t\t\tdisplay:none;\n\t\t\t\tfill:#404040;\n\t\t\t\tbackground-color:transparent;\n\t\t\t\tborder-radius:12px;\"><path d=\"M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z\">\n\t\t\t\t\t\t<animateTransform\n\t\t\t\t\t\t\tattributeName=\"transform\"\n\t\t\t\t\t\t\ttype=\"rotate\"\n\t\t\t\t\t\t\tfrom=\"0 67 67\"\n\t\t\t\t\t\t\tto=\"-360 67 67\"\n\t\t\t\t\t\t\tdur=\"2.5s\"\n\t\t\t\t\t\t\trepeatCount=\"indefinite\"\/>\n\t\t\t\t\t<\/path>\n\t\t\t\t\t<path d=\"M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z\">\n\t\t\t\t\t\t<animateTransform\n\t\t\t\t\t\t\tattributeName=\"transform\"\n\t\t\t\t\t\t\ttype=\"rotate\"\n\t\t\t\t\t\t\tfrom=\"0 67 67\"\n\t\t\t\t\t\t\tto=\"360 67 67\"\n\t\t\t\t\t\t\tdur=\"8s\"\n\t\t\t\t\t\t\trepeatCount=\"indefinite\"\/>\n\t\t\t\t\t<\/path><\/svg><\/div><\/div>\n<!-- End [photo 4967] \/sv\/wp-json\/wp\/v2\/pages\/5721 oc 2 12 queries in 28.3 ms. at 18:05. Max mem:  60.50 Mb.  --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Description There is a special - simple - shortcode to display a single image (photo or video). The syntax is: [&#112;hoto nnn] where nnn is the photo id. Example: [photo 4668] produces: You can configure in Basic settings -> Photos -> II: Shortcode [&#112;hoto ... ] specifications what the shortcode [photo] stands for. You can <a href='https:\/\/wppa.nl\/sv\/docs-by-subject\/advanced-topics\/shortcode-photo\/' class='excerpt-more'>[...]<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":5733,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5721","page","type-page","status-publish","hentry","post-seq-1","post-parity-odd","meta-position-corners","fix"],"_links":{"self":[{"href":"https:\/\/wppa.nl\/sv\/wp-json\/wp\/v2\/pages\/5721","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wppa.nl\/sv\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wppa.nl\/sv\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wppa.nl\/sv\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wppa.nl\/sv\/wp-json\/wp\/v2\/comments?post=5721"}],"version-history":[{"count":3,"href":"https:\/\/wppa.nl\/sv\/wp-json\/wp\/v2\/pages\/5721\/revisions"}],"predecessor-version":[{"id":6810,"href":"https:\/\/wppa.nl\/sv\/wp-json\/wp\/v2\/pages\/5721\/revisions\/6810"}],"up":[{"embeddable":true,"href":"https:\/\/wppa.nl\/sv\/wp-json\/wp\/v2\/pages\/5733"}],"wp:attachment":[{"href":"https:\/\/wppa.nl\/sv\/wp-json\/wp\/v2\/media?parent=5721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}