Posts Tagged ‘Web Development’

Knowledge Nuggets

Friday, January 20th, 2012 by Christian Mattix

Anyone who has done development, design, or IT knows that over the course of working on a project, you collect various “nuggets” of knowledge that you ever learn or find. Here I’m going to share some of what I’ve discovered that may be able to help you in your own projects. I have cited the original source of the information if I have that available. If there is something that I’ve left out, feel free to add it in the comments.

“Fatal error: Out of memory…” occurring when PHP and Apache memory limits seem fine

This problem drove me crazy for a little while. I did everything that I thought I needed to do, I changed the php.ini file to increase the php memory available until I ran across this link which provided the answer. We are using WiredTree as our hosting provider, for their servers, the problem was fixed by simply adding: RLimitMem 128000000 to the .htaccess file in the www root directory. After doing this, it fixed everything.

I keep getting Notice: Undefined offset: 1 in views_block_view() in Drupal 7

After doing a bunch of operations during prototyping a Drupal 7 site we kept this error. There wasn’t anything that we seemed to be able to do to eliminate it from the Drupal administrative interface. After searching the web for quite some time I came across this page: http://objitsu.com/node/29 which gave me all of the information I need. From the article:

It’s caused by stale records in the block table that then fail to resolve. There’s plenty of reading material out there and suggested fixes etc. that I am sure work but once I knew what the problem was I applied *my process* for all Drupal problems like this.

  1. Find the code that issues the message..
  2. Trap the code and drupal_set_message() the offending item
  3. Use that information to fix-up the database / code as required.

Here’s how the fix works for this particular problem. In my case I edited views.module, line 569, here’s the code that was causing the notice to be show:

list($name, $display_id) = explode('-', $delta);

and here is what I added to the code to find out what the duff delta in question was…

if (count(explode('-',$delta)) == 1) {
  drupal_set_message($delta);
}
list($name, $display_id) = explode('-', $delta);

All I did then was refresh the page, take a note of hash value that was displayed and then cutting-and-pasting it into a command line MySQL session I issued this query:

mysql> delete from block where delta = 'd98a0bfa5a33e7d8bab0fc0670bdc9fd';
Query OK, 4 rows affected (0.01 sec)

Which took out all four problem pages at once.

What are the command line commands for git?

We use git for source control of our iOS projects. I found a great cheat sheet of git commands here:
Git Cheat Sheet.

How-To: Create a Simple Slideshow Header in Drupal 7

Thursday, May 5th, 2011 by Christian Mattix

UPDATE: Since the posting of this article there has been dramatic improvements by the community and now this is no longer the best way to implement this feature. We now use the “Views Slideshow,” found at: http://drupal.org/project/views_slideshow. We have used this method to create the various slideshows for the City of South Bend at www.SouthBendOn.com.


One of the more common design elements of modern webpage design is a large content area on the landing page of a website. Though there are some Drupal 7 themes that have this feature already (Marinelli comes to mind), what if you want to use a different base theme (like Zen)? In this How-To I will discuss how to create a simple slideshow that can be used in any theme.

The first thing that needs to be done is to ensure that your Drupal 7 environment is set up to support the slideshow. The following Drupal 7 modules need to be installed:

The WYSIWYG module (http://drupal.org/project/wysiwyg) also can be installed to make editing the content easier, but it is not necessary.

Theme “.info” and supporting files

In order to incorporate the slideshow into your theme you will need to reference some external resources in your theme.info file. You will need to add a stylesheet that defines the UI and the JavaScript libraries necessary to make it work. First obtain the following jQuery libraries and place them in the “js” directory of your theme (or other directory that holds the themes external JavaScript files):

  • jquery.cycle.all.min.js
  • jquery.easing.1.3.js

Once you have those files where they need to be, then create a new JavaScript file in the “js” directory. For the purpose of this article, we will name it utility.js. In that file place the following code:

jQuery(document).ready(function() {
	jQuery('.slides').cycle({
		fx: 		'fade',
   		speed:       500, 
    	        timeout:     6000, 
    	        pager:      '.slidenav', 
   		pagerEvent: 'click', 
   		pauseOnPagerHover: true,
		pause:		true
	})
});

Once those files have been placed where they need to go, add the following to your themes “.info” file (assuming the files are in the “js” directory):

scripts[] = js/jquery.cycle.all.min.js
scripts[] = js/jquery.easing.1.3.js
scripts[] = js/utility.js

Now that you have the necessary JavaScript linked, you need to define the visual appearance and structure of the slideshow. The following is in the file slides.css that is located in my theme’s css directory.

@charset "UTF-8";
/* CSS Document */

.slideshow-container {
	height: 340px;
}

.slides {
	width: 970px;
	height: 340px;
	overflow: hidden;
	position: absolute;
	background: white;
}

.slides .slide {
	height: 340px;
}

.sdw-l, .sdw-r {
	background-repeat: no-repeat;
	width: 30px;
	height: 485px;
	position: absolute;
	z-index: 99;
}

.sdw-r {
	background-image: url(../images/sdw-r.png);
	margin: -155px 0 0 978px;
}

.sdw-l {
	background-image: url(../images/sdw-l.png);
	margin: -155px 0 0 -30px;
}

.slides .slide .text {
	float: left;
	width: 450px;
	padding: 10px 15px;
}

.slides .slide .text p {
	line-height: 1.5em;
}

.slides .slide .text p a {
	color: #4a64aa;
	text-decoration: none;
}

.slides .slide .text p a:hover {
	text-decoration: underline;
}

.slides .slide .photo {
	overflow: hidden;
	width: 480px;
	height: 280px;
	text-align: center;
	vertical-align: middle;
	float: right;
}

.slides .slide .photo img {
	margin: 20px auto;
}

.slideshow-container .slidenav {
	position: relative;
	margin: 280px 55px 0 0;
	z-index: 100;
	float: right;
}

.slideshow-container .slidenav a {
	display: block;
	height: 30px;
	width: 30px;
	text-align: center;
	margin: 0 8px;
	float: left;
	background-color: #e5e2df;
	color: #a1988c;
	text-decoration: none;
	line-height: 30px;
}

.slideshow-container .slidenav a:hover {
	background-color: #4a64aa;
	color: white;
}

.slideshow-container .slidenav a.activeSlide {
	color: #4a64aa;
}

.slideshow-container .slidenav a.activeSlide:hover {
	color: white;
}

Of course the colors and other design related items will be changed to match the visual look and feel of the theme that you are creating. Once the CSS file is created and in the necessary directory, the theme needs to be informed of its existence. Simply add the following line to your themes “.info” file.

stylesheets[all][]        = css/slides.css

One last item needs to be added to the themes “.info” file. The region needs to be defined for the location of the slideshow. I have created a region named “slideshow”. To add this add the following in the regions section of the .info file.

regions[slideshow]      = Slideshow

The final structural item that needs to be modified is the page.tpl.php template file. The template needs to be modified to render the slideshow content. Below is a snippet of the template that is necessary. Notice that the only thing necessary to display the slideshow contents in the print render... call for the slideshow region.

Slide Show Content type

Once the structural elements are taken care of now you need to create a “Slide Show Content” content type so that the items can be easily added.

  1. In the “Content Types” section of the Drupal administrative interface create the type. In this type a 3 fields:

    • Title
    • Body Text
    • Slide Image
  2. In the “Manage Display” tab move both “Body Text” and “Slide Image” to be hidden. Also, the comments for this content type should be disabled.
  3. Once you have the content type, you can create a new slide using the “Add Content” links and populating the form fields.

Creating the Slideshow View

Much of the power of this approach comes from the View module. In order to correctly gather the slides that are to be displayed and then render them on the properly a new view needs to be created. In the administrative interface select Structure->Views and create a new view. I named mine “Front Page Slide Show Content”. Do the following to create the view block:

  1. Create a “Block” display for the view
  2. Under Format, select “Unformatted list”
  3. Under Format -> Settings, select “None” for the Grouping Field, and enter “slide” for the Row Class
  4. Under Show->Settings check all “Content: Title”, “Content: Body”, and “Content: Slide Image” as inline fields
  5. In order for the correct XHTML to be generated the output of the fields needs to be added and then modified. User the Views admin UI to add the Title, Body, and Slide Image fields within the “FIELDS” section. Once you have done so make the following changes to the fields.
    • Content: Title=> Under “Rewrite Results,” check the “Rewrite the output” box and use the following in the text:

      [title]

    • Content: Body=>Under “Rewrite Results,” check the “Rewrite the output” box and use the following in the text:

      [body]