Home Forums Weaver Xtreme Theme How to show featured image thumbnail in the sidebar?

Topic Resolution: Answered

This topic contains 29 replies, has 3 voices, and was last updated by  scrambler 4 hours, 3 minutes ago.

Viewing 16 posts - 1 through 16 (of 30 total)
  • Author
    Posts
  • #55702
    Answered

    GeorgeW
    Participant

    Hello, folks!

    Hope you’re well.

    Is there any way to show the featured image thumbnail, along with the text’s title, in the sidebar widget?

    Similar to SheLikesToSew [dot] com?

    Thanks!

    George

    #55704

    scrambler
    Moderator

    You can use the Weaver Show posts plugin for that.

    Once installed, you create a filter top select which posts to display, and how. Among the choices is Title plus featured image.

    Then you insert that show post in the sidebar using the weaver showpost widget.

    Then you will need to add the rules below in the Theme Global Custom CSS Rule box to get the side by side layout

    .atw-show-posts-filter-filtername .wvrx-fi-link {float:left;width:29%;margin-right:1%;}
    .atw-show-posts-filter-filtername .entry-header {float:right;width:70%;}

    We may need more styling, but can address that once in place with a link to the site.

    @weaver, I seem to remember discussing the possibility to use the Excerpt Featured image layout option for the Post when display using Title Plus featured image, but cant remember if it has been deemed too hard to do. Right now when using TitleĀ  + Featured image to display post, there is no way to get any of the nice FI layout options

    #55707

    Weaver
    Keymaster

    I belive the code for FI + Title is pretty stand alone and won’t easily adapt to the FI options.

    #55710

    GeorgeW
    Participant

    Thanks for the replies.

    I followed the instructions. I had to temporarily remove the Weaver Show Posts widget from the sidebar, because the result was a bit odd.

    But here’s a screenshot.

    What do you think?

    Thanks!

    George

    #55717

    scrambler
    Moderator

    I can only fine tune the CSS with the live site so I can inspect the HTML.

    If you can leave it on the live site, Create a text page, put the Show post shortcode in the test page content, and give me the link to that page so I can see what is going on and tune the CSS

    #55719

    GeorgeW
    Participant

    Ok, here’s the page:

    https://lifestyledesignaccelerator.com/blog/thumb-sidebar-test/

    Thanks! šŸ™‚

    George

    #55720

    scrambler
    Moderator

    First it appears your show post filter is displaying post as Excerpts and not as “Title + Featured Image” So you need to start by changing that.

    Second, you did not replace filtername in the rule by the name of your filter, so the rules need to be

    .atw-show-posts-filter-schema .wvrx-fi-link {float:left;width:29%;margin-right:1%;}
    .atw-show-posts-filter-schema .entry-header {float:right;width:70%;}

    #55724

    GeorgeW
    Participant

    Aaaaa… gotcha…

    https://lifestyledesignaccelerator.com/blog/thumb-sidebar-test/

    We are getting closer.

    The thumbnails would need to be smaller. T

    he titles would need to be much smaller, and blue.

    Is there any way to do that?

    Thanks!

    George

     

    #55725

    scrambler
    Moderator

    You need to pay attention…

    I told you needed to replace filtername in the rule by the name of the filter.

    Last time you filter was named schema, but now it apparently named default, yet you used “title-featured-image” in place of filtername in the rules, so they do not work.

    You also must not have used exactly the same options as me, so the rule for the image has to changed a bit. I also added the rule for the font size.

    If you do not change the name of the filter again, the proper rule would be

    .atw-show-posts-filter-default .featured-image {float:left;width:29%;margin:0 1% 0 0;}
    .atw-show-posts-filter-default .entry-header {float:right;width:70%;}

    .atw-show-posts-filter-default .entry-header .post-titleĀ  {font-size:1em;}

    If you change the name again, use the new name instead of default in the rules above.

    To make the image smaller or bigger, change the %, making sure the total is 100%

    To change the font-size, change the value in the rule to what you like

    #55726

    GeorgeW
    Participant

    Thanks, scrambler!

    I have followed your instructions (correctly this time, I believe).

    I have added also the Show Posts widget in the sidebar.

    https://lifestyledesignaccelerator.com/blog/thumb-sidebar-test/

    (Please ignore the post content area – let’s focus on the sidebar itself. You may need to scroll down a bit).

    No matter how small I set the image (I currently have it set to a ridiculously low 1%) the image always stays the same size. Is there any way to force a smaller image size?

    Images also appears to be aligned to the right.

    Thanks,

    George

    #55727

    scrambler
    Moderator

    Because you forgot the dot at the beginning of the featured image rule, so the rule does not work.

    You have to pay attention with CSS syntax šŸ™‚

    You have

    atw-show-posts-filter-default .featured-image {float:left;width:1%;margin:0 1% 0 0;}
    .atw-show-posts-filter-default .entry-header {float:right;width:98%;}

    .atw-show-posts-filter-default .entry-header .post-title {font-size:1em;}

    Instead of

    .atw-show-posts-filter-default .featured-image {float:left;width:29%;margin:0 1% 0 0;}
    .atw-show-posts-filter-default .entry-header {float:right;width:70%;}

    .atw-show-posts-filter-default .entry-header .post-title {font-size:1em;}

    #55728

    GeorgeW
    Participant

    Oh, snap!

    Sorry about the dot. You are right! šŸ™‚

    We are getting really close.

    https://lifestyledesignaccelerator.com/blog/thumb-sidebar-test/

    If only the images could have some space between them and the text, and they were aligned vertically in the center, that would be awesome.

    I tried including rules like:

    ;margin-top:20

    ;vertical-align:middle

    ;hspace:10

    I tried the first two in the post titles too. Didn’t seem to make a difference.

    Anything else in your bag of magic tricks?

    Thanks for all the help so far. I love Weaver and I love this forum.

    George

    #55729

    scrambler
    Moderator

    You can create more text between the image and the text by playing with the image right margin value (now at 1%). just keep the total at 100%.

    For example you could use

    .atw-show-posts-filter-default .featured-image {float:left;width:24%;margin:0 3% 0 0;}
    .atw-show-posts-filter-default .entry-header {float:right;width:73%;}

    Aligning the image vertically in a space that has a variable height is quite a bit more complicated (see next post) but I also think that right now the text is way to big for these long titles. If you cannot make the titles more compact, I would use a font size that keeps the longest text within the height of the image. Something like 0.6em

    .atw-show-posts-filter-default .entry-header .post-title {font-size:0.6em;}

    #55730

    scrambler
    Moderator

    If you really want to do the vertical centering, I found a way to do it using CSS flex properties.

    Replace all the rules previously discussed by the ones below

    .atw-show-posts-filter-default .post {display:flex;align-items:center;}
    .atw-show-posts-filter-default .entry-header {display:flex;order:2;}
    .atw-show-posts-filter-default article > span {display:flex;flex:0 0 25%;order:1;margin:0 3% 0 0;}
    .atw-show-posts-filter-default .entry-header .post-title {font-size:.8em;}

    EDIT: I modified the rules to use the align-items property which should work best as well as flex instead of width

    #55731
    Best Answer

    scrambler
    Moderator

    This reply has been accepted as the best answer.

    Given this issue came up before and is indeed a nice layout to create a sidebar post list, I made a Guide article for it

    https://guide.weavertheme.com/featured-image-side-by-side-layout-for-display-post-as-title-featured-image/

     

    #55735

    GeorgeW
    Participant

    You, sir, are a gentleman and a scholar – worked perfectly!

    This topic can close.

    Thanks!

    George

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

You must be logged in to reply to this topic.