Iso Shortcode

From UBC Wiki

UBC Isotope Shortcode Plugin

Create a dynamic and interactive way to present posts.

[iso query="posts_per_page=5&tag=tag-1,tag2" container="bus" view="simple_modal" gutter="20" box_width="265" filter="dropdown" filter_by="tags" filter_title="The Filter Title" searchable="true" help="false"]

Attributes

  • query: please go here http://wiki.ubc.ca/Documentation:UBC_Content_Management_System/CLF_Theme/Loop for options on the query.
  • container: sets the container surrounding the posts boxes. (The default is "iso")
  • posts_per_page: sets how many posts to receive from a query. Iso will only act on the posts returned from a query.
  • view: A preset look and feel controlled by the options listed below (Please note: that if no view or a spelling mistake is made then the view will default to custom_modal):
    • simple (default): creates a simple clean look.
    • simple_modal: creates a simple clean look while activating modal box pop-up to posts.
    • block: creates a blocky clean look.
    • block_modal: a blocky clean look while activating modal box pop-up to posts.
    • custom_modal: a view with minor CSS applied plus modal box pop-up to posts.
    • custom: a view with minor CSS.
    • list: creates a list of posts that is filterable.
  • gutter: specify the gutter width (this option only accepts numerical values)
  • box_width: specify the box width (this option only accepts numerical values)
  • filter: sets up a list of links or a drop down to sort post on the fly. Currently the list generated order they are type in the query. Filter uses tags or categories for filtering. Options listed below:
    • links
    • dropdown
  • filter_by: You can either filter by category or tags. The Filter will use what every category or tags are typed in the query
    • cat, categories, category
    • tag, tags
  • searchable: set to true and search box will appear and allow the user to search the post/pages title or excerpt.
  • filter_title: customize the title or text before the filter choice (Leave blank to show nothing).
  • help: shows the attributes or settings for the shortcode on the webpage. (This message appears on the page that the iso shortcode is being setup on. Use preview to to view the help info.) Either:
    • true
      • or
    • false

Customizing

Calling Isotope

When customizing the iso shortcode, it is important to use the boxey class in the object or box you with to use with isotope (see example below). If boxey is not used, Isotope may not work properly!

Out of the box

[iso query="posts_per_page=15&orderby=rand&tag=events,media,news,video-games,alumni"]

Adding filtering by category_name or tag

[iso query="posts_per_page=15&orderby=rand&category_name=events,media,news,video-games,alumni" filter_by="cat"]
[iso query="posts_per_page=15&orderby=rand&tag=events,media,news,video-games,alumni"]

Further Customization

The view attribute should be set to view=custom or view=custom-modal


New shortcodes have been created to assist with the custom filtering

  • [get_the_date] : Similar to [the_date] only this will show the date for each post in the loop; regardless if the post was posted on the same day as the previous post.
  • [plain_tags_slug] : Gets the post tags slug (NOTE: this tag is important to use from within the loop. More below).
  • [plain_cat_slug] : Gets the categories slug.
  • [plain_term_slug] : Gets the terms slug (Custom post type categories).


This Feature Requires WPAUTOP-control Plugin to be activated. More on the plugin http://wordpress.org/plugins/wpautop-control/faq/

When customizing the shortcode it is important to use the boxy as a class in the container being used to house the content.

Custom Filtering

In order to filter content in custom view, and depending on which filter_by option you choose, either use [plain_tags_shortcode], [plain_cat_slug] or [plain_term_slug] in the object or box that that is being filter (see example below).

The filter will still need to told what to filter by in the shortcode attribute.

Most other shortcodes that worked in the loop shortcode should work here as well.

Calling Isotope without search

Example shows how to include boxey class. You may need to remove whitespace to get around WordPress adding extra paragraph and line break tags. 

[iso query="posts_per_page=15&orderby=rand&tag=events,media,news,video-games,alumni" container="iso" gutter="25" view="simple_modal" box_width="260" filter="dropdown" help="true" pagination="false" filter_title="Why not filter something?"]
  <div class="boxey">
    <span style="color: red;">[plain_tags_slug]</span>
    <h2><a href="[permalink]" title="[the_title]">[the_title]</a><small>[get_the_date]</small></h2>  
    [the_excerpt]
  </div>
[/iso]

Calling Isotope with search, custom post type using Peoples Profile Plugin, and custom modal

For the search to work, you will need to match the parent structure and class naming convention. .iso-title and .iso-description will need to be present and follow the same parent and child relationship. 

[iso query="post_type=profile_cct&profile_cct_role=faculty,staff,researcher" pagination="false" searchable="true" filter_by="custom_post" filter="links" box_width="250" gutter="30" view="custom_modal"]
	<div id="post-[the_ID]" class="[plain_term_slug]">
		<div class="boxey [odd-even] [plain_term_slug] profile">
			<div class="boxey-inside">
				<a href="#[the_ID]" role="button" data-toggle="modal">[the_post_thumbnail size=full]</a>
				<div class="boxey-inner">
					<h3><a href="#[the_ID]" role="button" data-toggle="modal">
						<span class="iso-title">[profilefield type=name show="salutations, middle" html=false]
							<small>[profilefield type=position html=false]</small>
						</span></a></h3>
					<div class="iso-description hidden">[profilefield type=bio html=false]</div>
					<i class="icon-envelope"></i> <a href="mailto:[profilefield type=email html=false]" title="[profilefield type=name show="salutations, middle", html=false]">[profilefield type=email html=false]</a>
					<i class="icon-phone-sign"></i> [profilefield type=phone show="tel-1,tel-2,tel-3" html=false]
					<a href="#[the_ID]" role="button" class="btn btn-small launch-btn" data-toggle="modal">Launch</a>
				</div>
			</div>
		</div>

		<div id="[the_ID]" class="modal fade hide container" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_[the_ID]" aria-hidden="true">
		  <div class="">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabel_[the_ID]" class="modal-label header-tags">[profilefield type=profile_cct_role]</h3>
			</div>
			<!-- end #modal-header -->
			<div class="modal-body">
			  <div class="row-fluid">
				<div class="modal-body-content">
				  [the_content]
				</div>
			  </div>
			  <!-- end .row-fluid --> 
			</div>
			<!-- end .modal-body -->
			<div class="modal-footer">
				<div class="nav-previous alignleft">Read Next: <a href="#" title="Read More" role="button" data-toggle="modal">
					<strong>Adjacent Post Title</strong>
					<i class="icon-chevron-sign-right belize-hole"></i></a>
				</div>				
				<a href="[the_permalink]" title="[the_title]">open full page <i class="icon-share-alt belize-hole"></i></a>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			</div>
			<!-- End modal-footer --> 
		  </div>
		</div>
	</div>
[/iso]

Rules of Engagement:

This shortcode is meant for only one use per page (Fun results will ensue if you try more than one!)

Support, inquires or feedback

Please email: lt.hub@ubc.ca

Retrieved from "https://wiki.ubc.ca/index.php?title=Iso_Shortcode&oldid=566360"