{"id":412,"date":"2021-10-29T17:49:10","date_gmt":"2021-10-29T15:49:10","guid":{"rendered":"https:\/\/www.molongui.com\/help\/post_avatars\/"},"modified":"2022-02-26T16:45:18","modified_gmt":"2022-02-26T15:45:18","slug":"post_avatars","status":"publish","type":"post","link":"https:\/\/www.molongui.com\/help\/post_avatars\/","title":{"rendered":"post_avatars"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

This shortcode allows you to show the avatars of all the authors of a post.<\/p>\n\n

It can be used anywhere within WordPress where shortcodes are supported. For most users, this will primarily be within the content of a WordPress post or page or the sidebar.<\/p>\n\n

The output can be customized making use of the optional attributes<\/a> this shortcode can take.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Examples<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Single Author Post<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The trivial shortcode would look like:<\/p>\n

Editor input<\/p>

[post_avatars]<\/div><\/div>

Frontend output<\/p><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

As you can see, you get the profile image of the only author of a post. If you don’t provide any post ID, current post is taken by default.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Multi-Author Post<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Again, using the trivial shortcode:<\/p>\n

Editor input<\/p>

[post_avatars]<\/div><\/div>

Frontend output<\/p><\/div>\n

\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

That would show your current post author’s avatars, making them link to each author page<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

More Examples<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Custom Image Size<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Let’s say you want to display images with a size of 50×50 pixels. Then you should make use of the size<\/code> attribute like this:<\/p>\n\n

Editor input<\/p>

[post_avatars size=’50,50′]<\/div><\/div>

Frontend output<\/p><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"author_avatar\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"author_avatar_2\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Avatars Without Link<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

In this examples images are not links. But default shortcode’s output will make author images to link to their author pages. So let’s imagine now that you want to disable those links. In that case, you should input the shortcode with the link<\/code>attribute:<\/p>\n

Editor input<\/p>

[post_avatars link=no]<\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Custom Styles<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

You probably may want to customize how avatars are displayed. The HTML markup that shortcode generates by default look like this:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n<div class=\"m-post-avatars\">\n    <div class=\"m-post-avatar\">\n        <img decoding=\"async\" src=\"\">\n    <\/div>\n    <div class=\"m-post-avatar\">\n        <img decoding=\"async\" src=\"\">\n    <\/div>\n    ...\n<\/div><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-db7ac8f elementor-widget elementor-widget-text-editor\" data-id=\"db7ac8f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Those classes has no CSS rules defined, so you can use them to provide your own.<\/p>\n<p>Or you can even change the DOM element tag to use and the class they must have:<\/p>\n<div class=\"molongui-shortcode-sample\"><p class=\"molongui-shortcode-sample-title\">Editor input<\/p><div class=\"molongui-shortcode-sample-box molongui-shortcode-sample-input\"><div>[post_avatars container_tag=section container_id=myId container_class=myClass wrapper_class=myClass2]<\/div><\/div><p class=\"molongui-shortcode-sample-title\">Frontend output<\/p><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3c66779 elementor-widget elementor-widget-code-highlight\" data-id=\"3c66779\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"1,2,5\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>\n<section id=\"myId\" class=\"m-post-avatars myClass\">\n    <div class=\"m-post-avatar myClass2\">\n        <img decoding=\"async\" src=\"\">\n    <\/div>\n    <div class=\"m-post-avatar myClass2\">\n        <img decoding=\"async\" src=\"\">\n    <\/div>\n    ...\n<\/section><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-42d5c42 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"42d5c42\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-13bcc72\" data-id=\"13bcc72\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f8a6d38 elementor-widget elementor-widget-spacer\" data-id=\"f8a6d38\" data-element_type=\"widget\" id=\"attributes\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e1d3422 elementor-widget elementor-widget-heading\" data-id=\"e1d3422\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Attributes<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-24e6397 elementor-widget elementor-widget-text-editor\" data-id=\"24e6397\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Check out below all the available attributes this shortcode can take:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1552818 elementor-widget elementor-widget-text-editor\" data-id=\"1552818\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"molongui-shortcode-attribute \"><div class=\"molongui-shortcode-attribute-name\">pid<sub class=\"molongui-shortcode-attribute-optional\">optional<\/sub><\/div><div class=\"molongui-shortcode-attribute-contents\"><div class=\"molongui-shortcode-attribute-description\">Post ID. If none provided, current post ID is taken.<\/div><div class=\"molongui-shortcode-attribute-accepts\">Accepts integer as post ID.<\/div><div class=\"molongui-shortcode-attribute-default\">Defaults to <span>current post ID<\/span>.<\/div><div class=\"molongui-shortcode-attribute-since\">Available since version 1.2.0.<\/div><\/div><\/div>\n<div class=\"molongui-shortcode-attribute \"><div class=\"molongui-shortcode-attribute-name\">size<sub class=\"molongui-shortcode-attribute-optional\">optional<\/sub><\/div><div class=\"molongui-shortcode-attribute-contents\"><div class=\"molongui-shortcode-attribute-description\">Avatar size.<\/div><div class=\"molongui-shortcode-attribute-accepts\">Accepts Any defined image size in your WP: (thumbnail, medium, medium_large, large, full&#8230;) or a custom value (x,y).<\/div><div class=\"molongui-shortcode-attribute-default\">Defaults to <span>full<\/span>.<\/div><div class=\"molongui-shortcode-attribute-since\">Available since version 1.2.0.<\/div><\/div><\/div>\n<div class=\"molongui-shortcode-attribute \"><div class=\"molongui-shortcode-attribute-name\">context<sub class=\"molongui-shortcode-attribute-optional\">optional<\/sub><\/div><div class=\"molongui-shortcode-attribute-contents\"><div class=\"molongui-shortcode-attribute-description\">Set to &#8216;box&#8217; to take defined styles for the author avatar displayed in author boxes<\/div><div class=\"molongui-shortcode-attribute-accepts\">Accepts &#8220;screen&#8221; or &#8220;box&#8221;.<\/div><div class=\"molongui-shortcode-attribute-default\">Defaults to <span>screen<\/span>.<\/div><div class=\"molongui-shortcode-attribute-since\">Available since version 1.2.0.<\/div><\/div><\/div>\n<div class=\"molongui-shortcode-attribute \"><div class=\"molongui-shortcode-attribute-name\">source<sub class=\"molongui-shortcode-attribute-optional\">optional<\/sub><\/div><div class=\"molongui-shortcode-attribute-contents\"><div class=\"molongui-shortcode-attribute-description\">Where to retrieve the avatar from<\/div><div class=\"molongui-shortcode-attribute-accepts\">Accepts &#8220;local&#8221;, &#8220;gravatar&#8221; or &#8220;acronym&#8221;.<\/div><div class=\"molongui-shortcode-attribute-default\">Defaults to <span>local<\/span>.<\/div><div class=\"molongui-shortcode-attribute-since\">Available since version 1.2.0.<\/div><\/div><\/div>\n<div class=\"molongui-shortcode-attribute \"><div class=\"molongui-shortcode-attribute-name\">default<sub class=\"molongui-shortcode-attribute-optional\">optional<\/sub><\/div><div class=\"molongui-shortcode-attribute-contents\"><div class=\"molongui-shortcode-attribute-description\">Default image to load if none is found in the provided source<\/div><div class=\"molongui-shortcode-attribute-accepts\">Accepts &#8220;gravatar&#8221;, &#8220;acronym&#8221;, &#8220;mp&#8221;, &#8220;blank&#8221;, &#8220;none&#8221;.<\/div><div class=\"molongui-shortcode-attribute-default\">Defaults to <span>gravatar<\/span>.<\/div><div class=\"molongui-shortcode-attribute-since\">Available since version 1.2.0.<\/div><\/div><\/div>\n<div class=\"molongui-shortcode-attribute \"><div class=\"molongui-shortcode-attribute-name\">link<sub class=\"molongui-shortcode-attribute-optional\">optional<\/sub><\/div><div class=\"molongui-shortcode-attribute-contents\"><div class=\"molongui-shortcode-attribute-description\">Whether to make avatars link to their author page<\/div><div class=\"molongui-shortcode-attribute-accepts\">Accepts &#8220;yes&#8221; or &#8220;no&#8221;.<\/div><div class=\"molongui-shortcode-attribute-default\">Defaults to <span>yes<\/span>.<\/div><div class=\"molongui-shortcode-attribute-since\">Available since version 1.2.0.<\/div><\/div><\/div>\n<div class=\"molongui-shortcode-attribute \"><div class=\"molongui-shortcode-attribute-name\">link_class<sub class=\"molongui-shortcode-attribute-optional\">optional<\/sub><\/div><div class=\"molongui-shortcode-attribute-contents\"><div class=\"molongui-shortcode-attribute-description\">CSS class name to add to the link element<\/div><div class=\"molongui-shortcode-attribute-since\">Available since version 1.2.0.<\/div><\/div><\/div>\n<div class=\"molongui-shortcode-attribute \"><div class=\"molongui-shortcode-attribute-name\">wrapper_tag<sub class=\"molongui-shortcode-attribute-optional\">optional<\/sub><\/div><div class=\"molongui-shortcode-attribute-contents\"><div class=\"molongui-shortcode-attribute-description\">HTML tag used to enclose each image markup<\/div><div class=\"molongui-shortcode-attribute-since\">Available since version 1.2.0.<\/div><\/div><\/div>\n<div class=\"molongui-shortcode-attribute \"><div class=\"molongui-shortcode-attribute-name\">wrapper_class<sub class=\"molongui-shortcode-attribute-optional\">optional<\/sub><\/div><div class=\"molongui-shortcode-attribute-contents\"><div class=\"molongui-shortcode-attribute-description\">CSS class name to add to each image wrapper<\/div><div class=\"molongui-shortcode-attribute-since\">Available since version 1.2.0.<\/div><\/div><\/div>\n<div class=\"molongui-shortcode-attribute \"><div class=\"molongui-shortcode-attribute-name\">container_tag<sub class=\"molongui-shortcode-attribute-optional\">optional<\/sub><\/div><div class=\"molongui-shortcode-attribute-contents\"><div class=\"molongui-shortcode-attribute-description\">HTML tag used to enclose all images markup<\/div><div class=\"molongui-shortcode-attribute-since\">Available since version 1.2.0.<\/div><\/div><\/div>\n<div class=\"molongui-shortcode-attribute \"><div class=\"molongui-shortcode-attribute-name\">container_id<sub class=\"molongui-shortcode-attribute-optional\">optional<\/sub><\/div><div class=\"molongui-shortcode-attribute-contents\"><div class=\"molongui-shortcode-attribute-description\">ID to add to the avatars container<\/div><div class=\"molongui-shortcode-attribute-since\">Available since version 1.2.0.<\/div><\/div><\/div>\n<div class=\"molongui-shortcode-attribute \"><div class=\"molongui-shortcode-attribute-name\">container_class<sub class=\"molongui-shortcode-attribute-optional\">optional<\/sub><\/div><div class=\"molongui-shortcode-attribute-contents\"><div class=\"molongui-shortcode-attribute-description\">CSS class name to add to the avatars container<\/div><div class=\"molongui-shortcode-attribute-since\">Available since version 1.2.0.<\/div><\/div><\/div>\n<div class=\"molongui-shortcode-attribute \"><div class=\"molongui-shortcode-attribute-name\">display_errors<sub class=\"molongui-shortcode-attribute-optional\">optional<\/sub><\/div><div class=\"molongui-shortcode-attribute-contents\"><div class=\"molongui-shortcode-attribute-description\">Whether to display a message in case of error<\/div><div class=\"molongui-shortcode-attribute-accepts\">Accepts &#8220;yes&#8221; or &#8220;no&#8221;.<\/div><div class=\"molongui-shortcode-attribute-default\">Defaults to <span>yes<\/span>.<\/div><div class=\"molongui-shortcode-attribute-since\">Available since version 1.2.0.<\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>This shortcode allows you to show the avatars of all the authors of a post. It can be used anywhere within WordPress where shortcodes are supported. For most users, this will primarily be within the content of a WordPress post or page or the sidebar. The output can be customized making use of the optional [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,1],"tags":[19],"class_list":["post-412","post","type-post","status-publish","format-standard","hentry","category-authorship","category-doc","tag-shortcodes"],"_links":{"self":[{"href":"https:\/\/www.molongui.com\/help\/wp-json\/wp\/v2\/posts\/412","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.molongui.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.molongui.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.molongui.com\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.molongui.com\/help\/wp-json\/wp\/v2\/comments?post=412"}],"version-history":[{"count":13,"href":"https:\/\/www.molongui.com\/help\/wp-json\/wp\/v2\/posts\/412\/revisions"}],"predecessor-version":[{"id":1909,"href":"https:\/\/www.molongui.com\/help\/wp-json\/wp\/v2\/posts\/412\/revisions\/1909"}],"wp:attachment":[{"href":"https:\/\/www.molongui.com\/help\/wp-json\/wp\/v2\/media?parent=412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.molongui.com\/help\/wp-json\/wp\/v2\/categories?post=412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.molongui.com\/help\/wp-json\/wp\/v2\/tags?post=412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}