Automattic / blockpatterns

Repo of block patterns to work with
7 stars 2 forks source link

Two Images #116

Open iamtakashi opened 4 years ago

iamtakashi commented 4 years ago

Pattern 122

<!-- wp:spacer {"height":60} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:jetpack/layout-grid {"verticalAlignment":"center","column1DesktopSpan":3,"column1DesktopOffset":2,"column1TabletSpan":4,"column1MobileSpan":4,"column2DesktopSpan":4,"column2DesktopOffset":1,"column2TabletSpan":4,"column2MobileSpan":4,"column3DesktopOffset":5,"className":"column1-desktop-grid__span-3 column1-desktop-grid__start-3 column1-desktop-grid__row-1 column2-desktop-grid__span-4 column2-desktop-grid__start-7 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-3 column1-desktop-grid__start-3 column1-desktop-grid__row-1 column2-desktop-grid__span-4 column2-desktop-grid__start-7 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2 are-vertically-aligned-center"><!-- wp:jetpack/layout-grid-column {"verticalAlignment":"center"} -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none is-vertically-aligned-center"><!-- wp:image {"id":2253,"sizeSlug":"full"} -->
<figure class="wp-block-image size-full"><img src="https://dotcompatterns.files.wordpress.com/2020/09/tandem-x-visuals-3lcbde99p7k-unsplash.jpg" alt="" class="wp-image-2253"/></figure>
<!-- /wp:image --></div>
<!-- /wp:jetpack/layout-grid-column -->

<!-- wp:jetpack/layout-grid-column {"verticalAlignment":"center"} -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none is-vertically-aligned-center"><!-- wp:image {"id":2252,"sizeSlug":"full"} -->
<figure class="wp-block-image size-full"><img src="https://dotcompatterns.files.wordpress.com/2020/09/tandem-x-visuals-do9zvik00-k-unsplash.jpg" alt="" class="wp-image-2252"/></figure>
<!-- /wp:image --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

<!-- wp:spacer {"height":60} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
pablohoneyhoney commented 4 years ago

The larger image could be a bit more abstract, less specific of the place hence more suggestive. Perhaps a different crop or POV.

iamtakashi commented 3 years ago

Just saw the images in Unsplash that have the feeling and the aesthetic that I wanted this pattern to have. I'd like to suggest the use of a couple of images of the same subject but in different times and POV.

two-images

ianstewart commented 3 years ago

The new images here are a bit dark, almost like they have a scrim over them?

iamtakashi commented 3 years ago

dotcompatterns wordpress com__p=2206

How about this? Lighten them up a bit while keeping the natural light photography aesthetic.