Conditionally load similar content blocks based on screen size

archived đź—„
1

Trying to keep the DOM DRY, does Roots provide a server-side function for calling content depending on screen size? Applying Bootstrap’s hidden-xs and visible-xs classes are not optimal since both blocks of content will be loaded into the DOM. Using <div class="hidden-xs">…</div>, for example, sets the element to display:none. However, the content is still loaded regardless. And from my understanding, applying visibility:hidden isn’t effective either.

Here’s what I want to happen—

If small screen display this block using Bootstrap’s media object:

<div class="col-lg-12">
<div class="media">
<div class="pull-left">[wp thumbnail attachment]</div>
<div class="media-body">
<h4 class="media-heading">[wp post title]</h4>
[wp excerpt]
</div>
</div>
</div>

Else if large screen load this block instead:

<div class="col-sm-3">
<div class="panel">
[wp medium attachment]
<h4>[wp post title]</h4>
[wp content]
</div>
</div>

If I sound confusing, read this thread from css-tricks.com

2

We don’t have anything like this built-in to Roots. It would be a project in and of itself, and is certainly beyond the scope of a starter theme.

A PHP solution is a bad idea. It would need javascript/jQuery to get the viewport/screen size anyway, and a server side solution would prevent caching.

3

You can accomplish your goal with one content block using LESS if you omit the Bootstrap classes from your markup. The only thing you can’t do is change the thumbnail size so you would need to load both and hide one at each breakpoint. Although if you’re loading both you’re probably better off just loading the larger one and scaling its size down at the lower breakpoint.

4

Thanks for the feedback! I wasn’t sure if it could be accomplished, in general. But, sacrificing caching isn’t up for debate, so I’ll repurpose my styles or use Bootstrap’s visible-* and/or hidden-* classes on 2 different content blocks.

5

If you keep the Bootstrap classes in your markup then you will end up repeating yourself. LESS will do what you need without the need for repetitive markup.

6

PHP solutions would sacrifice caching.

The Javascript techniques could still benefit from it:

  • Create a cacheable PHP partial for each breakpoint.
  • Load the correct partial via AJAX, depending on the viewport/device.

Foundation has this inbuilt with Interchange, so I suppose it’s possible that Bootstrap may follow suit one day.

7

Something like this should be pretty close to what you mentioned in your OP:

HTML:

<div class="content-column">
  <div class="content-container">
    <div class="content-image"><?php echo wp_get_attachment_image($id, 'medium'); ?></div>
    <div class="content-body">
      <h4 class="content-heading">[wp post title]</h4>
      <span class="content-excerpt">[wp excerpt]</span>
      <span class="content-post">[wp content]</span>
    </div>
  </div>
</div>

LESS:

.content-column {
	.make-sm-column(12);
	.make-lg-column(3);
}
.content-image {
	&:extend(.media > .pull-left);
}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
	.content-container {
		.media;
	}
	.content-image {
		.pull-left;
	}
	.content-body {
		.media-body;
	}
	.content-heading {
		.media-heading;
	}
	.content-post {
		.hidden;
	}
}
@media (min-width: @screen-lg-min) {
	.content-container {
		.panel;
	}
	.content-excerpt {
		.hidden;
	}
	.content-image {
		margin-right: 0;
	}
}

You then just need to size the image according to your requirements.

8

Thanks again for the terrific feedback. They’re both great suggestions in their own right.

@Foxaii As I’m familiar with Foundation, I was hoping Bootstrap would include something like Foundation’s Interchange.
I’ll have to revisit loading partials via ajax based on breakpoint.

@cfx You’re a step ahead of me. The thought hadn’t crossed my mind. I’m so caught up on utilizing Bootstrap class names because I’m thinking about the person who will we managing this site that I forget to think for myself.
I use Bootstrap Sass. Since Bootstrap’s docs are entirely written in Less, I’ll have to look at the variables and mixins more closely.