Home Forums Weaver Xtreme Theme Photo Blog Justification

Topic Resolution: Answered
Viewing 16 posts - 1 through 16 (of 21 total)
  • Author
    Posts
  • #67020
    Answered
    Bburns
    Participant

    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?

    #67022
    Weaver
    Keymaster

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

    #67032
    Private Reply
    Bburns
    Participant
    This reply has been marked as private.
    #67035
    Weaver
    Keymaster

    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.

    #67037
    scrambler
    Moderator

    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;}

    #67038
    Bburns
    Participant

    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

    #67047
    Best Answer
    scrambler
    Moderator

    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%;}

     

    #67054
    Bburns
    Participant

    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.

    #67057
    scrambler
    Moderator

    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

    #67058
    Bburns
    Participant

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

    #67060
    scrambler
    Moderator

    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

    #67062
    Bburns
    Participant

    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.

    #67065
    scrambler
    Moderator

    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

    #67068
    Bburns
    Participant

    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.

    #67070
    scrambler
    Moderator

    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.

    #67075
    Bburns
    Participant

    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?

Viewing 16 posts - 1 through 16 (of 21 total)
  • You must be logged in to reply to this topic.