-
tom0386
Hi, I would like to make up the latest post widget within the sidebar like the image I attached. It should display a tiny featured image as well. I just want to make it looking “prettier”
https://explorertom.com/koh-mook/ (my site)
https://postimg.cc/1g9g4H5Q (like it should be)
Thank you guys!
Regards,
Tom -
Hi Tom,
You are using the WP latest posts block which we do not have control over, unfortunately.
And I don’t think there’s an option to add the featured image.
If you have GenreateBlocks plugin, you can use the query loop block and we will be happy to assist you in achieving the layout.
https://docs.generateblocks.com/article/query-loop-overview/ -
tom0386
I do have that Plugin installed already. Can you please guide me? 🙂
-
Hi there,
to save some time, create a new draft page.
In the editor Top Bar, 3 dot menu, select the Code editor view.Copy and Paste in this code:
<!-- wp:generateblocks/query-loop {"uniqueId":"bbb96b2e","query":{"post_type":"post","per_page":"3","offset":""}} --> <!-- wp:generateblocks/grid {"uniqueId":"ae4a818a","columns":1,"horizontalGap":20,"verticalGap":20,"isDynamic":true,"blockVersion":3,"isQueryLoop":true,"useLegacyRowGap":true,"lock":{"remove":true}} --> <!-- wp:generateblocks/container {"uniqueId":"a5958d80","isGrid":true,"isQueryLoopItem":true,"gridId":"ae4a818a","isDynamic":true,"blockVersion":4,"display":"flex","columnGap":"10px","sizing":{"width":"100%","widthTablet":"100%","widthMobile":"100%","height":"100%","maxWidth":""},"spacing":{"paddingBottom":"","paddingBottomMobile":"15px","marginBottomMobile":"0px"},"borders":{"borderBottomWidth":"1px","borderBottomStyle":"solid","borderBottomColor":"#b2b2be"},"lock":{"remove":true,"move":true}} --> <!-- wp:generateblocks/container {"uniqueId":"a7581b45","isDynamic":true,"blockVersion":4,"flexShrink":0,"flexBasis":"120px"} --> <!-- wp:generateblocks/image {"uniqueId":"a77e6df6","sizeSlug":"medium","widthMobile":"100px","heightMobile":"100px","blockVersion":2,"borders":{"borderTopRightRadius":"0px","borderBottomRightRadius":"0px","borderBottomLeftRadius":"0px","borderTopLeftRadius":"0px"},"useDynamicData":true,"dynamicContentType":"featured-image","dynamicLinkType":"single-post"} /--> <!-- /wp:generateblocks/container --> <!-- wp:generateblocks/container {"uniqueId":"5a1f7f02","isDynamic":true,"blockVersion":4} --> <!-- wp:generateblocks/headline {"uniqueId":"23a64d89","blockVersion":3,"typography":{"fontSize":"20px","fontSizeMobile":"16px"},"spacing":{"marginBottom":"6px","marginBottomMobile":"4px"},"linkColor":"#222222","linkColorHover":"#1e73be","useDynamicData":true,"dynamicContentType":"post-title","dynamicLinkType":"single-post"} --> <h2 class="gb-headline gb-headline-23a64d89 gb-headline-text"></h2> <!-- /wp:generateblocks/headline --> <!-- wp:generateblocks/button {"uniqueId":"59a4d11a","hasUrl":false,"blockVersion":4,"display":"inline-flex","alignItems":"center","justifyContent":"center","typography":{"fontSize":"12px","textAlign":"center"},"spacing":{"paddingTop":"2px","paddingRight":"4px","paddingBottom":"2px","paddingLeft":"4px","marginRight":"4px"},"backgroundColor":"#0366d6","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff","useDynamicData":true,"dynamicContentType":"terms","dynamicLinkType":"term-archives","termTaxonomy":"category"} --> <span class="gb-button gb-button-59a4d11a gb-button-text">Button</span> <!-- /wp:generateblocks/button --> <!-- /wp:generateblocks/container --> <!-- /wp:generateblocks/container --> <!-- /wp:generateblocks/grid --> <!-- /wp:generateblocks/query-loop -->
Switch back to Visual editor.
Now you can select the Query Loop block that added and copy and paste it to where you require.
With the Query Loop block selected you can edits block setting ( sidebar ) Paramters, currently its set to show 3 of the latest posts. -
tom0386
Thanks a bunch David, that worked out well! 🙂
-
tom0386
Hi again,
I realized that when I am using the search bar the latest 5 posts/articles will be shown as 2 columns….
-
Edit the Query Loop Block.
Inside you will find a Grid Block, select the Post Template block that is inside that.
In Layout -> Flex Child set the BASIS to100%
-
tom0386
-
Thats set to 100 PX – type
100%
-
tom0386
I did, still the same: https://explorertom.com/?s=albanien
-
Can you try clearing your plugin caches, as i see it working if i disable the cache on the frontend
-
tom0386
Hi David,
I cleared the plugin caches. I guess it has something to do with the search bar and category pages as it works on regular posts.
https://explorertom.com/indien/ -> not showing correctly
https://explorertom.com/?s=indien -> not showing correctly
https://explorertom.com/mostar-sehenswuerdigkeiten/ -> working fine -
I’m still seeing the
flex-basis
being set to100px
instead of100%
:
https://app.screencast.com/dUutsKOAZfdRsCan you make sure the cache is cleared?
-
tom0386
Hi Ying,
thanks for reaching out.
Now I switched tablet and mobile flex-basis settings also to 100% and there is no change at all. Checking in 2 different browser and cleared the cache…. -
I am still seeing the
flex-basis
being set to 100px, please make sure all cache is cleared including server cache. And you can also try disabling your cache plugin. -
tom0386
Hi Ying,
I really don’t know what to do anymore. Now I even disabled the caching plugin. I logged into wordpress from my phone and it says that flex basis is being set to 100%.
Probably I am within the wrong settings or something else as I am having a hard time to figure it out :/
- You must be logged in to reply to this topic.