Viewing 30 posts - 1 through 30 (of 35 total)
1 2
  • Author
    Posts
  • August 20, 2015 at 12:49 pm #490716
    Sasolini

    Hello,

    I need some help with my site:

    1.) I would like to have the first blog post image stretched too 100%. I want the same effect once you get in to single post (please look at the attached image)
    1.1.) I would also like to remove except and read more button from the first post so it would look like the attacked image.
    2.) I would like to have a gap between masonary blog pictures, but only in the center. I tried few options but I always got gap on the right site as well if i set the gap in the center. (please look at the attached image)
    3.) In Magazine (sidebar) i would like to have a gap between pictures, and also bigger pictures.

    August 22, 2015 at 3:41 am #491658
    Josue

    Hi,

    Can you please create us a WordPress administrator account? post it here as a private reply.

    Regards,
    Josue

    August 22, 2015 at 8:55 pm #491757
    Sasolini

    I manage to figure out how to make gaps between pictures, the rest is still causing trouble to me :)

    August 22, 2015 at 11:08 pm #491768
    Josue

    Hey!

    This code in your Quick CSS is constraining the main image at the top:

    /* BLOG  MAIN PAGE*/

.big-preview.single-big {
padding: 0;
margin-bottom: 10px;
margin-left: 25px;
margin-right: 25px;
}

.content .entry-content-wrapper {
/*padding-right: 25px;*/
margin-left: 25px;
margin-right: 25px;
}

    Best regards,
    Josue

    August 23, 2015 at 4:04 am #491793
    Sasolini

    Hi Josue,

    Thanks for your reply. I tried it and unfortunately it does not work. I actually, as a test, completely remove everything from my Quick CSS and the image still did not stretched to 100% on big screen.

    August 23, 2015 at 4:36 am #491796
    Sasolini

    Hi again :)

    I manage to find a solution for this problem. Simple width: 100% worked.

    I still have a problem with the main container. For some reason i can not stretch it towards sidebar so i would have only 25px white gap.
    And I still need to remove excerpt and read more link from the main page.

    Any ideas?

    August 24, 2015 at 1:56 pm #492191
    Yigit

    Hi!

    It seems like you have figured it out already?
    If you have not, please post a screenshot and show the changes you would like to make.

    Cheers!
    Yigit

    August 24, 2015 at 4:33 pm #492342
    Sasolini

    Hi!

    Unfortunately I still have some problems :(

    1.) The gap on the right side of the main page is still to big. I would like it the same as it is in the side bar 25px.

    2.) I would also like to limit the max height of masonry blog to 275px and I still didn’t figure it out how.

    3.) Magazine pictures (in sidebar) are still to small. I would like them bigger cca 110x150px. I tried to expend the box, but the image get stretched and looks bad. Looks like the image that is loaded is to small.

    Picture attached.

    August 24, 2015 at 7:40 pm #492460
    Josue

    Hey!
    1. Try with this:

    .content .entry-content-wrapper {
    padding-right: 8px;
}

    2. Use the following (change as needed):

    .av-fixed-size .av-masonry-entry .av-inner-masonry-sizer {
    padding-bottom: 50%;
}

    3. Go to Settings > Media and change the thumbnail size, then regenerate your thumbnails.

    Regards,
    Josue

    August 24, 2015 at 10:19 pm #492520
    Sasolini

    Hi,

    This worked great on my main page. But now that I looked at my other pages (about, contact) I have no padding on the side of the main window. Can this be fixed?

    Magazine pictures in the side bar are still 110px even thou original image is bigger. I would like to get the same effect as with the masonry images (full width and cropped from top&bottom). Any idea?

    And thank you for all the support so far!

    August 25, 2015 at 9:29 am #492707
    Josue

    Change the first code to:

    .page-id-4133 .content .entry-content-wrapper {
    padding-right: 8px;
}

    Regarding the sidebar thumbnails, can you post a screenshot/mockup of what would you want to achieve?

    August 25, 2015 at 11:04 am #492786
    Sasolini

    Perfect!

    I attached the mockup of what I want with the sidebar thumbnails. Basically I want pictures to be in more movie format and not square. The idea is to have somewhere max height 110px, max width 230px. The image should not be stretched, but cropped just like in masonry blog.

    One more thing… Masonry blog should start with post no. 2 (now it starts with 1st post, but I already have the first post above it) I was looking for this option but could not found it yet. Any ideas?

    Thank you for such a great support!

    August 26, 2015 at 10:20 am #493395
    Josue

    Ok, but the image size is still a square, you need to change that to something rectangular.

    August 26, 2015 at 1:09 pm #493514
    Sasolini

    Oh, i thought the images will get cropped.

    OK I change the dimensions and not everything looks great on screen resolution at width 1920px, but if I look at it on 1366px, the images get squished together and not cropped as I would prefer. Can this be changed so images do get cropped on smaller screens?

    Any ideas on the “Masonry blog should start with post no. 2 ” problem?

    August 26, 2015 at 6:44 pm #493767
    Sasolini

    One more thing:

    I added this code to my quick CSS:

    .av-fixed-size .av-masonry-entry .av-inner-masonry-sizer {
   padding-bottom: 65%;
   min-height: 360px;
}

    I like the result on my main masonry (av-masonry-1) blog, but would like to limit the min-height of my footer masonry (av-masonry-2) blog to 100px. Any ideas how can I do that?

    August 26, 2015 at 7:02 pm #493771
    Sasolini

    Sorry was a bit to fast. I solved the problem with masonry 1 and 2.

    Image cropping and starting with post 2. is still a problem :(

    August 26, 2015 at 10:49 pm #493831
    Josue

    Remove this from your Quick CSS:

    .av-magazine-thumbnail img {
    height: 110px
}
    August 30, 2015 at 4:36 pm #495481
    Sasolini

    Thank you! This worked great.

    No the only thing that left is offset of masonry blog. I would love to offset it by one post if that’s possible?

    August 31, 2015 at 4:28 pm #495946
    Sasolini

    I notice one more thing. The image is cropped differently in masonry blog the it is in classic blog or magazine. Can this be fixed, so all images are cropped towards center? You will see what i mean if you look at my website at blog post no.1 image.

    September 1, 2015 at 3:52 am #496191
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    .av-masonry-image-container {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

    Cheers! 
    Josue

    September 5, 2015 at 11:58 am #498668
    Sasolini

    Hi,

    I tried your code and it did not work exactly as i need it, but you did point me in the right direction so I manage to fix my problem.

    The only thing bothering me now is that i manage to fix my footer masonry on all my pages (home, about,..), but ob single blog post page I can not fix it. Can you please tell me how can i make it look the same on my single blog post page as it does on my other pages? Thanks!

    September 5, 2015 at 12:05 pm #498671
    Josue

    Hey!

    Can you please post links to what you’re referring to?

    Best regards,
    Josue

    September 7, 2015 at 12:54 pm #499198
    Sasolini

    Hey!

    I want my footer (social) to look the same (same picture sizes, same cropping, … basically a perfect copy) on my blog post pages (L1) as it does on my home page (L2).

    Thanks!

    September 7, 2015 at 11:51 pm #499598
    Josue

    Hey!

    You need to make this code affect the masonry in the post too:

    #msy_footer .av-fixed-size .av-masonry-entry .av-inner-masonry-sizer {
   min-height: 190px;
   padding-bottom: 40%;
}

    Either by setting the msy_footer ID to it or adding a footer ID to the like:

    #msy_footer .av-fixed-size .av-masonry-entry .av-inner-masonry-size, #footer .av-fixed-size .av-masonry-entry .av-inner-masonry-size{
..
}

    Cheers!
    Josue

    September 8, 2015 at 6:28 pm #500057
    Sasolini

    Hey Josue!

    I tried option two but it does not work. Probably a super basic question, but how/where can I change the id of the footer on “post” page? I made quite some changes to the footer and probably best option would be to change the ID of the footer.

    Thanks!

    September 11, 2015 at 4:01 pm #501739
    Sasolini

    Hey Josue,

    I just notice where the problem may be. 

    #av-masonry-1 .av-fixed-size .av-masonry-entry .av-inner-masonry-sizer  {
   padding-bottom: 30%!important;
}

    The code does not target av-masonry-1 at all (it just does not work). So i guess my question is how can i target specific masonry blog with my css?

    September 12, 2015 at 4:12 am #501937
    Ismael

    Hi!

    You can turn on the custom css class field. Refer to this link: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Modify the masonry element, look for the custom css class field. Add “custom-masonry” (without the quotation marks”) for example. You can then use the selector “.custom-masonry” in place of the “#av-masonry-1” selector or whatever it is using you’re using before.

    Cheers!
    Ismael

    September 12, 2015 at 11:40 am #502067
    Sasolini

    Hi,

    I did what you suggested but the element does not get renamed.

    I can not find the link right now, but I read somewhere the if the masonry element is in 1/1 layout element this is a know bug. I guess I will have to find a workaround.

    I still have one question open…how can i start my masonry blog with the second to last post and not last one as it does by default?

    Thanks!

    September 14, 2015 at 6:52 am #502493
    Ismael

    Hi!

    I did what you suggested but the element does not get renamed.

    Can you please provide a link to the actual page? What is the name of the custom css class that you applied?

    I still have one question open…how can i start my masonry blog with the second to last post and not last one as it does by default?

    Please elaborate. It’s kind of confusing.

    Regards,
    Ismael

    September 15, 2015 at 1:54 pm #503339
    Sasolini

    Hi,

    1.) I solved the problem by a workaround. I did not use the custom css class because it does not work for some reason (looks like if masonry blog is in 1/1 element it does not get renamed using custom css). But please consider it done, since I am happy with my workaround.

    2.) What I am talking about is a simple offset by 1 post. This is simply done in a regular blog (there is a feature in your scrip), but I do not know how to do it in masonry blog.

    Warm Regards

  • Author
    Posts
Viewing 30 posts - 1 through 30 (of 35 total)
1 2
  • The topic ‘Blog image size, masonary gap and picture size, …’ is closed to new replies.