{"id":13432,"date":"2024-02-26T10:07:58","date_gmt":"2024-02-26T15:07:58","guid":{"rendered":"https:\/\/www.med.unc.edu\/webguide\/?page_id=13432"},"modified":"2025-11-14T11:06:48","modified_gmt":"2025-11-14T16:06:48","slug":"create-a-gallery","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/userguide\/people-directory\/new-people-directory\/create-a-gallery\/","title":{"rendered":"Create a Gallery"},"content":{"rendered":"<p>Once some profiles have been created, you can display them on your site in a gallery. You can display all the profiles in one gallery or you can display smaller groups of profiles which we call <strong>Divisions<\/strong>.<\/p>\n<h2>Base Shortcode<\/h2>\n<p>A gallery can be displayed in either a <strong>single-column<\/strong> or <strong>multi-column<\/strong> view. Either of these base shortcode will display all published profiles sorted alphabetically by last name then first name. Simply copy the shortcode below and paste it into a page where you wish to display a gallery.<\/p>\n<h3>Single Column<\/h3>\n<p><code>[unc_directory]<\/code><\/p>\n<p><a href=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/dirctory-single-column-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-13444\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/dirctory-single-column-3.png\" alt=\"Example of a single column directory.\" width=\"400\" height=\"509\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/dirctory-single-column-3.png 711w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/dirctory-single-column-3-236x300.png 236w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/dirctory-single-column-3-600x763.png 600w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/dirctory-single-column-3-560x712.png 560w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/a><\/p>\n<h3>Multi Column<\/h3>\n<p><code>[unc_directory multi-column=\"true\"]<\/code><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-multi-column-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-13445\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-multi-column-3-813x1024.png\" alt=\"Example of a multi-column directory.\" width=\"450\" height=\"567\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-multi-column-3-813x1024.png 813w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-multi-column-3-238x300.png 238w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-multi-column-3-768x967.png 768w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-multi-column-3-600x755.png 600w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-multi-column-3-560x705.png 560w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-multi-column-3.png 869w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a><\/p>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Display Profiles For A Specific Division<\/h2>\n<p>(View the <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/people-directory\/new-people-directory\/use-division-to-display-a-subset-of-profiles\/\">Divisions documentation<\/a> to learn how to set up a division as well as how to include profiles in a division.)<\/p>\n<p>Rather than display all profiles in a gallery, you can display smaller groups which we call <strong>Divisions<\/strong>. Some of the most popular divisions include: Faculty, Staff, Administration, Residents and Researchers. Some sites like to break their people into divisions that are specific to the department. For example, the Department of Obstetrics and Gynecology uses divisions such as Family Planning, General Obstetrics and Gynecology, Global Women\u2019s Health, Gynecologic Oncology, Maternal-Fetal Medicine, Midwives, etc. The Lineberger Comprehensive Cancer Center displays their members by program: breast cancer, cell biology cancer, immunology, cancer prevention and control, etc.<\/p>\n<p>To limit a gallery to display only profiles tagged with a specific division, add the <code class=\"inline\">division=\"\"<\/code>\u00a0attribute to the base shortcode. Add the <strong>slug<\/strong> of the desired division within the quotes. This MUST be the slug of the division, not the name of the division.<\/p>\n<h3>How To Find A Division Slug<\/h3>\n<ol>\n<li>Select <strong>SOM Directory &gt; Division<\/strong> in the dashboard.<\/li>\n<li>The table on the Divisions page has a column that displays the slug name. This is what gets added to the shortcode.<\/li>\n<\/ol>\n<p><a href=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-slug-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-13434 aligncenter\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-slug-2-1024x499.png\" alt=\"Screenshot highliting the Slub column. \" width=\"600\" height=\"292\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-slug-2-1024x499.png 1024w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-slug-2-300x146.png 300w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-slug-2-768x374.png 768w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-slug-2-600x292.png 600w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-slug-2-560x273.png 560w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-slug-2.png 1139w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<h3>Example<\/h3>\n<p>The example below uses the multi column layout and will display all published profiles tagged with the <strong>Breast Cancer<\/strong> division.<\/p>\n<p><code>[unc_directory  multi-column=\"true\" division=\"breast-cancer\"]<\/code><\/p>\n<h3>Logic Used For Multiple Divisions<\/h3>\n<p>Multiple divisions can be listed in the division attribute. Simply provide a comma separated list of the desired division slugs. By default, the shortcode uses <strong>OR logic<\/strong> to determine which profiles to display. This can easily be changed to <strong>AND logic<\/strong> using the <code class=\"inline\">cat_relation=\"and\"<\/code> attribute.<\/p>\n<p><code>[unc_directory  multi-column=\"true\" division=\"fellows,2024-2025\" cat_relation=\"and\"]<\/code><\/p>\n<h4>OR Logic<\/h4>\n<p>OR logic broadens the scope of the results, including all profiles associated with any of the listed divisions. If you wish to use the OR Logic, the cat_relation attribute is not needed in the shortcode since this is the default logic.<\/p>\n<h5>Example Use Case:<\/h5>\n<p>If you assign the divisions \u201cfaculty\u201d and \u201cstaff,\u201d the Cell will:<\/p>\n<ul>\n<li>Include any profiles tagged with the &#8220;faculty&#8221; division OR the &#8220;staff&#8221; division.<\/li>\n<li>Profiles don&#8217;t need to be tagged with both divisions.<\/li>\n<\/ul>\n<h4>AND Logic<\/h4>\n<p>AND logic narrows the scope of the results by including only profiles tagged with ALL specified divisions.<\/p>\n<h5>Example Use Case:<\/h5>\n<p>If you assign the divisions \u201cFellows\u201d and \u201c2024-2025,\u201d the Cell will:<\/p>\n<ul>\n<li>Include fellows who are specifically tagged with the &#8220;Fellows&#8221; AND the \u201c2024-2025\u201d divisions.<\/li>\n<li>Excludes profiles tagged with just \u201cFellows\u201d or just \u201c2024-2025.\u201d<\/li>\n<\/ul>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Limit The Information Displayed<\/h2>\n<p>By default, a gallery will display the profile title (person&#8217;s name), first two positions (professional titles), contact information (phone and email) and gallery summary for every profile. The following modifiers will allow you to remove some of these fields from a gallery. Add any of the following modifiers to one of the base shortcode.<\/p>\n<h3>Hide Position Titles<\/h3>\n<p>Add the <code class=\"inline\">hide-position-titles=\"true\"<\/code> modifier to the base shortcode.<\/p>\n<h3>Hide Contact Information<\/h3>\n<p>Add the <code class=\"inline\">hide-contact-info=\"true\"<\/code> modifier to the base shortcode.<\/p>\n<h3>Hide Gallery Summary<\/h3>\n<p>Add the <code class=\"inline\">hide-gallery-summary=\"true\"<\/code> modifier to the base shortcode.<\/p>\n<h3>Example<\/h3>\n<p>The example below will display a singe column gallery with only the photo and Name for each profile since the Titles, Contact Information, and Gallery Summary have all been hidden.<\/p>\n<p><code>[unc_directory hide-position-titles=\"true\" hide-contact-info=\"true\" hide-gallery-summary=\"true\"]<\/code><\/p>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Add a Search Bar<\/h2>\n<p>This modifier adds a search bar to the gallery that allows site visitors to search the profiles. Add the <code class=\"inline\">searchable=\"true\"<\/code> modifier to one of the base shortcode.<\/p>\n<p><strong>IMPORTANT<\/strong>: This modifier can only be used once on any given page.<\/p>\n<h3>Example<\/h3>\n<p>The example below will display a multi-column gallery with the search enabled.<\/p>\n<p><code>[unc_directory multi-column=\"true\" searchable=\"true\"]<\/code><\/p>\n<p><a href=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-with-search.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-13446\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-with-search.png\" alt=\"Example of a directory gallery with the search bar across the top.\" width=\"500\" height=\"249\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-with-search.png 860w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-with-search-300x149.png 300w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-with-search-768x382.png 768w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-with-search-600x299.png 600w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-with-search-560x279.png 560w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Override Sort Order<\/h2>\n<p>Profiles automatically sort alphabetically by last name in a gallery view. However, profiles can override the alphabetical sort and display ahead of other profiles using the <strong>Sort Order<\/strong> field on profile pages. See the <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/people-directory\/new-people-directory\/create-a-profile\/\">Create a Profile<\/a> page for more information about Sort Order.<\/p>\n<p>The following modifier will ignore any priority placement using Sort Order. It will truly display all profiles alphabetically by last name, then first name. To override the sort order, add <code class=\"inline\">alpha-sort-only=\"true\"<\/code> to one of the base shortcode.<\/p>\n<p>This modifier should not be used with the &#8216;ID&#8217; modifier (see below).<\/p>\n<h3>Example<\/h3>\n<p>The example below will display a multi-column gallery that ignores the priority placement of profiles using the Sort Order feature.<br \/>\n<code>[unc_directory multi-column=\"true\" alpha-sort-only=\"true\"]<\/code><\/p>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Display Specific Profiles By ID<\/h2>\n<p>This modifier lets you display specific profiles by their ID. The profiles will display in the order in which the ID&#8217;s are listed. This modifier will ignore Sort Order as well as the Division modifier. Add\u00a0<code class=\"inline\">ids=\"\"<\/code> to one of the base shortcode. Add a comma separated list of post IDs&#8217; within the quotes.<\/p>\n<h3>Example<\/h3>\n<p>The example below will display a multi-column gallery of the specified profiles.<br \/>\n<code>[unc_directory multi-column=\"true\" ids=\"2925,3101,3195\"]<\/code><\/p>\n<h3>How To Find The Post ID<\/h3>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li>Edit a profile<\/li>\n<li>In the browser&#8217;s address bar, look for <strong>post=<\/strong> in the url. The number following that is the ID that should be listed in the shortcode.<\/li>\n<li>Example: In the following url, <strong>59519<\/strong> is the post ID.<br \/>\nhttps:\/\/www.med.unc.edu\/medicine\/oncology\/wp-admin\/post.php?<strong>post=59519<\/strong>&amp;action=edit<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Pagination<\/h2>\n<p>Pagination can be added to galleries with an abundance of profiles. Add <code class=\"inline\">paginate=\"true\"<\/code> to a base shortcode to enable the pagination. By default, 12 profiles will display per page. To set a custom number of profiles to display per page, add <code class=\"inline\">posts-per-page=\"\"<\/code>. Add the desired number in the quotes.<\/p>\n<p><strong>IMPORTANT<\/strong>: This modifier can only be used once on any given page.<\/p>\n<h3>Example<\/h3>\n<p>The example below will display a multi-column gallery that displays 21 profiles per page.<br \/>\n<code>[unc_directory multi-column=\"true\" paginate=\"true\" posts-per-page=\"21\"]<\/code><\/p>\n<p><a href=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-with-pagination.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-13447\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-with-pagination.png\" alt=\"Example of a directory gallery with pagination.\" width=\"500\" height=\"317\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-with-pagination.png 860w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-with-pagination-300x190.png 300w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-with-pagination-768x488.png 768w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-with-pagination-600x381.png 600w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/02\/directory-with-pagination-560x356.png 560w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Once some profiles have been created, you can display them on your site in a gallery. You can display all the profiles in one gallery or you can display smaller groups of profiles which we call Divisions. Base Shortcode A gallery can be displayed in either a single-column or multi-column view. Either of these base &hellip; <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/people-directory\/new-people-directory\/create-a-gallery\/\" aria-label=\"Read more about Create a Gallery\">Read more<\/a><\/p>\n","protected":false},"author":3206,"featured_media":0,"parent":13397,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-13432","page","type-page","status-publish","hentry","odd"],"acf":[],"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/13432","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/users\/3206"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/comments?post=13432"}],"version-history":[{"count":0,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/13432\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/13397"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/media?parent=13432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}