There are two common ways to display NationBuilder blog post images on other pages of your NationBuilder website.

In my first example, our Recent news section needs to show an image from the post in the left column, and the title/excerpt in the right column.

nationbuilder blog, nationbuilder image attachment, nationbuilder featured image, blog post image, nationbuilder post image, nationbuilder images from blog

In this situation, we need to call the post’s image separately from the excerpt and title. To do this, I added the following code to my “_blog_latest.html” file (if you’re confused about this, please reference the NationBuilder documentation here for showing content from one page on another).

 <div class="col-md-5 col-small-12">
     {% for attachment in post.attachments limit:1 %}  
          <img src= "{{attachment.url}}">
{% endfor %}          
  </div>

The above code will tell NationBuilder to find the post’s attached image (this is key) and display it in the left column. To attach an image to a post, you need to upload the image as a File in the post’s Dashboard, thereby attaching it to the post. Simply adding the image into the body of the post will not work!

The second example is much easier. In this design, the website’s blog landing page needs a design where an image from the body of the blog post will appear above the excerpt. To accomplish this, we need to upload our image to the “Files” section and then add the image to the “Before the Fold” section of the post’s content. Below is the code you’ll need for this to work.

nationbuilder blog landing page, images to blog page, featured images nationbuilder, nationbuilder attached images

<div class="page-excerpt padbottom" id="blog-post-page-{{ post.id }}">
      <h3><a href="{{ post.url }}">{{ post.headline }}</a></h3>
      <div class="excerpt">
        {{ post.blog_post.content }}
      </div>
      {% if post.blog_post.is_extended? %}
        <span class='read-more'><a href='{{ post.url }}'>Read more</a></span>
        {% endif %} 
    <hr/>
    {% endfor %}
  </div>

Notice the difference. Instead of calling the separate blog.attachment, we’re instead just pulling the excerpt content, which will include the image since it’s above the fold.

<div class="excerpt">
        {{ post.blog_post.content }}
      </div>

As a Certified NationBuilder Architect, one of the most common requests I hear from my NationBuilder clients is, “Can I integrate NationBuilder with WordPress?” The answer is absolutely yes, you can.

While NationBuilder and WordPress are two different softwares, there are a variety of reasons why anyone would want to use them together:

  • You have a brand new website on WordPress and don’t have the budget to move it all over to NationBuilder;
  • You’re interested in the tools and functionality offered by NationBuilder, but want to use WordPress as your CMS and front end;
  • You want to try NationBuilder out, but aren’t ready to commit to migrating everything over just yet.

Using the NationBuilder API

I recently worked on a client website where myself and a Certified NationBuilder Developer hooked forms on a client’s WordPress website up to their NationBuilder account. These forms were used to register new users, and to leave feedback. Once a user filled out the form, our application sent the form data over to the client’s NationBuilder account.

nationbuilder, nationbuilder wordpress, nationbuilder and wordpress, nationbuilder worpress api, nationbuilder api, hook nationbuilder to wordpress, nationbuilder with wordpress
A form on a WordPress website that is linked to a NationBuilder environment using the API

 

nationbuilder, nationbuilder wordpress, nationbuilder with wordpress, nationbuilder and wordpress, nationbuilder worpress api, nationbuilder api, hook nationbuilder to wordpress
The form information was submitted successfully to the NationBuilder environment.

Without having to migrate their entire WordPress website over to NationBuilder, we allowed the client to easily collect data into their NationBuilder environment.

We threw this design together last week for a client’s website, and I thought I’d share it here. It uses CSS3 Keyframes to animate the background color, and we added some jQuery from CountUp.js to animate the numbers counting up.

Take a look at the code below and feel free to copy and use in your own projects.

See the Pen Keyframes and CountUp by Design4 Marketing (@Design4) on CodePen.

I’ve had several people ask me how I got involved in web design and development. If you’d told me 2-3 years ago that I’d be developing websites full-time, I would have laughed. It would have been even funnier if you’d asked me what HTML, PHP, or JavaScript was. Web design and development was the furthest thing from my mind.

The truth is, most of it was by accident. I have no formal training in web design or development. My degree is in Political Science, and my experience was all in campaigns or public policy. Like most poli-sci grads, my plan was to go to law school. I even went as far as structuring my classes around pre-law, studying for the LSAT, and interning one summer at a law firm.

But I decided against law school. Instead I took two internships: One with a public policy organization in Washington, DC and later one at my dad’s advertising agency. While I was offered the opportunity to stay in DC and really enjoyed what I was doing, I never felt comfortable enough to commit full-time.

The Beginning

My internship with Design4 Marketing was helpful in getting me where I am today. It exposed me to various aspects of marketing, including ad buying, digital/social media tools, graphic design, and web development. I eventually gravitated towards development as it was a better fit.

When our in-house web developer left in 2013, Design4 had little website work. At the time I was mainly do administrative and support tasks. We had several websites we built (I use that term loosely, as we mainly just re-purposes WordPress themes).

In the fall of 2013, I joined Design4 full-time as the “Digital Communications Manager”. I was responsible for web/social media/digital advertising. My web development consisted of WordPress themes and changing fonts and colors. But it piqued my interest and gave me a desire to learn more about web

In January of  2014, my VP of Marketing and I made plans to aggressively pursue web work. In 2013, we had completed 3-4 websites. Our goal was to double that number. We also set goals of fully designing our own websites, and significantly lowering the amount of outside help we hired.

This was an ambitious plan for someone whose knowledge of web development was 0. I set my own personal goals, wanting to learn HTML and CSS and to gain a better understanding of best practices for the web.

To accomplish this I took various classes online and read several reference books. Both Thinkful and Udemy were helpful, and Jon Duckett’s HTML/CSS book gave me the basics. But nothing replaced building websites, even when they consisted of black headlines and paragraphs on a white background.

Breaking Lots of Things

Real growth requires making mistakes. In my case, that meant lots of mistakes, often on client websites. Not having another developer on staff meant I was learning on my own. I can’t even count the number of websites I broke, not to mention the horrible code and poor design. But it was all part of the process I had to undergo in order to get better.

The embarrassment and frustration I felt from my mistakes was nothing compared to the immense pride I felt about launching my first website. It was a simple 3-4 page website for a client, but knowing that I had coded it was a great feeling.

Where I am Now

I’m still a newbie. I have a huge problem calling myself a developer when I have little training and still don’t know JavaScript, MVC development, or backend languages very well. In many ways I feel like a fraud. I’ve started taking classes on JavaScript, because I’ve hit the ceiling personally and professionally on where I can go without understanding that language.

Where I want to Be

By the end of 2015, my goal is to be proficient in JavaScript. From there I want to learn frameworks like AngularJS, React, Ember, and Meteor to build full web applications with the goal of becoming a full stack web developer in the near future.

Lessons

The more I learn the more I realize how little I know. I’m still very much a beginner, but if you’re brand new to web development, here are a few pointers I hope guide your learning.

1.) Books are helpful, but nothing replaces practice. If you’re learning a new concept be sure to code it in real life.

2.) Don’t be embarrassed to ask questions. You will very quickly realize that many developers don’t have it all together. We all visit forums on a daily basis to get help. Yes, some people will laugh at you or get frustrated. That is their problem, not yours.

3.) Learn the fundamentals of good design. This is a little harder because you’ll probably have to search out this opportunity. I was lucky because my wife is a designer. But as a front end web developer most of your jobs will be taking designs and coding them onto a webpage. I’ve sent multiple developers PSDs only to get back a website that doesn’t match the design. Learning to understand things like letter spacing, font sizing, spacing, etc. and how that fits into good design is going to make you a valuable asset to any development team.

4.) Challenge yourself constantly. If you’re living, you’re learning. And the best way to learn is to push yourself. When I first started developing, everything was a massive challenge. I never remembered code, I was constantly looking up basic things like how to capitalize all the letters in a word or how to position elements correctly. It was all uphill. But I eventually got to a place of understanding the basics well enough that I could put together websites pretty quickly. That only happened because I kept pushing myself to learn more.

5.) Help other people. I hope this blog becomes a resource for you. I plan on writing regularly about what I’m learning and what I’m doing in my job. I freelance on the side, and I frequently work with companies whose staff need help understanding the basics. It’s been a great tool for me to pass along the knowledge I do have about design and development.

Everyone starts somewhere. I hope this helps you, and if it does please leave me a comment below!