@violetta666 I will check this weekend. Sorry for the delay.
This reply was modified 2 years, 6 months ago by johnzenausa
Thread Starter
Cesare (@violetta666)
ok thanks, important to resolve.
First of all you did understand the tutorial correctly.
When I inspect the html it is grabbing the correct thumbnail. You can see that the source is: https://andco.app/wp-content/uploads/sites/2/2023/11/1653467544_cijene-nekretnina-u-hrvatskoj-150×150.jpg . So it is grabbing the 150×150 image. As you can see in the below images.
When I inspect the image there is a CSS class causing it to fill the whole container. It is the class involving the .wp-lazy-load.
See how it’s giving it a width of 100%? So that’s why it’s growing to full size. So you may add a simple class and shortcode ID.
First add this to the specific shortcode shortcode_id='immobili_page' so the full shortcode will look like so:
[netsposts shortcode_id='immobili_page' thumbnail='true' size='thumbnail' hide_excerpt='true' paginate='true']
Then you may add the following to your CSS file or wherever you add your custom CSS.
#immobili_page .netsposts-content .post-thumbnail.wd-lazy-load { width: 150px; }
This should overwrite the other CSS and take priority. Let me know if it doesn’t work.
Note: This will only work for this instance of the shortcode. If you want it to work everywhere ignore the part about the ID. Then the CSS would just be:
.netsposts-content .post-thumbnail.wd-lazy-load { width: 150px; }
Plus the shortcode would remain the same as you had it.
This reply was modified 2 years, 6 months ago by johnzenausa
This reply was modified 2 years, 6 months ago by johnzenausa
Thread Starter
Cesare (@violetta666)
Thread Starter
Cesare (@violetta666)
Hi, how to hide publish date?
Hi you want to just hide the date or all the meta data?
Hi @violetta666 ;
There is no shortcode parameter to hide it so you’ll have to use some css. You may use the following:
.netsposts-source > span:not(:last-of-type) { display: none; }
If you want to target this particular shortcode just put the shorcode_id in the front as such:
#immobili_page .netsposts-source > span:not(:last-of-type) { display: none; }
It’ll look like the following image:
This reply was modified 2 years, 6 months ago by johnzenausa
This reply was modified 2 years, 6 months ago by johnzenausa
Thread Starter
Cesare (@violetta666)
Perfect, just how I wanted it.
Thread Starter
Cesare (@violetta666)
One more small question: how to center content in the column?
I added two parameters for the post date meta info. You may now hide it with the following attribute.
hide_post_date_meta_info='true'
Plus if you want to style that particular text individually you may add the following wrap shortcodes.
wrap_post_date_start & wrap_post_date_end
An example would be:
wrap_post_date_start='<div class="some-class">' wrap_post_date_end='</div>'
Thread Starter
Cesare (@violetta666)
Hello and thanks for the update. But the problem of centering content on the page remains.
tomorrow I’ll try to set up a grid or flex layout. If it’s already flex did you try justify-content: center?
This reply was modified 2 years, 6 months ago by johnzenausa
Thread Starter
Cesare (@violetta666)
Hi, Your shortcode is in wpbakery column set with centered text, but it doesn’t work.https://andco.app/immobili/
thanks
This reply was modified 2 years, 6 months ago by Cesare
This reply was modified 2 years, 6 months ago by Cesare
@violetta666 I see that you have some custom html code already added.
immobili_page .netsposts-items { display: grid; grid-template-columns: repeat(auto-fit, 300px); gap: 1em; }
So all you need to do to center them is to add justify-content: center; to the css code above so it will look like such.
immobili_page .netsposts-items { display: grid; grid-template-columns: repeat(auto-fit, 300px); gap: 1em; justify-content: center; }
You may see the image here showing what I mean.
https://photos.app.goo.gl/qxvpqX2VQLbbewBq6
Thread Starter
Cesare (@violetta666)
Perfect, thank you so much for everything
