Author: James Mathias

Share Your Knowledge!

This fast-growing section of our site is the new one-stop shop for educational materials for ExpressionEngine with rich and expert content, from both EllisLab and the community. Submit your article, tip, or solution today!

Here’s a quick tip for creating a equal sized image grid in HTML and CSS. There are two legit ways to accomplish this pattern, and both ways use the same HTML. I’ve limited the output to eight items for example purposes, but this technique will theoretically work for infinity items.

This gives us a single column stack, that expands to two columns, then three and finally four columns at max width. You can adjust the math to work however you like, but I’ve found this to be pretty universally useful, and visually pleasing at all breakpoints.

As you can see the code isn’t much different, just another way to accomplish it. The upside of display: flex is that you don’t need to use floats, or float clearing methods. Additionally, you can have flex box do the math for you and display incomplete rows with larger images. You just need to change flex: 0 1 100%; to flex: 1 0 100%;.

We use an array indexing numbering scheme, so the first tab is t-0, then t-1 and so on. tab-open indicates the default, open tab. You can move this to any tab-content, but only one tab-content may be chosen at a time. As you can see in the tabs each is assigned a rel= that matches the tab-content it should open and close.

Now we’re going to need some light styles to give this a tabbed look. First we need a tab CSS object.

If you want quick, easy to maintain, and consistent pagination across your site or application, DRY (Don’t Repeat Yourself) is a great way to accomplish this. in ExpressionEngine you can create DRY pagination in a few simple steps.

First you’ll need a Template Partial. I like to name this par-paginate-links.

Occasionally you have some information that is needed, but not the most important, and you may want to hide it away, and let the visitor decide when they want to see it. So you toggle that content! Here’s a simple and fast way to add this functionality to your website, it’s reusable and can appear multiple times in a single HTML document.

The important bit to remember here is that the values of data-rel and data-rev need to match, and need to be unique from any other pairs in the same HTML document.

The value of data-close determines what the link’s text will be when the content is visible. And the value of data-open determines the text when the content is hidden. The text in the link should match the value of data-open.

Single entry permalink URLs are common on the web. We’re going to apply it to a blog here, as that’s readily understood, but the pattern will work for everything else as well.

By default ExpressionEngine’s URLs work like this https://example.com/blog/entry/url-title, where “blog” is a template group, and “entry” is a template, which is fine. But nicer would be something like https://example.com/blog/url-title, cause who needs that extra entry segment anyway? You could handle all of this in the blog template group’s index, but that’s inelegant, full of conditionals, hard to read, and hard to maintain.

Template Routes give us an easy to create and maintain implementation. What you’ll need is the following. A blog template group with the templates index and single-entry.

Inside of index you’ll put your blog listing, this will cover paginated archives, and categorized listings as well—URLs like https://example.com/blog/P15 and https://example.com/blog/category/cat-url-title.

See that route= variable above? It’ll come into play in a moment. Next you’ll need a single-entry template that will cover your, well, single entries. And will be reached with URLs like https://example.com/blog/url-title.

Now that you have those set up, you need to add your route. Go to Developer > Template Manager > Template Routes and set up a route for the template single-entry Give it a Route of /blog/{url_title:regex[(((?!(P\d+|category\/)).)+?)]} select “no” for “Segments Required?” then save. The regex may look a little complex, so let’s break it down. (((?!(P\d+|category\/)).)+?) uses a negative lookahead assertion, so the route does not match if the second URL segment is either pagination (P\d+) or category/. We want those URL patterns to still use the ExpressionEngine default routing to the blog/index template.

Now in your templates replace any path variables to your single-entry URLs to use the route= variable in the first code sample. This will make sure that when clicked the visitor is sent to the right place!

Username

Password

Email Address

Used to log in

Display Name

Password

By registering, you agree to our terms of service, including receiving some tips and offers from us from time to time. We never spam, and we never share your email address with third parties. Terms of ServicePrivacy Policy