Gaslamp Media https://www.gaslampmedia.com Wed, 14 Dec 2016 19:51:11 +0000 en-US hourly 1 70508464 Using the Modulus Operation with Bootstrap Grid https://www.gaslampmedia.com/humble-modulus-operator/ https://www.gaslampmedia.com/humble-modulus-operator/#respond Sat, 23 Apr 2016 07:10:48 +0000 https://www.gaslampmedia.com/?p=3148 Everyone knows the common math operations – add, subtract, divide, multiply. But have you used the modulus (or modulo) operation lately? Think back to third...

The post Using the Modulus Operation with Bootstrap Grid appeared first on Gaslamp Media.

]]>
Everyone knows the common math operations – add, subtract, divide, multiply. But have you used the modulus (or modulo) operation lately? Think back to third or fourth grade math where you were just learning division and you had remainders left. For example, you have 8 blocks and divide it between 3 people. Each person gets 2 blocks and you have 2 left. That leftover is what the modulus calculates for.

In PHP it’s notated with the % sign, like so:

8 % 3 = 2

With responsive websites and many sites making use of the grid structure, the modulus operation solves a very common problem with columns with varying amounts of content.

For example, consider these 6 divs with the same amount of content. They fit nicely and collapse gracefully on tablet and mobile browsers (resize your browser to see this effect).

A
B
C
D
E
F

The Code

<div class="row">
<div class="col-sm-6 col-md-4">
    <div class="well">A</div>
</div>
<div class="col-sm-6 col-md-4">
    <div class="well">B</div>
</div>
<div class="col-sm-6 col-md-4">
    <div class="well">C</div>
</div>
<div class="col-sm-6 col-md-4">
    <div class="well">D</div>
</div>
<div class="col-sm-6 col-md-4">
    <div class="well">E</div>
</div>
<div class="col-sm-6 col-md-4">
    <div class="well">F</div>
</div>
</div>

However, content in the real world doesn’t work that way, so you’re going to get varying amounts of contents and heights, like so:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum dapibus facilisis. Sed sit amet lacus ipsum. Quisque laoreet pharetra quam ac luctus.
Donec pretium maximus augue in rutrum. Sed ac ipsum tortor. Fusce consequat elementum tempus. Donec augue ligula, vehicula sed malesuada non, gravida quis lacus. Sed ultrices neque in tortor tempus, nec porttitor elit tempor. Duis ut diam lacus. Donec aliquet at tortor vitae fringilla.
Morbi erat enim, congue et orci ac, dictum ultrices ipsum. Vivamus ornare elementum est, id congue turpis scelerisque rhoncus.
Nulla a mi aliquam, blandit massa a, vestibulum felis. Vestibulum feugiat vel erat sed rhoncus. Mauris auctor felis ipsum. In commodo dui odio, et eleifend erat convallis eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent ac risus ac leo maximus posuere. Sed in sodales mauris, ac efficitur massa. Integer fringilla velit sed nibh eleifend luctus.
Proin non mi a diam hendrerit ullamcorper id a turpis. Nullam commodo rutrum odio, sed sagittis nisl iaculis vel.

Now our columns aren’t stacking so nicely anymore. In Bootstrap and other column based CSS frameworks, all the divs float left. When there’s a mismatch in the heights, you get odd stacking.

The fix for this is to introduce a div to clear the row.

<div class="clearfix"></div>

But you’ll notice we have 2 columns per row on tablet (small) and 3 on desktop (medium, large layouts). So we need to make add another class to make them visible for only certain media queries. We do this with the visible-* classes. So it ends up looking like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum dapibus facilisis. Sed sit amet lacus ipsum. Quisque laoreet pharetra quam ac luctus.
Donec pretium maximus augue in rutrum. Sed ac ipsum tortor. Fusce consequat elementum tempus. Donec augue ligula, vehicula sed malesuada non, gravida quis lacus. Sed ultrices neque in tortor tempus, nec porttitor elit tempor. Duis ut diam lacus. Donec aliquet at tortor vitae fringilla.
Morbi erat enim, congue et orci ac, dictum ultrices ipsum. Vivamus ornare elementum est, id congue turpis scelerisque rhoncus.
Nulla a mi aliquam, blandit massa a, vestibulum felis. Vestibulum feugiat vel erat sed rhoncus. Mauris auctor felis ipsum. In commodo dui odio, et eleifend erat convallis eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent ac risus ac leo maximus posuere. Sed in sodales mauris, ac efficitur massa. Integer fringilla velit sed nibh eleifend luctus.
Proin non mi a diam hendrerit ullamcorper id a turpis. Nullam commodo rutrum odio, sed sagittis nisl iaculis vel.

The Code

<div class="row">
<div class="col-sm-6 col-md-4">...</div>
<div class="col-sm-6 col-md-4">...</div>
<div class="clearfix visible-sm"></div>
<div class="col-sm-6 col-md-4">...</div>
<div class="clearfix visible-sm"></div>
<div class="col-sm-6 col-md-4">...</div>
<div class="clearfix visible-sm"></div>
<div class="col-sm-6 col-md-4">...</div>
<div class="col-sm-6 col-md-4">...</div>
</div>

Finally, we circle back to how the modulus operation helps in all this. Unless you’re hand coding a page, you’re most likely going to be using a loop of some type to go through a bunch of results of a query. A typical use case may be outputting your blog posts in a grid format instead of the usual list format. The modulus operation calculates when to output the clearing divs for tablet and desktop browsers. If you get a remainder of 0, that means it divides evenly. You simply use the modulus operation of however items you want per row inside of a conditional, then output something if the value is 0.

Example with a template file:

<div class="row">
<?php 
$i = 1; // start a counter
while( have_posts() ) : the_post();
?>
   <div class="col-sm-6 col-md-4">
   <h4><?php the_title(); ?></h4>
<?php 
if ( ($i % 2) == 0 ) : // check if evenly divides by 2 
?>
    <div class="clearfix visible-sm"></div>
<?php endif; ?>
<?php 
if( ($i % 3) == 0 ) : // check if evenly divides by 3
?>
    <div class="clearfix visible-md visible-lg"></div>
<?php endif;
 $i++; //increment the counter
endwhile;
?>
</div>

The post Using the Modulus Operation with Bootstrap Grid appeared first on Gaslamp Media.

]]>
https://www.gaslampmedia.com/humble-modulus-operator/feed/ 0 3148
Now Offering Commercial Photography Services https://www.gaslampmedia.com/now-offering-commercial-photography-services/ https://www.gaslampmedia.com/now-offering-commercial-photography-services/#respond Mon, 04 Apr 2016 03:08:14 +0000 https://www.gaslampmedia.com/?p=3032 We’re proud to announce we are now offering commercial photography, bringing another arm of digital marketing in-house with the same quality you’ve come to expect...

The post Now Offering Commercial Photography Services appeared first on Gaslamp Media.

]]>
We’re proud to announce we are now offering commercial photography, bringing another arm of digital marketing in-house with the same quality you’ve come to expect from Gaslamp media. Check out the details on the new commercial photography service page.

For family photography needs, you can check out Scripps Ranch Photo Studio.

The post Now Offering Commercial Photography Services appeared first on Gaslamp Media.

]]>
https://www.gaslampmedia.com/now-offering-commercial-photography-services/feed/ 0 3032
Tutorial: Drupal Bootstrap 3.4 Subtheme with LESS https://www.gaslampmedia.com/tutorial-drupal-bootstrap-3-4-subtheme-with-less/ https://www.gaslampmedia.com/tutorial-drupal-bootstrap-3-4-subtheme-with-less/#comments Fri, 19 Feb 2016 04:22:20 +0000 https://www.gaslampmedia.com/?p=3001 Bootstrap continues to be our favorite starter theme for Drupal 7. This is an update to our original guide on how to set up a Bootstrap...

The post Tutorial: Drupal Bootstrap 3.4 Subtheme with LESS appeared first on Gaslamp Media.

]]>
Bootstrap continues to be our favorite starter theme for Drupal 7. This is an update to our original guide on how to set up a Bootstrap subtheme with LESS. Many of the steps are the same but they’re repeated here for convenience.

Bootstrap 7.x-3.4 introduces some new features and a restructuring of its subtheme starterkit folder.

This guide covers setting up a subtheme with LESS only.

Overview

  1. Get Bootstrap Theme
  2. Create the subtheme directory and copy files
  3. Configure your .info file
  4. Download Bootstrap source
  5. Compile the LESS files
  6. Enable Your Subtheme
  7. Copy template files from the parent theme (Optional)
  8. Closing

1. Get Bootstrap Theme

  1. Download the Drupal Bootstrap theme
    1. Extract/upload to your sites/all/themes
    2. There is no need to activate the theme. We only need this to set up the subtheme
  2. Download/Enable jQuery Update
    1. Extract/upload to your sites/all/modules
    2. Set the “Default jQuery Version” to at least 1.9
    3. Set “Alternate jQuery version” to 1.5 or “Default (provide by Drupal)” –  This prevents issues with AJAX heavy modules like Views
    4. Set jQuery CDN to your own preference or based on the performance of your server. Loading the files from CDN takes some load and bandwidth off your server, but in some cases in may be faster served by your local server.

jQuery update settings for Drupal Bootstrap theme

 

2. Create the subtheme directory and copy files

  1. Create a new folder for your subtheme inside of sites/all/themes.
    1. In our example, we’ll call our subtheme my_subtheme, so we should have an empty directory at sites/all/themes/my_subtheme.
  2. Copy all the files from sites/all/themes/bootstrap/starterkits/less to sites/all/themes/my_subtheme
  3. Your subtheme directory should look like this:
    bootstrap starter kit

3. Configure your .info file

  1. Rename less.starterkit to my_subtheme.info. Remember to replace “my_subtheme” with the name of your own subtheme.
  2. Edit my_subtheme.info with your text/code editor of choice and give it a unique name and description:
    name = My Awesome Bootstrap subtheme
    description = A Bootstrap Sub-theme customized for this particular project
    core = 7.x
    base theme = bootstrap

4. Download Bootstrap source

Download Bootstrap source and upload it to your subtheme folder. The folder names may start getting confusing here because the word “bootstrap” is part of the theme name as well as the source code. Be sure to put the files inside of your subtheme folder. It should look like this when you’re done:

my_subtheme/bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

The only folders you need from source are less, js, and fonts. The rest is optional, but it doesn’t hurt to have them in there.

5. Compile the LESS files

Compile the LESS files to create your style.css, which contains all of the Bootstrap CSS , Drupal-specific overrides (overrides.less), and your own custom code.

lessc less/style.less > css/style.css

6. Enable Your Subtheme

Enable your subtheme from Drupal. If everything went well, you should see the default Bootstrap styles loaded.

7. Copy template files from the parent theme (Optional)

If you plan on making only CSS changes to your theme, you can skip this step.

However, for more customized themes, you’ll want to modify the page.tpl.php and html.tpl.php files.

Copy page.tpl.php and html.tpl.php from sites/all/themes/bootstrap/templates/system to your subtheme’s templates folder at sites/all/themes/my_subtheme/templates

Flush the theme cache so Drupal will recognize the new files.

8. Closing

As you can see, setting up a Drupal Bootstrap subtheme can be a pain in the ass. If you develop websites for a living and work on many projects, you should look into creating your own git repository with all the necessary files and configurations. We maintain a repository for a generic “Bootstrap Subtheme” that can be enabled and used as is, saving about 20-30 minutes per new set up.

The post Tutorial: Drupal Bootstrap 3.4 Subtheme with LESS appeared first on Gaslamp Media.

]]>
https://www.gaslampmedia.com/tutorial-drupal-bootstrap-3-4-subtheme-with-less/feed/ 1 3001
Web Developers: Don’t be that guy (or girl) https://www.gaslampmedia.com/dont-be-that-guy-or-girl/ https://www.gaslampmedia.com/dont-be-that-guy-or-girl/#comments Wed, 17 Feb 2016 18:28:08 +0000 https://www.gaslampmedia.com/?p=2992 We’ve worked with a lot of web developers over the years we’ve been in business, whether its our own staff, contractors, or collaborators in open...

The post Web Developers: Don’t be that guy (or girl) appeared first on Gaslamp Media.

]]>
We’ve worked with a lot of web developers over the years we’ve been in business, whether its our own staff, contractors, or collaborators in open source projects. There’s a lot to learn in web design and development, but a recurring piece of advice for our hires is “Don’t be that guy.”

You know that guy.

If you’ve been in this industry for more than a few months, you’ve probably encountered that guy, even if you’ve never met him or her.

  • That guy whose code makes you want to type mostly four letter words.
  • That guy who left you code so convoluted tracking down a feature in the code requires stringing up leads on a cork board like a detective tracking down a murderer.
  • That guy whose code is the gift that keeps on giving (headaches) years after he or she has left the company.
  • That guy who can’t remember what he did even though he was the one who wrote the code.
  • That guy who gets more face palms than high fives from coworkers.

Don’t be that guy.

Here are our tips to not be that guy. Future you and coworkers will thank you.

Comment your code

It could be days or months, but eventually you or someone else will need to update your code. Do yourself and your coworkers a favor and leave some concise, useful comments.

Drupal.org offers a great guide on commenting in their coding standards guide.

Although it’s written for Drupal, the same basic principles can be applied to any type of project.

WordPress offers a much briefer guideline on comments.

Something is better than nothing, but too much can be as bad as too little. If you can make sense of what your code and comments mean weeks after writing them, then you’re doing fine.

Comment your commits

You’ll see most of these tips revolve around maintainability of projects. Even if it’s a small project, you should be using some form of source code management and leave good commit messages.

  1. Separate subject from body with a blank line
  2. Limit the subject line to 50 characters
  3. Capitalize the subject line
  4. Do not end the subject line with a period
  5. Use the imperative mood in the subject line
  6. Wrap the body at 72 characters
  7. Use the body to explain what and why vs. how

Source and more details on that on here.

Don’t overuse the !important attribute in your CSS

How do you know when you’re overusing it? When you have !important attributes overwriting !important attributes, you’re doing it wrong. This should be used as a last resort where normal specificity rules just won’t do the job.

When everything is important nothing will be

 

Use classes and CSS efficiently

One feature many new web developers overlook is that css classes stack. A symptom of this repetitive CSS definitions. An example of this looks like the following.

Markup

<a href="#" class="button-primary">Link 1</a>
<a href="#" class="button-secondary">Link 2</a>

CSS

.button-primary {
     display: inline-block;
     padding: 6px 12px;
     margin-bottom: 0;
     font-size: 14px;
     font-weight: 400;
     text-align: center;
     white-space: nowrap;
     border: 1px solid transparent;
     border-radius: 4px;
     color: #fff;
     background-color: #000;
     border-color: #000;
}
.button-secondary{
     display: inline-block;
     padding: 6px 12px;
     margin-bottom: 0;
     font-size: 14px;
     font-weight: 400;
     text-align: center;
     white-space: nowrap;
     border: 1px solid transparent;
     border-radius: 4px;
     color: #fff;
     background-color: #337ab7;
     border-color: #2e6da4;
}

As you can see, the only difference between the two buttons is the background and border color. Now imagine scaling this up to more colors and size variations throughout a website. You’d have hundreds of lines of code to maintain. Now lets say you want to make a change to all of them, like increasing the padding from 6px to 10px. You’d have to track down each of the class definitions and make changes individually. It’s prone to errors and style conflicts down the road.

A more efficient way is to use the stacking properties of CSS classes in markup. Put all the shared attributes into a single class definition and separate the unique styles into their own.

CSS

.button {
     display: inline-block;
     padding: 6px 12px;
     margin-bottom: 0;
     font-size: 14px;
     font-weight: 400;
     text-align: center;
     white-space: nowrap;
     border: 1px solid transparent;
     border-radius: 4px;

}
.button-primary {
    color: #fff; 
    background-color: #000; 
    border-color: #000;
}
.button-secondary {
     color: #fff;
     background-color: #337ab7;
     border-color: #2e6da4;
}

Markup

<a href="#" class="button button-primary">Link 1</a>
<a href="#" class="button button-secondary">Link 2</a>

Our example is for a simple button, but the same technique should be applied to classes for the overall page layout and its subsections.

Name your divs by purpose, not content.

Have you ever taken over project where you find oddly specific classes that don’t match up to the content? Don’t be that guy.

Example:

<div class="welcome">
    <h3>Lorem ipsum dolor sit amet</h3>
</div>
<div class="about-us">
    <h3>Consectetur adipiscing elit</h3>
</div>
<div class="contact-us">
    <h3>In dignissim consequat magna</h3>
</div>

Website content is subject to change. Instead of “About Us”, it may change to “Daily Specials” or “Recent Blog Posts”. Naming your divs and classes like this only locks you into a certain structure and creates confusion in the future. Instead, name them something more generic and use an optional ID and additional classes for any specific styling. We usually name our divs by where they are in the layout, such as prefix, postscript, footer, sidebar, and followed by a number or letter. In Drupal and WordPress, this is how we normally name our regions and sidebars, respectively.

Better example:

<div class="postscript-a" id="welcome">
    <h3>Lorem ipsum dolor sit amet</h3>
</div>
<div class="postscript-b" id="about-us">
    <h3>Consectetur adipiscing elit</h3>
</div>
<div class="postscript-c" id="contact-us">
    <h3>In dignissim consequat magna</h3> 
</div>

If you plan on reusing a theme for multiple projects, this method offers a more flexible naming structure.

Summary

Successful web projects depend on manageable and scalable code. Apply these techniques in your projects to make projects easy to work on for yourself and any co-maintainers.

The post Web Developers: Don’t be that guy (or girl) appeared first on Gaslamp Media.

]]>
https://www.gaslampmedia.com/dont-be-that-guy-or-girl/feed/ 2 2992
Views Bulk Operation 7.x-3.3 breaks ubercart set order status operation https://www.gaslampmedia.com/views-bulk-operation-7-x-3-3-breaks-ubercart-set-order-status-operation/ https://www.gaslampmedia.com/views-bulk-operation-7-x-3-3-breaks-ubercart-set-order-status-operation/#comments Mon, 15 Feb 2016 15:01:01 +0000 https://www.gaslampmedia.com/?p=2982 Views Bulk Operation 7.x-3.3 breaks ubercart set order status operation. As a temporary fix we’ve created a module that will be able to change the...

The post Views Bulk Operation 7.x-3.3 breaks ubercart set order status operation appeared first on Gaslamp Media.

]]>
Views Bulk Operation 7.x-3.3 breaks ubercart set order status operation. As a temporary fix we’ve created a module that will be able to change the order status. Download and enable the module, then enable the new operation Update Ubercart Order Status in VBO field settings.

Download Module

<?php

//hook_action_info
function vbo_ubercart_action_info() {
 return array(
 'vbo_ubercart_order_update_action' => array(
 'type' => 'uc_order',
 'label' => t('Update Ubercart Order Status'),
 'permissions' => array('access content', 'administer site configuration'),
 'behavior' => array('changes_property'),
 'configurable' => FALSE,
 'vbo_configurable' => TRUE,
 'triggers' => array('any'),
 ),
 );
}

function vbo_ubercart_order_update_action_form($settings, &$form_state) {
 $form = array();
 $form['order_status'] = array(
 '#type' => 'select', 
 '#title' => t('Select the Order Status to change to'),
 '#options' => uc_order_status_options_list(),
 '#required' => TRUE,
 );
 return $form;
}

function vbo_ubercart_order_update_action_submit($form, $form_state) {
 $return = array(); 
 $return['status'] = $form_state['values']['order_status'];
 return $return;
}

function vbo_ubercart_order_update_action(&$entity, $context) { 
 $entity->order_status = $context['status'];
 uc_order_update_status($entity->order_id, $context['status']);
}

The post Views Bulk Operation 7.x-3.3 breaks ubercart set order status operation appeared first on Gaslamp Media.

]]>
https://www.gaslampmedia.com/views-bulk-operation-7-x-3-3-breaks-ubercart-set-order-status-operation/feed/ 1 2982
The Case of the Disappearing Yahoo.com leads https://www.gaslampmedia.com/not-getting-leads-from-yahoo-and-aol-addresses-heres-how-to-fix-it/ https://www.gaslampmedia.com/not-getting-leads-from-yahoo-and-aol-addresses-heres-how-to-fix-it/#respond Sun, 14 Feb 2016 15:01:45 +0000 https://www.gaslampmedia.com/?p=2977 Overview Email services don’t trust emails spoofed emails from yahoo.com. Send it from your own domain instead and add a reply-to header in your notification...

The post The Case of the Disappearing Yahoo.com leads appeared first on Gaslamp Media.

]]>
Overview

Email services don’t trust emails spoofed emails from yahoo.com. Send it from your own domain instead and add a reply-to header in your notification email.

The Problem

In the last year, we’ve been getting a lot of reports from our customers that they’re not getting any leads from their website from @yahoo.com or @aol.com addresses. It’s not that the emails were going to the spam folder. Precious leads simply disappeared as if going into a black hole, never to be seen again.

This issue affects any forms that send emails “from” certain email addresses. So far we’ve seen yahoo.com and aol.com domains affected, but there are likely more as email providers try to combat spam. An example email header below:

From: Yahoo Guy <abc123@yahoo.com>
To: Sales Manager <sales_guy@yourdomain.com>
Subject: I’m interested in your product!

This is because email providers have started to reject emails “from” Yahoo and others who have updated to DMARC authentication policy to deny emails that did not actually originate from their servers. In other words, if you didn’t actually send it from your Yahoo.com email account, the email won’t be received.

This is because many publicly accessible contact forms would be filled out by bots and spammers with made up @yahoo.com emails, causing many false positives for spam prevention systems and ruining the reputation of the yahoo.com domain. There was nothing stopping “John” sending nasty emails from his enemy “Matt” by submitting forms online with Matt’s yahoo.com email address, and so many email services simply block those emails now. However, if Matt were to log into his yahoo.com account and send an email to sales_guy@yourdomain.com, it would get there with no problems.

The Solution (Part 1)

The solution for website owners is quite simple, but it introduces a minor inconvenience.

When configuring email notifications from your lead forms, don’t use the submitter’s email address for the “from” address. Use something from your own domain name, such as “noreply@gaslampmedia.com” or “notifications@gaslampmedia.com”, and include the submitter’s email address as part of the subject or body of the email. This gets around the DMARC policy.

Now your email will look something like this:

From: noreply@yourdomain.com
To: Sales Manager <sales_guy@yourdomain.com>
Subject: I’m interested in your product!
Body: Yahoo Guy (abc123@yahoo.com) is interested in your product.

However, now you have the inconvenience of having to copy and paste the email address from the body into a new email. If you’re like most people, your natural inclination is to hit the “reply” button and start writing up an awesome response email right away. But then you realize you’re now replying to “noreply@yourdomain.com” instead of the prospect’s email, or you don’t and you get a bounced email error immediately after hitting send to a non-existent address.

The Solution (Part 2)

Make life a little easier for your sales team by introducing the “Reply-To” email header and set that to the submitter’s email. Now your email notifications will look like this:

From: noreply@yourdomain.com
Reply-To: Yahoo Guy <abc123@yahoo.com>
To: Sales Manager <sales_guy@yourdomain.com>
Subject: I’m interested in your product!
Body: Yahoo Guy (abc123@yahoo.com) is interested in your product.

Now when you click on “reply”, it will go to the specified “Reply-To” address instead of the “From” address.

No more lost leads and the convenience of replying in one click. Winner, winner.

Reply-To Headers for select platforms

WordPress

  • Contact Form 7  Add the following to the “Additional Headers” field:
    • Reply-to: [your-name] <[your-email]>
  • Formidable – Settings > Form Actions > Email Notifications, fill in the “Reply to” field

Drupal

  • Webform: Install the Webform Reply To module to enable the field in your webform emails.

 

The post The Case of the Disappearing Yahoo.com leads appeared first on Gaslamp Media.

]]>
https://www.gaslampmedia.com/not-getting-leads-from-yahoo-and-aol-addresses-heres-how-to-fix-it/feed/ 0 2977
Responsive Redesign for Higher Education https://www.gaslampmedia.com/responsive-redesign-for-higher-education/ https://www.gaslampmedia.com/responsive-redesign-for-higher-education/#respond Fri, 12 Feb 2016 22:02:18 +0000 https://www.gaslampmedia.com/?p=2975 The designers at MJE Marketing of San Diego reached out to us with a unique challenge. They had a design approved for the Thomas Jefferson...

The post Responsive Redesign for Higher Education appeared first on Gaslamp Media.

]]>
The designers at MJE Marketing of San Diego reached out to us with a unique challenge. They had a design approved for the Thomas Jefferson School of Law website (http://www.tjsl.edu) but no way of implementing it and a deadline looming. Every developer they approached wouldn’t take on the job, citing the amount of pages, custom templates, and the older version of Drupal, claiming it would be too complex or too expensive to implement. The site had an older fixed-width, table-based layout, so it was no small task. However, after an in-depth review of the website, we realized it was not nearly as difficult as expected. It did require expert level, in-depth knowledge of Drupal and how templates work, which is one of our core strengths.

How We Helped

It was clear to us that this was strictly a theming project, meaning we would not touch any of the website programming or be editing pages. With over 6,000 pages of content it would be simply impossible to check every single page. After inspecting the existing theme files, the site was composed of only a few templates for page layout and only a handful of CSS files that controlled everything.

Armed with only mockups of the homepage and two variations of content pages, we started by creating a working copy of the website to our development server. We then tackled each template file one by one and previewed our changes on the site. Since pages in the same section shared the same layout, we were confident our changes would be consistent across the site after spot checking less than a dozen pages using that template. We found small variations for things like embedded photos, videos, or other special formatting, but those are all easily addressed with a few lines of CSS code. As we worked, we checked the design across the major mobile devices, such as iPhone, Android, and iPad, as well as the main desktop browsers like Internet Explorer, Chrome, Firefox, and Safari.

After only three weeks of development and testing, the changes were deemed readily to go public. Since the changes were restricted to only the template files, the rollout consisted of uploading our changed files to the live server and clearing the Drupal cache. With zero downtime, we were able to deploy a brand new responsive design on time and on budget.

The post Responsive Redesign for Higher Education appeared first on Gaslamp Media.

]]>
https://www.gaslampmedia.com/responsive-redesign-for-higher-education/feed/ 0 2975
Facilitating the CMS Needs of a Public Transit System https://www.gaslampmedia.com/facilitating-the-cms-needs-of-a-public-transit-system/ https://www.gaslampmedia.com/facilitating-the-cms-needs-of-a-public-transit-system/#respond Fri, 12 Feb 2016 21:57:07 +0000 https://www.gaslampmedia.com/?p=2972 In early 2015 Gaslamp Media teamed up with Steer Davies Gleave (SDG) to provide a completely new website solution for San Diego Metropolitan Transit System...

The post Facilitating the CMS Needs of a Public Transit System appeared first on Gaslamp Media.

]]>
In early 2015 Gaslamp Media teamed up with Steer Davies Gleave (SDG) to provide a completely new website solution for San Diego Metropolitan Transit System (SDMTS). The site had four general requirements:

  1. Responsive Design
  2. Integration of routing services provided by SDG
  3. Powerful and easy to use CMS
  4. Retain existing URLs and legacy content

The Platform

With requirements for granular permissions, dozens of content types, a variety of user roles, extensible code, and integration with third party services, Drupal was easily the best platform for the job. Drupal is an open source content management system popular with developers and trusted by enterprise, higher education, and government websites.

How We Did It

Over several meetings with the various stakeholders and primary users for the websites, we developed a clear picture of how we would address each of the requirements.

Responsive Design

SDG provided wireframes and mockups for each of the main layouts and their mobile, tablet, and desktop variations. We wanted a solution that was very well supported, easily customizable, and with excellent documentation, so we chose Twitter Bootstrap as the framework for our custom theme. Combined with the LESS CSS preprocessor, we were able to spend less time writing code and browser testing, resulting in less costs and errors.

Integration with Routing Services Provided by SDG

SDG was responsible for the mapping and routing software for the new SDMTS website. Their code was nearly entirely self-contained, so we treated it as a separate project within the Drupal site. We set up “git” for the source code management to avoid conflicts and handle code deployments. Using handlers to parse the page address, we were able to pass queries to their routing software without causing any conflicts.

Powerful and Easy to Use CMS

“Powerful” and “Easy to use” probably sounds like a paradox in software, but it was entirely possible due to Drupal’s powerful role and permissions system. Luckily, we had a very tech savvy site administrator on the project who would be managing all the content, so we gave her access to all the code and permissions an administrator would need. This included options to edit markup directly instead of relying on the visual/WYSIWYG editor, permission to review and approve content prior to publishing, and configuration of dozens of contributed modules.

For the less tech savvy contributors, we limited them to only using the visual editor so they don’t need to know any HTML and they’re only allowed to create certain types of content. By restricting them to only what they need access to, we provided a less daunting experience for contributors and control and peace of mind to the site administrators.

Retain existing URLs and legacy content

As a public service, SDMTS is required to publish meeting minutes, records, and other publicly accessible documents. This amounted to thousands of pages of content that may have been bookmarked over the years, linked to from other websites, and indexed in search engines. Any broken links would cause concern and frustration for users looking for that information. To address this, we keep the page URLs the same where possible and implemented “301 redirects” to permanently forward old addresses to their respective new addresses.

 

The post Facilitating the CMS Needs of a Public Transit System appeared first on Gaslamp Media.

]]>
https://www.gaslampmedia.com/facilitating-the-cms-needs-of-a-public-transit-system/feed/ 0 2972
Building Drupal sites with Bootstrap: Responsive Carousels with Views https://www.gaslampmedia.com/building-drupal-sites-with-bootstrap-responsive-carousels-with-views/ https://www.gaslampmedia.com/building-drupal-sites-with-bootstrap-responsive-carousels-with-views/#respond Sat, 04 Apr 2015 22:54:32 +0000 https://gaslampmedia.com/?p=1836 We recently relaunched ItaloAmericano.org with a new theme based on Bootstrap. One of our goals was to minimize the need for additional modules and javascript...

The post Building Drupal sites with Bootstrap: Responsive Carousels with Views appeared first on Gaslamp Media.

]]>
We recently relaunched ItaloAmericano.org with a new theme based on Bootstrap. One of our goals was to minimize the need for additional modules and javascript packages, since Bootstrap comes with just about everything we need.

A feature used throughout the site is a responsive carousel of featured articles for each of the main categories. The titles and images are pulled from the “article” node and link directly to the node when clicked.

Culture   L Italo Americano   Italian American bilingual news source

 

Ingredients:

We piece this effect together from a few Drupal modules:

  1. Views
  2. Views Bootstrap
  3. Bootstrap Theme

The Plan:

  1. Create an Image Style for the carousel images
  2. Create a new “View” for your carousel
  3. Add Fields
  4. Edit the View Format
  5. Style your new carousel

1. Create an Image Style for the carousel images

In order for the carousel to look consistent between slides, you’ll need an Image Style set.

Go to admin/config/media/image-styles/add

I typically use the “Scale and Crop” effect. Feel free to adjust this as needed. The size you choose should be for the largest screen width your site supports. The images will be scaled down as part of the responsive carousel for smaller screens.

2. Create a new “View” for your carousel

On this site, we created a carousel from articles’ main images and their titles. Create a new block and select the content “type” of your choice.

Uncheck “create a page” and check “Create a block”. Title is optional. Our site does not require them. The Items per page will be the numbers of slides visible at once, so adjust as needed.

Add new view   L Italo Americano   Italian American bilingual news source

3. Add Fields

Add the fields you need for your carousel. In our case, we want just the “title” and “main image”.

Featured Slideshows  Content    L Italo Americano   Italian American bilingual news source2

  1. Uncheck “Create a label”
  2. Optional: Check “Link this field to the original piece of content” if you want the title to be a link.

 

Featured Slideshows  Content    L Italo Americano   Italian American bilingual news source

  1. Uncheck “Create a label”
  2. Select the “Image style” you created from earlier.
  3. Optional: Link image to “content” if you want the entire image clickable.
  4. Click “Apply” to save

4. Edit the View Format

The key to the Bootstrap carousel is in the “Format” settings.

Featured Slideshows  Content    L Italo Americano   Italian American bilingual news source3

Under the “Format” section, make sure it’s set to “Bootstrap Carousel“. This is a new option introduced from the Views Bootstrap module.

Configure the settings to your liking. I recommend having “Pause on hover” on to avoid slides changing as someone is about to click.

Under “Show“, change it to “Bootstrap Carousel

On the next screen you’ll be provided 3 fields as part of the standard Bootstrap carousel: Image, Title, and Description. Match these to the fields you added earlier.

bootstrap carousel options

 

5. Style your new carousel

Place your new carousel and theme to your liking. For finer control of where to place blocks, I recommend the context module.

 

Additional reading:

  1. Tutorial: Drupal Bootstrap Subtheme with LESS
  2. Bootstrap Carousel documentation

 

The post Building Drupal sites with Bootstrap: Responsive Carousels with Views appeared first on Gaslamp Media.

]]>
https://www.gaslampmedia.com/building-drupal-sites-with-bootstrap-responsive-carousels-with-views/feed/ 0 1836
Drupal to WordPress, WordPress to Drupal https://www.gaslampmedia.com/drupal-to-wordpress-wordpress-to-drupal/ https://www.gaslampmedia.com/drupal-to-wordpress-wordpress-to-drupal/#respond Fri, 03 Apr 2015 04:03:21 +0000 https://gaslampmedia.com/?p=1825 We specialize primarily in WordPress and Drupal sites. Often we find ourselves converting sites from one platform to another. For example, Drupal excels with handling...

The post Drupal to WordPress, WordPress to Drupal appeared first on Gaslamp Media.

]]>
We specialize primarily in WordPress and Drupal sites. Often we find ourselves converting sites from one platform to another. For example, Drupal excels with handling user accounts and granular permissions, whereas WordPress offers a much simpler admin interface and writing experience.

The following is a table of common site features and their Drupal and WordPress counterparts in case you find yourself needing to go between platforms. All the Drupal modules and WordPress plugins can be found on http://www.drupal.org and http://www.wordpress.org respectively. This list does not include any “premium” or paid plugins that can be found elsewhere.

Feature Drupal WordPress
Media manager Media Built In
Custom Fields Built In ACF
WYSIWYG/Rich Text Editor WYSIWYG1 Built In
Spam Prevention (No CAPTCHA) Mollom Akismet (included)
Slideshow/Carousel of content Views Slideshow Meta Slider (and many others)
Caching Built In W3 Total Cache
Page Ordering Weight Simple Page Ordering
Assigning Classes to blocks/widgets Block Class Widget CSS Classes
Creating Contact Forms Webform Contact Form 7
Sitemaps XML Sitemap Google XML Sitemaps
SEO Features (meta info, page titles) Metatag WordPress SEO by Yoast

 

1. Bring your own choice of editor. The most popular is CKEditor

The post Drupal to WordPress, WordPress to Drupal appeared first on Gaslamp Media.

]]>
https://www.gaslampmedia.com/drupal-to-wordpress-wordpress-to-drupal/feed/ 0 1825