Home Forums Weaver Xtreme Theme Will Weaver Xtreme Do This? (posts show with excerpts that pop up)

This topic contains 61 replies, has 3 voices, and was last updated by  Leigh2018 5 months, 2 weeks ago.

Viewing 16 posts - 1 through 16 (of 62 total)
  • Author
    Posts
  • #58475

    Leigh2018
    Participant

    I am not even sure how to ask this question to even search for it… so I’m sorry if it is in this forum somewhere and I am missing it.

    I am building a site for someone and they would like their site to have the posts show up with images and excerpts that “pop up” over the images. I believe they have used a Masonry affect, but it’s the “pop up” that she likes of the excerpt from the posts.

    I imagine that is a plugin or proprietary app, and I do NOT want to change from Weaver Xtreme (still loving it!). She is supportive of using Weaver Xtreme. Just curious if Weaver Show Posts or Weaver Slider Posts is able to do that? Or some other way?

    Here is a link to exactly what she is talking about. It’s just under the top menu…. https://coldcasechristianity.com

    If there is a way to do it with Weaver Xtreme, I’d love to know too, since I’d like to do it for my own site. 🙂

    Thanks for any help in advance.

     

     

    #58476

    Weaver
    Keymaster

    That sort of effect requires significant custom programming. The site you referenced is totally custom Javascript. There isn’t even any HTML in its source page – totally dynamic Javasript.

    But I don’t know of any theme that does that. It is possible there are widgets for one of the page biulder plugins.

    #58478

    scrambler
    Moderator

    Let me give it a shot with CSS tomorrow and I will let you know

    #58480

    Leigh2018
    Participant

    Thank you Weaver. That is what I was thinking. I think I saw a free WordPress.com have a “similar” feature one time, believe it or not. Was shocked!

    #58481

    Leigh2018
    Participant

    Scrambler, you are always going way above and beyond for us on here!  You deserve a raise! Thanks for even attempting to figure out a work around. If not possible, I totally understand and will still sing your praises. 🙂

    #58483

    scrambler
    Moderator

    What can I say, I am a sucker for interesting challenges 🙂

    Here is something that seems to work, but may prove hard to make fully responsive.

    If you can give it a shot, we can see if we can tune it.

    Prerequisites:

    • Set the Blog featured image position to above title, centered and full size
    • Hide comment bubble and meta info lines
    • Make sure all Excerpts have the same length
    • Set paddings and bottom margin on post areas to zero

    Add the CSS below to the CSS rule box

    • first 2 rules are position reference settings
    • next two are the base positions and transition speeds
    • last two are the hover positions
    .wvrx-posts .entry-header {position:relative;}
    .wvrx-posts .post-area {margin-bottom:0;position:relative;}
    .wvrx-posts .post-title {position:absolute;bottom:20%;left:20px;transition:bottom 1s;}
    .wvrx-posts .entry-summary {position:absolute;top:95%;left:20px;transition:top 1s;width:95%;}
    .wvrx-posts .post-area:hover .post-title {bottom:50%;}
    .wvrx-posts .post-area:hover .entry-summary {top:50%;}

     

     

    #58486

    scrambler
    Moderator

    Here it is running on my test site

    https://www.nicolatrwst.com/testnicola/post-page-with-excerpts/

    with a couple more rule for clean layout (in yellow)

    .wvrx-posts .entry-header {position:relative;}
    .wvrx-posts .post-area {margin-bottom:0;position:relative;}
    .wvrx-posts .post-title {position:absolute;bottom:20%;left:20px;transition:bottom 1s;}
    .wvrx-posts .entry-summary {position:absolute;opacity:0;top:95%;left:20px;transition:top 1s, opacity 1s; width:95%;}

    .wvrx-posts .post-area:hover .post-title {bottom:50%;}
    .wvrx-posts .post-area:hover .entry-summary {top:45%;opacity:1;}

    .wvrx-posts .blog-post-cols-2 {width:50%;margin:0;}
    .blog-post-cols-2 img, .blog-post-cols-2-span-2 img {max-width:100%  !important;margin:0 !important;}
    #58487

    Weaver
    Keymaster

    That’s really interesting. Might want to add that as a feature to Weaver.

    Could use some bg shading on the white text, I think. Like what is used with Block Editor gallery, for example.

    #58488

    Leigh2018
    Participant

    I can’t wait to try this out! Have you tested it on mobile? I’m going to work on this tomorrow and give you a link to the site.

    My daughter, who helps me with some designs and is a great designer in her own right, says “Mom, those theme developers should hire you for their ads, because every time you talk about Weaver Xtreme you sound like an excited advertisement for it!” Lol! She is so right! 🙂

    #58489

    scrambler
    Moderator

    It needed a couple more rules to not override the switch to a single column on phone (in orange)

    It will probably need a few more mobile rules, as on small tablet with two columns the text is a bit too big for the image size. Depending on your images and titles/excerpt, we could reduce font size, or make it use a single column on small tablets too.

    Also, to remove the continue reading you can add   to the continue reading box

    .wvrx-posts .entry-header {position:relative;}
    .wvrx-posts .post-title {position:absolute;bottom:20%;left:20px;transition:bottom 1s;}
    .wvrx-posts .entry-summary {position:absolute;opacity:0;top:95%;left:20px;transition:top 1s, opacity 1s; width:95%;}
    .wvrx-posts .post-area {margin-bottom:0;position:relative;border:2px solid white;}
    .wvrx-posts .post-area:hover .post-title {bottom:50%;}
    .wvrx-posts .post-area:hover .entry-summary {top:45%;opacity:1;}
    .is-desktop .blog-post-cols-2, .is-tablet .blog-post-cols-2 {width:50%;margin:0;}
    .blog-post-cols-2 img, .blog-post-cols-2-span-2 img {max-width:100%  !important;margin:0 !important;}
    .is-phone .blog-post-cols-2 {width:100%;margin:0;}

    #58490

    scrambler
    Moderator

    I found a way to add the gradient over the image only with CSS 🙂

    .wvrx-posts .wvrx-fi-link:before {
    content:"";
    position:absolute;top:0px;left:0px;width:100%;height:100%;
    background:url(ShadeImageUrl) no-repeat bottom;background-size:100% 80%;
    }
    
    You can download my image at the url below, it is a gradient from black to fully transparent in a png format
    http://www.nicolatrwst.com/testnicola/wp-content/uploads/shade.png
    
    
    

    @weaver, if we made that an option, it would be better to do it with the proper HTML structure. As it is, the respective positions of title and excerpt are not 100% responsive. depending on content they could collide and require tweaks.

    @leigh2018 thank you for the challenge, this was a fun one 🙂

    #58491

    scrambler
    Moderator

    Below is a better method that is fully responsive (to the point of content not fitting in the images)

    For Featured Image Excerpts use position: beside page/post no wrap, centered, full size

    By using “Beside page/post no wrap”, we have a better HTML structure, with the image first, then all the posts text content (title excerpt…). That allows us to move title and excerpt together (even info lines if we want) which means that no matter their sizes, they will never collide with each other, making for a fully responsive solution.

    Prerequisites:

      • Set the Blog featured image position to “beside page/post no wrap”, centered and full size
      • Hide comment bubble
      • Make sure all Excerpts have the same length
      • Set L/R paddings to 2% and bottom margin on post areas to zero
      • Set image border to 2px white

     

    Add the CSS below to the CSS rule box

      • first 2 rules are positions for the post content (title and excerpt)
      • next two are the base positions and transition speeds
      • Next two are opacity for the excerpt
      • Next 3 are to get a clean no space layout of the posts when using masonry 2 columns
      • Last rule adds a dark gradient over the bottom of the FI for readability

     

     

    .wvrx-posts .post-area {position:absolute; top:70%;transition:top 1s;}
    
    .wvrx-posts .wvrx-fi-link:hover + .post-area, .wvrx-posts .post-area:hover{top:20%;}
    
    
    
    .wvrx-posts .entry-summary {opacity:0;transition:opacity 1s;}
    
    .wvrx-posts .wvrx-fi-link:hover + .post-area .entry-summary, 
    
    .wvrx-posts .post-area:hover .entry-summary, .wvrx-posts .entry-summary:hover {opacity:1;}
    
     
    
    .is-desktop .blog-post-cols-2, .is-tablet .blog-post-cols-2 {width:50%;margin:0;}
    
    .blog-post-cols-2 img, .blog-post-cols-2-span-2 img {max-width:100% !important;margin:0 !important;}
    
    .is-phone .blog-post-cols-2 {width:100%;margin:0;}
    
     
    
    .wvrx-posts .wvrx-fi-link:before {
    
    content:"";
    
    position:absolute;top:0px;left:0px;width:100%;height:100%;
    
    background:url(http://www.nicolatrwst.com/testnicola/wp-content/uploads/shade.png) no-repeat bottom;background-size:100% 80%;
    
    }

     

    @weaver, we will see once all tweaks are done, but using that method could be a safe responsive way

    #58492

    scrambler
    Moderator

    And if you want to add some interest by moving the excerpt with a slight offset (what is visible on my test site right now https://www.nicolatrwst.com/testnicola/post-page-with-excerpts/)

    Change the rule as per below (blue)

    Also includes adjustment of the dark shade so it does not cover the 2px white border of the image (in orange)

    .wvrx-posts .post-area {position:absolute; top:70%;transition:top 1s;}
    .wvrx-posts .wvrx-fi-link:hover + .post-area, .wvrx-posts .post-area:hover{top:20%;}
    
    
    .wvrx-posts .entry-summary {opacity:0;padding-top:5em;transition:padding-top 1s, opacity 1s;}
    .wvrx-posts .wvrx-fi-link:hover + .post-area .entry-summary, 
    .wvrx-posts .post-area:hover .entry-summary, .wvrx-posts .entry-summary:hover {padding-top:1em;opacity:1;}
    
    .is-desktop .blog-post-cols-2, .is-tablet .blog-post-cols-2 {width:50%;margin:0;}
    .blog-post-cols-2 img, .blog-post-cols-2-span-2 img {max-width:100%  !important;margin:0 !important;}
    .is-phone .blog-post-cols-2 {width:100%;margin:0;}
    
    .wvrx-posts .wvrx-fi-link:before {
    content:"";
    position:absolute;top:2px;left:2px;width:98%;height:98%;width:calc(100% - 4px);height:calc(100% - 4px);
    background:url(http://www.nicolatrwst.com/testnicola/wp-content/uploads/shade.png) no-repeat bottom;background-size:100% 80%;
    }
    #58498

    Leigh2018
    Participant

    @scrambler – I have been wanting to try this all day! But day got away from me. You are awesome to even try!

     

    @weaver – would love this to be added as a feature! Maybe an easy plugin???

     

    Will certainly give this code a try… if I am smart enough to get it right! LOL!

     

     

    #58499

    scrambler
    Moderator

    Feel free to post when implemented for tweaks, it is an interesting look, and even if it does not make it as an option, I can put out a detailed tutorial.

     

    #58501

    Weaver
    Keymaster

    I don’t want to add a new option, but it seems this is really designed to work with a featured image. So it seems it would be easy and probably understandable to add it as another FI option.

Viewing 16 posts - 1 through 16 (of 62 total)

You must be logged in to reply to this topic.