- Of the normal
- WordPress Blocks, like this list block.
- If the block starts on col 1-6 it starts on col 1 to left justify it.
- If it starts on 7-12 it starts on col 3 to justify right.
- Narrow images, 2-6 col wide, will be 3 columns wide (50% width).
- Wide images, 7-12 col wide, will be 6 col wide (100% width).
- But, if the image is only 1 col wide, it will just stay that way.
This is an example of text at the top of a case study. This uses the normal text box and formatting within the WordPress editor.
You can use headers:
1000% Specific Block Examples
These are accessible by pressing the “add block” “+” icon in the editor, all are under the 1000% Blocks header at the bottom of the list.
Structured Content Row
This block allows for one to three images that will fill the full width of the page and remain the same height. The images will never be cropped. If you place one image in this block it will be full width.
Mobile use: this will stack images when viewed on mobile.
Grid Content Row
This is the most powerful block, but takes some mental math. This row places images on a 12 column grid. You can start images at any point on the 12 columns, and you can specify the width. This lets you place images in a “freeform” layout, but with a high degree of control. The width includes the column you start at so the maximum number you can have between the two numbers is 13.
For example, this image starts on column 10, and is 3 columns wide:
And, this image starts on column 6 and is 6 columns wide.
You can include many images on a single row. In this example we have 2 images that are 2 columns wide, and one that is 5. The last image starts on column 8, so we have a gap in the unused 7th column. We have used the align dropdown to align the images with the bottom of the row.
Mobile use: Short story, if you have added BOTH a start column and width, it will dial down those numbers to get the “essence” of your placement. if you don’t set a start column it will use the image width you set and attempt to group the images where viable, so you can still get two images on a row this way.
While it uses a 12 column grid on big screens, it uses 6 on small screens, so we approximate the placement with the following rules:
We’ll tweak this as we go, but for now if both the width and start col are set, it will display the image on mobile devices with the same general layout you provided (eg, left and small, or big and right).
Fluid Content Row
Without further input this works similarly to the Structured Content Row where 1-3 images will fill the width of the page, but it will not contain them to the same height. Example:
You can also set widths to the items and add spacers to perform some difficult placement situations and otherwise force things to work when they wouldn’t otherwise. In the following example we set the first image to 20% width, the second to 50%, and the third to 30% to adjust the aspect ratios that each appear in.
We can also use spacers to get a similar effect to the Grid Content Row. This is a 50% spacer, and a 50% image. There is not really a reason to use this over a Grid Content Row, but since it does not follow a grid, this can be used to make all sorts of weird layouts that might not be possible with the grid.
Mobile use: You can choose if you want the images to stack or not. If stacking is turned off it just sizes the layout down exactly how it is on desktop down to mobile. This can totally make some tiny images.
It’s a normal slider. Easy to use. It works. Images don’t need to be the same aspect ratio. You can select a bunch at the same time to add them.
Pretty straightforward. Makes this:
Content goes here. To answer the most important question facing mankind in the modern world—why are humans compelled to push their physical, spiritual and emotional limitations without causation, especially in the context of endeavors, sports and activities commonly referred to as Type 2 or “Latent Fun™?—we made an award winning feature-length pseudo scientific documentary about Dirty Kanza; a 200-mile long gravel race through the Flint Hills of Nebraska, and the World’s premier “sucks” event. Project Y features Subject Athletes, a gravel simulation room, a Neuroscientist, a Rabbi and a handful of TIME TO BEAT. Tarot cards were read. Aura photographs were taken. Tires were flatted. Insights were gleaned. Profound conclusions were arrived at.
How to link to other case studies from pages, case studies, etc. You select the project and it builds the rest.
Overlay text can be placed on images with left/right and offset options as well as color options.
More than images!
Fluid and grid content rows above can accommodate text, images, video and HTML. You’ll need to set a width to use them, though.
This is a text box in a grid content row. It’s 4 columns wide. It’s broken right now but will work once I fix it. 😐
What about simple stuff?
Like one full width image? This is the same image positioned using different blocks. The differences are only due to the size of the image.