Photo Blog Justification

[Bburns]

All of my photo blog page images are currently left justified.  Is there a setting to center images in each column, or possibly scale all images to column width?

[Weaver]

Would need a link to the site / page in question to have any hope of offering suggestions.

[Bburns]

This reply has been marked as private.

[Weaver]

I looked at your page and found a tiny bug in the generated <img> tag for your images, but I don’t think that is changing the formatting or layout.

You may be one of the very very few people using the compact post option for page with posts, so your treading on fairly uncommon ground.

Don’t know if you are adept at CSS or not, but each image has a class called format-image-img added to the <img> html. I’m a bit backed up now, but perhaps @scrambler has some ideas on creating a custom .format-image-img CSS rule.

I will post an update for Weaver Xtreme soon to the eliminate the bug in the generated <img> tag, but I don’t think that will change any behavior as I’m pretty sure that most browsers will simply ignore the problem.

But – getting many images with different aspect ratios to all fill the same space is not realistic. But it might be possible to get them all to occupy the same space with different white space padding.

[scrambler]

The page is using Masonry to display the images.

You can center the images in their respective masonry columns by adding the rule below to the Theme Global Custom CSS Rule box

.masonry-brick {text-align:center;}

[Bburns]

The images look much better centered, Thank you

I checked “For Masonry multi-columns: make this post span two columns” on one of the posts / post/blog archive options.  This centered the image over two columns with blank space on each side.  Is it possible to upscale the image to the width of two columns?  Creating a collage effect

[scrambler]

This reply has been accepted as the best answer.

Adding the rules below to the same place should do that

.is-mobile .blog-post-cols-4-span-2 {width:100%;margin-right:0;margin-left:0;}
.blog-post-cols-4-span-2 {width:50%;margin-right:0;margin-left:0;}
.format-image-compact .entry-content img {width:100%;}

 

[Bburns]

This appeared to work until I viewed the following day

It appears now that all images are now spanning two columns.

The posts where I checked per post option “For Masonry multi-columns: make this post span two columns” look good.  Unchecked per post option added white space to the right where another small image should display.

[scrambler]

Change the last rule to

.blog-post-cols-4-span-2 .format-image-compact .entry-content img {width:100%;}

That should limit the width 100% to the span images

Clear cache and check again

[Bburns]

I saw a single column image try to fill the first blank space but then disappear.

[scrambler]

I am not sure what is going on right now.

Please remove all the custom CSS added for this and post back so I can start from scratch

[Bburns]

I removed all custom CSS.  Cleared my browser cache and reloaded the commissions page.  All images are showing single column, even the images where I checked per post option “For Masonry multi-columns: make this post span two columns”, and only in the first and third columns now.

[scrambler]

Something must be broken then.

I see two style sheets

Commissions

https://naturallyvibrantart.com/wp-content/themes/weaver-xtreme/assets/css/style-weaverx.min.css?ver=4.4.4

I am not sure why that is, may be @weaver will have some suggestions.

Are you using any plugin that does CSS optimization (like the jetpack options or other)?

If so, you need to deactivate that as they usually break the them CSS

[Bburns]

Jetpack was included in a WooCommerce bundled add on.  I promptly removed it as I have had problems before with Jetpack.

My current Plug-ins  include:

• Classic Editor
• CMP Coming Soon & Maintenance Editor
• Contact Form 7
• Updraft Plus Backup / Restore
• Weaver Xtreme Theme Support
• WooCommerce
• WooCommerce PayPal Pro
• Wordfence Security

Thanks again, I really appreciate the help.

[scrambler]

Can you paste here all the custom CSS you put in the custom CSS rule box and or the page CSS box.

Clearly you must have changed something for it now not working.

If you are using a cache or cache service, clear that

You may also want to create a new page from scratch with just 4 masonry columns and see if that works.

There may also be a problem with the span across  column, as it seems everything started failing when you added many of them. I would remove all the span and see if masonry works again, then add a single span and see if that works, if it does add one more at a time testing in between and see if at one point it causes column 2 and 4 to become empty again.

[Bburns]

This is the css that was added, then removed as requested. (No custom css currently included)

.is-mobile .blog-post-cols-4-span-2 {width:100%;margin-right:0;margin-left:0;}
.blog-post-cols-4-span-2 {width:50%;margin-right:0;margin-left:0;}
.blog-post-cols-4-span-2 .format-image-compact .entry-content img {width:100%;}

Without the custom css:

Images are showing in 4 columns again.  All images default to left aligned again.

Could these problems be due to the different dimensions of each image?

[Author]

Posts