Hi,
It should be possible with WPSP free with a tweaked CSS to look similar plus a PHP code snippet that hooks in the WPSP list below the header(generate_after_header).
Example: A snippet to hook in WPSP list below the header
add_action( ‘generate_after_header’ ,function(){
if ( function_exists( ‘wpsp_display’ ) ) { wpsp_display( 1736 ) };
});
Where 1736 is the WPSP list id.
And then do these:
1.) Set the WPSP to whatever you want to list (category, posts, pages, etc).
2.) Remove the list’s entry meta and only leave the featured image and title to display.
3.) Try to style what’s left with CSS similar to what you were trying to replicate.
This should be doable assuming you know your way around CSS.(and a bit of PHP) 😀
Thanks for the answer. Sorry but I think you misunderstood. I want the grid of 3 category names on category images, not the grid of posts in specific categories.
Please see the first row of 3 images. It shows the category names written on category images.
The second row it seems is the grid of three post within selected categories.
In WPSP free version, I can choose Post Type only as Post or Page, not Category or terms etc.
Thanks,
Jain
I tried following your steps and created a hook with PHP function inside. But it showed me a grid of three posts tied to 3 selected categories.
Hi there,
WPSP is only for displaying posts/pages – not Category Terms.
As WordPress doesn’t by default have featured images for categories then the simplest method would be to use some HTML in a GP Hook eg.
<div class="category-container">
<div class="cat-container-inner">
<div class="cat-block">
<a href="link_to_category">
<img src="url_to_cat_image" alt="alt_text_for_image" width="500" height="600">
<span>Category Label<span>
</a>
</div>
<div class="cat-block">
<a href="link_to_category">
<img src="url_to_cat_image" alt="alt_text_for_image" width="500" height="600">
<span>Category Label<span>
</a>
</div>
<div class="cat-block">
<a href="link_to_category">
<img src="url_to_cat_image" alt="alt_text_for_image" width="500" height="600">
<span>Category Label<span>
</a>
</div>
</div>
</div>
Then a little CSS to make it into a row:
.cat-container-inner {
display: flex;
}
.cat-block {
padding: 10px;
}
Thanks David,
But that doesn’t work nicely. I have managed to put the text on the image through CSS but its not responsive in the sense that e.g. in mobile view, images should become stacked (like 1 image in each row with 3 rows in total).
I am very new to all this so pls ignore my kindergarten-level questions.
Please see me changes to Hook element and addiitonal CSS here:
https://fivestepguide.com/for-david/
I am looking for something like this:
https://nicepage.com/c/text-on-image-html-templates
See how the boxes in several rows become stacked once I view it on mobile.
Thanks,
Jatin
Try this CSS instead:
@media(min-width: 769px) {
.cat-container-inner {
display: flex;
}
}
.cat-block {
flex: 1 0 33%;
position: relative;
margin: 10px;
}
.cat-block img {
max-height: 200px;
width: 100%;
object-fit: cover;
}
.cat-block span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
COLOR: #fff;
}
Thanks David. It works now.
However, the main container is not truly centered but on left. I mean if you zoom out chrome to 50%, you will see what i mean. How to fix that?
In the hook, I have enclosed all div tags in <div style="margin:auto; width: 80%; border: 0;">
I thought margin:auto; will take care of centering the DIV. Won’t it?
I will raise a new topic for related question – I dont want to dilute this topic.
Instead of setting a width: 80%; use max-width: 1250px; this will keep it the width of your page container.
Great! By setting max-width instead, I could actually now make them as smaller boxes on mobile too.
Thanks for the help.
