Blog Post Image Border Radius

Design help General
1

Hello

Im would really like the images in my Blog posts to have a border radius. Of course I can easily do this everywhere on the site but I can’t find how to do it in a post. Im sure it must be obvious but not to me at the moment. Can anybody help me?

Here is my public share link: http://eliot-murtons-sublime-site.webflow.io/

2

Hi, That’s what I wanted for my blog, and you can see it in action in all the blog posts:

http://inb4.webflow.io/posts/css-background-animation

What you need to do is to style the <figure> element of the Rich text element.

Do this within a RT that is not linked to any collection, but has the same class as the one your blog post template uses.

Do you need me to go further into details?

3

What I wanted originally was having the images with round corners and the legend just under it. At that time, if I add a caption to an image, it will place itself within the figure so my image itself loses the two lower corners.

It’s possible to do it I think but I haven’t tried again yet. If it’s not possible with Webflow only, a bit of custom code with pseudo element will do.

4

This sounds promising. Yes please. I am new to Webflow.

5

Follow those sets of instructions.

  1. You blog post text must be in a RT (Rich text) element. Both in the Collection settings than in the blog post Template.
  2. On the blog post template, your RT element must have a class name, let’s say: post body.

Now for a technical reason when a RT element is linked to a collection or is used within a Dynamic list, you can’t style its content. But we don’t care, we can style its content in any other RT element that has the same class.

  1. in a static page, put a RT element and give it the class you gave to your post text : post body
  2. notice how you can select the RT element entirely, or select only an element of it : the title, the paragraph etc
  3. double click it to add a line, click on the + icon that appears and add any image inside. when the image appears click somewhere else on the page to unselect the RT element.
  4. click again but on the image so the image is selected.
    click on the navigator tab and select the FIGURE parent of the image : that’s what you want to style

http://vincent.polenordstudio.fr/snap/86ly0.jpg

  1. click on the field where you add the class name, and on the bottom, on All Figures

http://vincent.polenordstudio.fr/snap/d53y0.jpg

  1. click on the following button to limit the effects of the styling we’re going to do to the images within a RT element of that class

http://vincent.polenordstudio.fr/snap/999sv.jpg

  1. now style your round corners as dsired, play with the options.

in the end it will affect your images in the blog post.

6

Sorry. Im not getting much luck with this. I get nothing pooping up when I double click on the RT. If I try to manually drag an image or any other element (from the + icon) into the RT I get a popup advising me elements can not me moved within the rich text nodes. I am also not sure what the FIGURE is. No luck so far :cry:

7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.