Home › Forums › Weaver Xtreme Theme › Photo Blog Justification
- This topic has 20 replies, 3 voices, and was last updated 1 month ago by
scrambler.
-
AuthorPosts
-
January 14, 2021 at 21:46 UTC - Views: 64 #67020
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?
January 14, 2021 at 23:48 UTC - Views: 63 #67022Weaver
KeymasterWould need a link to the site / page in question to have any hope of offering suggestions.
January 15, 2021 at 18:10 UTC - Views: 60 #67032This reply has been marked as private.January 15, 2021 at 20:14 UTC - Views: 61 #67035Weaver
KeymasterI 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.
January 15, 2021 at 20:25 UTC - Views: 52 #67037scrambler
ModeratorThe 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;}
January 16, 2021 at 01:50 UTC - Views: 49 #67038Bburns
ParticipantThe 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
January 16, 2021 at 18:08 UTC - Views: 45 #67047This 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%;}January 17, 2021 at 16:26 UTC - Views: 39 #67054Bburns
ParticipantThis 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.
January 17, 2021 at 17:57 UTC - Views: 38 #67057scrambler
ModeratorChange 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
January 17, 2021 at 20:32 UTC - Views: 31 #67058Bburns
ParticipantI saw a single column image try to fill the first blank space but then disappear.
January 17, 2021 at 22:48 UTC - Views: 28 #67060scrambler
ModeratorI 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
January 18, 2021 at 00:24 UTC - Views: 31 #67062Bburns
ParticipantI 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.
January 18, 2021 at 04:41 UTC - Views: 23 #67065scrambler
ModeratorSomething must be broken then.
I see two style sheets
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
January 18, 2021 at 15:27 UTC - Views: 23 #67068Bburns
ParticipantJetpack 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.
January 18, 2021 at 16:50 UTC - Views: 20 #67070scrambler
ModeratorCan 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.
January 18, 2021 at 22:13 UTC - Views: 20 #67075Bburns
ParticipantThis 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?
-
AuthorPosts
- You must be logged in to reply to this topic.