WordPress
There are a number of options for adding tables to your WordPress website. The plugin I prefer is Easy Table because it is simple to setup and very functional.
Easy Table
Easy Table is WordPress plugin to create table in post, page, or widget in easy way using CSV format.
https://wordpress.org/plugins/easy-table/
Settings
Before getting started the only setting I change is switching the delimiter from a comma (,) to a pipe (|) since commas are used to display some data. It prevents you from accidently running into formatting errors as demonstrated in my example below which has a list of cities using a comma before the state.
Usage
Here is a sample table using this plugin. The first row will be the table headers which is a setting inside the plug options which can be disabled.
Rendered Table
[table]
Name | Age | Gender | Cities Lived
Norman M. Patton | 35 | Male | Waipahu, HI
John T. Bowman | 27 | Male | Butler, MO
Geraldine F. Crawford | 32 | Female | Sheridan, WY
Benjamin B. Waugh | 26 | Male | Pontiac, MI
Jill D. Rivers | 26 | Female | Jarrettsville, MD
[/table]
Code
Twitter Bootstrap is great but their carousels always bugged me. They don’t work well with images that are not the exact same size and clients uploading their own graphics you end up with a slider that resizes depending on the current image that is loaded.
My solution (using Bootstrap 3):
- Replace the image with a container div using the image file as a background.
- Set width to 100% so it will expand to fill it’s container. Set the height of the slider so it will have a consistent display regardless of the image size.
- Win
Here is the sample page comparing the two:
https://parkhurstdesign.com/sites/bootstrapsandbox/slider-fixed.php
Sample Code from the Twitter Bootstrap website:
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
The only change is the “item” divs. I am using this in a CMS so I use inline styles for the background divs so I can set the background image files within the loop. Just easier for my purposes. Change the img tag to a div as follows:
<div class="item active">
<img src="/path/image.jpg" alt="blah">
<div style="background:url(/path/image.jpg) center center;
background-size:cover;" class="slider-size">
<div class="carousel-caption">
<h2>Headline</h2>
<p>Content text to go here. </p>
</div>
</div>
</div>
The CSS:
.slider-size {
height: 400px; /* This is your slider height */
}
.carousel {
width:100%;
margin:0 auto; /* center your carousel if other than 100% */
}
One more thing. The damn sample script navigation doesn’t work on the Bootstrap website for some CMS themes. Code changes in bold. Here is how you fix it:
<!-- Controls -->
<a class="left carousel-control" href="javascript:void(0)"
data-slide="prev" data-target="#carousel-example">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="javascript:void(0)"
data-slide="next" data-target="#carousel-example">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
Accessibility concerns: with an img tag you include alt text for accessibility. Divs unfortunately do not allow you this option. It is a trade-off but you do include caption text within the div which helps but I am sure it is weighted differently.
Code
There are a number of ways to find the difference between two time stamps in PHP. I needed to find the number of hours for a project with a time clock. Here is an example you can test using the DateTime class.
$date1 = new DateTime('2004-03-01T01:30:00');
$date2 = new DateTime('2004-03-02T02:30:00');
$diff = $date2->diff($date1);
$hours = $diff->h;
$hours = $hours + ($diff->format('%d')*24);
$hours = $hours + ($diff->format('%i')/60);
// output our result with 2 decimal places
printf('Hours: %s',number_format($hours,2));
You can edit the date values to test the result. It will also take into account leap years if you want to be assured of the results.
Code, Drupal, Theming
I use Twitter Bootstrap as a base theme for most of my sites in Drupal. There are a ton of build in features that make theming a quick and enjoyable process. One thing that bugs me is the default padding and margin settings. They are a headache to deal with so here is a CSS reset to remove some of the more annoying settings.
Place this at the start of your custom CSS file and set your own padding/margins!
html,body {
height: 100%; margin: 0px; padding: 0px; }
#navbar {
margin-bottom:0; }
.alert {
border-radius: 0; }
.container {
width:100%;
padding-right: 0;
padding-left: 0;
margin-right: auto;
margin-left: auto; }
.col-xs-1, .col-sm-1, .col-md-1, .col-sm-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-sm-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-sm-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-sm-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-sm-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-sm-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-sm-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-sm-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-sm-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-sm-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-sm-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-sm-12 {
position: relative;
height:100%;
min-height: 1px;
padding-right: 0;
padding-left: 0; }
.row {
margin-right: 0;
margin-left: 0; }
.footer {
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
border-top: none; }
.panel {
border:none; }
Code
Probably a silly mistake that I had to deal with… but if your clients upload image files with spaces in the file name you will end up with broken image links. When returning filenames or paths from the database you want to replace spaces with the HTML entities. But using urlencode() or htmlentities() will not work for this purpose.
Instead use:
rawurlencode()
Drupal, Projects
Empower your clients by simplifying the Drupal Backend. Create an admin experience simpler and sleeker than even WordPress.
This is my session topic at Drupal Camp Phoenix.
Drupal, Projects
Presenting today at Drupal Camp Phoenix! They put me right after the co-founder of Pantheon who was the keynote speaker at Drupal Camp 2013. This will either go very well or end badly….
The most important person you work with is the client yet many companies turn over terrible instructions or confusing administration interfaces. I give tips and explain how to build an amazing client admin panel.
Drupal, Projects
Technology: Drupal
Quanta is an online, open research platform designed to connect high school students to research challenges and a network of mentors.
https://quanta.asu.edu/
Code
Use this to offset anchor links. Reasons for this might include using a fixed navigation bar that will cover part of the section you are loading.
Add a class to your anchor.
‹a class="anchor" id="top"›‹/a›
Now apply the offset script.
a.anchor {
display: block;
position: relative;
top: -90px;
visibility: hidden; }
Code
Because sometimes default bullets are boring…. Some dangerous bullets!
ul {
list-style-type: none;
padding: 0px;
margin: 0px; }
ul li {
background-image: url(custom-bullet.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px; }