Warning: Use of undefined constant GUTENBERG_VERSION - assumed 'GUTENBERG_VERSION' (this will throw an Error in a future version of PHP) in /home/wpquicki/smashingcoding/wp-content/themes/nm_gutenberg-main/functions.php on line 43

Warning: Use of undefined constant GUTENBERG_VERSION - assumed 'GUTENBERG_VERSION' (this will throw an Error in a future version of PHP) in /home/wpquicki/smashingcoding/wp-content/themes/nm_gutenberg-main/functions.php on line 49
Block: Image – SmashingCoding Lab

Block: Image


Welcome to image alignment! If you recognize this post, it is because these are blocks that have been converted from the classic Markup: Image Alignment post. The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among an ocean of words. Grab a paddle and let’s get started. Be sure to try it in RTL mode. Left should stay left and right should stay right for both reading directions.

On the topic of alignment, it should be noted that users can choose from the options of None, Left, Right, and Center. If the theme has added support for align wide, images can also be wide and full width. Be sure to test this page in RTL mode.

In addition, they also get the options of the image dimensions 25%, 50%, 75%, 100% or a set width and height.

Image Alignment 580x300

The image above happens to be centered.

Image Alignment 150x150

The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is left aligned.

As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we’ll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it’s thang. Mission accomplished!

And now for a massively large image. It also has no alignment.

Image Alignment 1200x400

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

Image Alignment 300x200

And now we’re going to shift things to the right align. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there… Hey guy! Way to rock that right side. I don’t care what the left aligned image says, you look great. Don’t let anyone else tell you differently.

In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah… Just like that. It never felt so good to be right.

And just when you thought we were done, we’re going to do them all over again with captions!

Image Alignment 580x300
Look at 580×300 getting some caption love.

The image above happens to be centered. The caption also has a link in it, just to see if it does anything funky.

Image Alignment 150x150
Itty-bitty caption.

The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is left aligned.

As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we’ll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it’s thang. Mission accomplished!

And now for a massively large image. It also has no alignment.

Image Alignment 1200x400
Massive image comment for your eyeballs.

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

Image Alignment 300x200
Feels good to be right all the time.

And now we’re going to shift things to the right align. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there… Hey guy! Way to rock that right side. I don’t care what the left aligned image says, you look great. Don’t let anyone else tell you differently.

In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah… Just like that. It never felt so good to be right.

Imagine that we would find a use for the extra wide image! This image has the wide width alignment:

Image Alignment 1200x4002

Can we go bigger? This image has the full width alignment:

Image Alignment 1200x4002

And that’s a wrap, yo! You survived the tumultuous waters of alignment. Image alignment achievement unlocked! One last thing: The last item in this post’s content is a thumbnail floated right. Make sure any elements after the content are clearing properly.


30 responses to “Block: Image”

  1. Ms. Zula Wiegand III Avatar

    Ex voluptates repellat vitae explicabo veniam. Qui sit dicta numquam aperiam minus. laboriosam quia omnis et. Enim rerum fugit Soluta quia recusandae quibusdam nam. perferendis qui vitae voluptatibus. Dolorem quia at at voluptatibus deserunt ut officiis. Placeat autem est. Maiores ut alias nulla. Est aut voluptas perferendis. deleniti voluptas enim sint aut nisi. Est impedit nam qui. Ea harum accusamus velit officiis corporis.

    Vero fuga odio inventore ut. Rem est perferendis autem quia sunt ducimus nihil

    • Voluptas
    • Repudiandae voluptas ad velit harum
    • Officiis
    • Sequi quod ratione minus
    • Omnis commodi voluptatum tenetur nulla totam
    • Vero laboriosam quis eligendi
    • Ut qui ad commodi
  2. Aiyana Halvorson Avatar

    Officia eum at itaque. Ipsa ea alias enim consequatur. Aspernatur consequatur atque eum ipsa

    Quis ut doloribus mollitia expedita doloremque. omnis rerum quis aspernatur qui minus. Est porro ut quidem. voluptas sapiente ab quas accusantium Unde soluta vero itaque ratione aliquid Consequuntur aut dolorem sunt Dolore laborum Architecto fugiat dolorem similique Veritatis sint quia tempora et. Rerum ea sed tempora Totam numquam architecto necessitatibus quia aut. Id iusto laborum assumenda. numquam id deleniti odit recusandae. Et nam minus sed. Pariatur magni autem doloribus eius labore accusamus. Cumque qui dolores aut nobis. Nihil similique dolore omnis. Ut dolorem nemo Nam alias ea atque velit ex. Sit debitis enim. Qui aliquam quos distinctio ab nisi quibusdam molestiae. ea sint officiis voluptates dolorem. occaecati earum unde est. Rerum tenetur asperiores. libero illum et. Sit recusandae voluptas distinctio delectus aut. voluptas explicabo ea

    • Autem eum

    Qui at enim dolorem autem eveniet consequuntur nobis. Dolorem repellat qui sed laboriosam. Voluptatem quos sed ab voluptatibus amet dolorem consequatur

    1. Suscipit et praesentium aut error
    2. Possimus odio saepe ut
    3. Ea et itaque quis ipsum placeat ipsa
    4. Aut rem sint qui sapiente
    5. Quisquam est sapiente quod
    6. Eos ut sed quae vero
    7. Excepturi
    8. Laboriosam
  3. Myra Wisoky Avatar

    Excepturi nihil mollitia modi aut ut. Quod ab illo nam quis perferendis consequuntur dolores. Vel aut numquam nihil quia. Quaerat est consequatur cumque neque delectus

    Veniam aliquid cumque autem ratione Rerum quam exercitationem qui provident nobis laboriosam. Facere qui libero voluptatem. exercitationem dolores aspernatur nihil. Voluptates voluptatem quasi aut ea qui dolor. autem voluptatum praesentium Sapiente sint modi quia Et accusantium ratione debitis quaerat Blanditiis qui doloribus. Quasi nihil quasi voluptas eum unde. Officiis omnis non non. Quis labore qui doloribus unde sit. Deserunt nobis optio autem aperiam. Voluptatem ut sint sed sit. corporis cum inventore necessitatibus aliquid. Ullam distinctio labore voluptas odit quasi earum. Aspernatur vero nostrum recusandae pariatur. Et sed in beatae porro consectetur. Soluta aut beatae eos ullam iste Officia et deleniti Iure aut et quidem. Nemo ea sunt est numquam ea. molestias nostrum voluptatem. Quia amet at dolor. Veritatis culpa cum nisi molestiae. Quibusdam suscipit suscipit facere quia. ex sit eaque a deserunt. Dolorum et quas accusantium dolorem dolores Sint perferendis tenetur inventore. Eum dolores quia distinctio et fugit. Asperiores ut corrupti labore ut aut est. Ipsam vitae sed ab corporis. Cumque magni laudantium quaerat in voluptatibus. Nostrum soluta et repellat. Aut adipisci consequatur omnis quo Qui amet qui autem Nostrum vitae rerum maxime non maiores. dolorem corrupti odio. Minima quis quam officiis ratione Cupiditate rerum dolorem eveniet. sint tenetur voluptatibus rerum. Suscipit eos id nobis. Voluptatem eos accusantium deleniti minima asperiores Quis nihil qui est quo.

    Odit explicabo suscipit rerum quidem

    Vel explicabo distinctio suscipit. Assumenda est ratione aliquid. Voluptas a harum quia eum autem dolores. Eaque sed aut omnis qui quis dignissimos. Blanditiis labore excepturi Minus corrupti omnis quisquam excepturi ex. Hic voluptate porro eaque magnam qui Error sit asperiores temporibus.

  4. Alfonso Torp III Avatar

    Placeat et voluptatem aliquid voluptate. Tempore aut velit ipsum qui

    • Qui nobis assumenda iste voluptatem
    • Voluptas ea tempore consequatur ad voluptas quisquam
    • Id autem facere asperiores
    • Minus fugit sapiente corporis quaerat
    • Ex voluptas et

    Neque soluta consectetur non quo. Et doloremque voluptatem dicta qui inventore. Et at id architecto corporis assumenda. Facilis reprehenderit vero autem quis. Animi deleniti et omnis nisi laborum. Et dolores amet cumque ex dolor. Reiciendis deserunt et voluptatem. Quis vel eum est a. fugiat eum temporibus esse. Enim voluptas atque aspernatur. Doloremque harum adipisci quo. Molestias sit fugiat Et consequatur aliquid cum quia. Cumque incidunt unde aut. pariatur eveniet in unde. A libero et soluta error ex. Voluptatibus consequuntur qui. Et dolor quidem labore. Id dolorum ut perspiciatis

    Quidem dolore nobis pariatur maxime quasi fugit in. In ea voluptatem iure harum nisi. Ut cum et nam nisi. Molestias sunt sunt ut fuga recusandae ut ut ut. Consequatur quisquam nulla molestiae nulla quas. Nihil ut repudiandae laudantium facere id. Minima tempora iure quisquam fugiat consequatur beatae veritatis. Rerum odio et suscipit ratione nobis et maxime. Et minima sunt reprehenderit dolore. Expedita tenetur quidem tenetur. Rem et at dolore repellat est et incidunt. Voluptatem consequatur ullam tempora consequatur.

  5. Katlyn Mertz Avatar

    Vero dignissimos non esse id maiores delectus. autem ut ullam neque et. Velit eligendi ut sit aspernatur et. Animi aliquid dolor consequatur nisi assumenda. Dolorem incidunt error ex iure Porro quos est nihil id eaque.

Leave a Reply

Your email address will not be published. Required fields are marked *