Learn

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!

  • Image Grid

    in: Front-end Development, Tips

    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.

    <div class="collection">
    	<ul class="img-grid">
    		<li>
    			<figure>
    				<img src="https://expressionengine.com/asset/img/learn/example.png">
    			</figure>
    		</li>
    		<li>
    			<figure>
    				<img src="https://expressionengine.com/asset/img/learn/example.png">
    			</figure>
    		</li>
    		<li>
    			<figure>
    				<img src="https://expressionengine.com/asset/img/learn/example.png">
    			</figure>
    		</li>
    		<li>
    			<figure>
    				<img src="https://expressionengine.com/asset/img/learn/example.png">
    			</figure>
    		</li>
    		<li>
    			<figure>
    				<img src="https://expressionengine.com/asset/img/learn/example.png">
    			</figure>
    		</li>
    		<li>
    			<figure>
    				<img src="https://expressionengine.com/asset/img/learn/example.png">
    			</figure>
    		</li>
    		<li>
    			<figure>
    				<img src="https://expressionengine.com/asset/img/learn/example.png">
    			</figure>
    		</li>
    		<li>
    			<figure>
    				<img src="https://expressionengine.com/asset/img/learn/example.png">
    			</figure>
    		</li>
    	</ul>
    </div>

    I’ve used a div.collection as a wrapper which is unnecessary for this example, but is a good practice. Allowing you to have multiple grids in a single HTML document that can be targeted individually.

    I’m a big proponent of ITCSS, and an object oriented approach to CSS. Here is the object LESS for this grid.

    .img-grid{
    	list-style-type: none;
    	margin: 0;
    
    		li{
    			margin-bottom: 20px;
    		}
    
    		figure{
    			margin: 0;
    
    				img{
    					max-width: 100%;
    				}
    		}
    }
    
    // responsibility
    @media screen and (min-width: 414px){
    	.img-grid{
    		margin: 0 -10px;
    		overflow: hidden;
    
    			li{
    				box-sizing: border-box;
    				float: left;
    				padding: 0 10px;
    				width: 50%;
    			}
    	}
    }
    
    @media screen and (min-width: 750px){
    	.img-grid{
    		li{
    			width: 33.33%;
    		}
    	}
    }
    
    @media screen and (min-width: 1200px){
    	.img-grid{
    		li{
    			width: 25%;
    		}
    	}
    }

    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.

    You can demo and play with this code here: https://jsfiddle.net/jmathias/6kbjw0ft/

    But this is old school code I hear you cry! Well, sure, I suppose. If you prefer cutting edge you can accomplish the same exact grid with this flex-box code instead.

    .img-grid-flex{
    	display: flex;
    	flex-wrap: wrap;
    	list-style-type: none;
    	margin: 0;
    
    		li{
    			box-sizing: border-box;
    			// grow shrink basis
    			flex: 0 1 100%;
    			// allows incomplete rows to grow as needed.
    			// flex: 1 0 100%;
    			margin-bottom: 20px;
    		}
    
    		figure{
    			margin: 0;
    
    				img{
    					max-width: 100%;
    				}
    		}
    }
    
    // responsibility
    @media screen and (min-width: 414px){
    	.img-grid-flex{
    		margin: 0 -10px;
    
    			li{
    				flex-basis: 50%;
    				padding: 0 10px;
    			}
    	}
    }
    
    @media screen and (min-width: 750px){
    	.img-grid-flex{
    		li{
    			flex-basis: 33.33%;
    		}
    	}
    }
    
    @media screen and (min-width: 1200px){
    	.img-grid-flex{
    		li{
    			flex-basis: 25%;
    		}
    	}
    }

    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%;.

    You can demo and play with this code here: https://jsfiddle.net/jmathias/ox70d053/

    So there you have it. A nice simple Image grid you can use on your ExpressionEngine CMS site today!

    | Read in 4 minutes
  • DRY Pagination

    in: Tips, Templating

    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.

    {paginate}
    	{pagination_links page_padding='1'}
    		<div class="pagination">
    			<ul>
    				{first_page}
    					<li class="pg-first"><a href="{pagination_url}"><span>first</span></a></li>
    				{/first_page}
    				{previous_page}
    					<li class="pg-prev"><a href="{pagination_url}"><span>prev</span></a></li>
    				{/previous_page}
    				{page}
    					<li><a href="{pagination_url}"{if current_page} class="act"{/if}>{pagination_page_number}</a></li>
    				{/page}
    				{next_page}
    					<li class="pg-next"><a href="{pagination_url}"><span>next</span></a></li>
    				{/next_page}
    				{last_page}
    					<li class="pg-last"><a href="{pagination_url}"><span>last</span></a></li>
    				{/last_page}
    			</ul>
    		</div>
    	{/pagination_links}
    {/paginate}

    This partial covers paginated links, you can adjust the output to your personal needs, but this is your basic “first, previous, 1, 2, 3, next, last” pattern.

    Now that you have this, all you need to do is call it into the exp:channel:entries tags you want to paginate.

    Something like this,

    {exp:channel:entries channel='blog' limit='10'}
    	HTML Output...
    	{if no_results}
    		{redirect='404'}
    	{/if}
    	{par-paginate-links}
    {/exp:channel:entries}

    And there you have, a clean, fast and simple way to make your websites more maintainable with ExpressionEngine.

    | Read in 2 minutes
  • Responsive Videos

    in: Front-end Development, Tips

    We all LOVE videos! But they can be a real difficult thing to do responsively. So here is some code to help you make videos responsive in your next ExpressionEngine CMS site.

    The HTML

    <figure class="video">
    	<div class="video-player">
    		<iframe src="//player.vimeo.com/video/39394380?color=f0a400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    	</div>
    	<figcaption><a href="http://leihu.com">James Mathias</a> &mdash; Made By Few</figcaption>
    </figure>

    I use a figure, so that I can add a caption, the important part is the div.video-player around the iframe. Here I use a class of .video on the figure as a best practice for potential CSS targeting.

    Speaking of CSS, here is the LESS object.

    .video-player{
    	height: 0;
    	overflow: hidden;
    	padding-bottom: 56.25%; /* 16/9 ratio */
    	padding-top: 30px; /* IE6 workaround */
    	position: relative;
    
    		// set dimensions and position of elements inside .video-player
    		embed, iframe, img, object, video{
    			height: 100%;
    			left: 0;
    			position: absolute;
    			top: 0;
    			width: 100%;
    		}
    }

    That’s all you need. Remember don’t put a width or height attribute on the iframe, the browser will do this math for you!

    You can demo and play with this code here: https://jsfiddle.net/jmathias/g7mwrmxw/

    Now go fill your ExpressionEngine CMS sites with videos, to the brim!

    | Read in 2 minutes
  • Toggling Content

    in: Front-end Development, Tips

    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.

    Let’s start with the JavaScript. I used jQuery.

    $(function(){
    
    	$('.toggle-link').on('click',function(e){
    		var txtIs = $(this).attr('data-open');
    		var hideIs = $(this).attr('data-close');
    		var objIs = $(this).attr('data-rel');
    		var toggleObj = $('[data-rev='+objIs+']');
    
    		if($.trim($(this).text()) === txtIs){
    			$(this).text(hideIs);
    		}
    		else{
    			$(this).text(txtIs);
    		}
    
    		toggleObj.toggleClass('toggle-open');
    
    		// stop THIS href from loading
    		// in the source window
    		e.preventDefault();
    	});
    
    }); // close (document).ready

    This will listen for .toggle-link clicks and then open and close (toggle) the proper .toggle-content for you.

    Here is the HTML

    <h1>Content Header <a href="#" class="toggle-link" data-rel="toggle-test" data-close="Hide" data-open="Show">Show</a></h1>
    <div class="toggle-content" data-rev="toggle-test">
    	<p>This content is hidden, until the toggle-link is clicked.</p>
    </div>

    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.

    And lastly, just a little CSS to get our open and closed states.

    .toggle-content{
    	display: none;
    }
    
    .toggle-open{
    	display: block;
    }

    You can demo and play with this code here: https://jsfiddle.net/jmathias/bqf3ht3y/

    So there you have it another tool for your next ExpressionEngine CMS site.

    | Read in 2 minutes
.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases