-
Hello great support,
On my blogpages like these https://www.yory.nl/themas/basiskennis-bij-stamboomonderzoek/
I would like to add small text labels in the top left corner on the feature images of the articles. I’ve build these pages with a querly loop and containers, but I don’t know how / and if it’s possible to create these kind of labels like these
https://imgur.com/a/cXrACkGI’m already using ACF, but I don’t know how to make the next step.
Can you point me to the right direction?
Thank you!
Regards,
Yolanda, NL -
Hi there,
you could edit the Query Loop and:
1. place the featured image block inside a Container Block.
2. within the same Container add a Headline block before the image.So the list view layout looks like:
Container Block ---- Headline Blocks ---- Image Block3. Set the Container Blocks > Layout > Position to Relative.
4. Select the Headline Block and:
4.1 Set its Dynamic data to Post Meta and add your ACF Field Name.
4.2 create a Global Style for the Headline blockhttps://docs.generateblocks.com/article/creating-a-global-style/
4.2.1 In the global style set its Position > Position to Absolute and the Top to 0 and the Right to 0
-
Hello David,
Thanks for the start-up! I’m still a little lost here, as I don’t get exactly what I want.
Can you give me a little bit more help? I’ve done some different settings, but can’t get it right.
This is my test page
https://www.yory.nl/testing/The image below is a screenshot of how I would like it to have (but then with a blue background and white font).
I’m willing to pay to hire a developer if necessary.
Thank you,
Yolanda -
Use a container with background image is easier to create the layout you want.
The structure would be this:
- container (set up background image, use flexbox alignment matrix to align the button ) -- gb buttonflexbox alignment matrix: https://docs.generateblocks.com/article/flexbox-alignment-matrix/
-
Hai, can you try use this css :
.Labels-on-top { position: absolute; background: var(--accent); color: #fff; text-align: left; padding: 5px 15px !important; border-radius: 0; left: 0; top: 0; font-size: 12px; right: auto; } .Labels-on-top a { color: #fff; }Result : https://prnt.sc/eDFTR4eArjc9
-
@Ying, what you suggest isn’t working for me, as I want this in a query loop and not for a single image.
@onlydexado, thank you for the code, it looks a little bit better, but still some things to clean up:
– I would like to have the label on top of the image, and not above
– Only the width of the size of the word ‘Bron’ should be blue, so not for the whole width
– I don’t want the label to be a linkI don’t know how to achieve this, can you help out?
Thank you,
Yolanda -
@Yolanda Lippens, Can you try to
– Go to Bron Headline,
– Under layout set Position to: Default (currently is Relative)
– Under Sizing, set margin top to: 0 -
Hello Onlydexado,
I don’t know why, but funny enough, I can’t select the Lay-out box back to Default. This option doesn’t seem to be available after selecting Relative? See screenshot https://imgur.com/a/cqf27R4
I’m too frustrated right now to spend more time on this, so I think I have to let it go… unless someone can develop it for me (ofcourse I’d pay for it).
Thank you!
Yolanda -
Hai, delete my previous css, and try use this and also remoe 0.7em margin top from headline
.Labels-on-top { position: absolute !important; background: var(--accent); color: #fff; text-align: left; padding: 5px 10px !important; border-radius: 0; left: 0; top: 0; font-size: 12px; right: auto; } -
Hi Dex,
Yes, now we’re talking! 🙂
I’ve changed the code a little bit, and the only thing that I can’t figure out is why I can’t change the– padding on the right. I would like to have it 2px so the left/top/right/bottom is about the same (now it looks like the right padding is wider)
– the top on the same height as the image: I used -11px, but is there a better way?
– the font size, I would like to have a smaller font, but changing it doesn’t work?Thank you so far!!!
.Labels-on-top {
position: absolute !important;
background: #103A6A !important;
color: #fff !important;
text-align: left !important;
padding: 4px 3px 6px 10px !important;
left: 0 !important;
top: -11px !important;
font-size: 10px; !important;
font-weight: 700 !important;
right: auto !important;
}Yolanda
-
Hi Yolanda,
@Ying, what you suggest isn’t working for me, as I want this in a query loop and not for a single image.
It works for query loop as well, the container would be the post template container of the query loop block. The background image of the post template container can be dynamically set to the featured image.
Hi Dex,
Thanks for jumping in and help, but what Yolanda asked for can be achieved easily with GB blocks, no CSS is needed.
-
@Ying, thanks for your reply and explanation.
The positive thing about using a CSS code, is that I have many query loops on different pages on my site, so a central code would work the best for me. Besides, I’m not so experienced with using the global style.
@Dex, what could be the reasons I can’t change the code? (See previous message).
Thank you,
Yolanda -
Hi there,
one of the issues is you have this CSS on your site:
.gb-headline.gb-headline-text { margin-top: 0.7em !important; margin-bottom: -0.5em !important; padding-right: 1em !important; }Which is adding margins and padding to all headline blocks using the
!importantstatement.
If you need to keep that CSS for the rest of your site then you will need to make yourLabels-on-topCSS more specific.So remove ALL CSS you have for the
lables-on-top
Clear your caches.And then try this CSS:
body .gb-headline.Labels-on-top { margin: 0 !important; position: absolute; top: 0; left: 0; background: #103A6A; color: #fff; text-align: left; padding: 4px 6px !important; font-size: 9px; } -
Thank you David, that works! I had to add
right: auto !important;
to make the alignment correct. 😉Thank you!
Regards, Yolanda
-
Glad to hear that!
- You must be logged in to reply to this topic.