hello, I’m trying to align the images that I put into the word-press post.
Basically I have designed my template (post title, image and paragraph. I also gave the function of “post media” to my image - to tell wordpress to display all images in a post in the same way the image in the template is),
but when I export my theme, the image that was perfectly centered in my pinegrow project is now totally shifted on the left side when I open the wordpress post.
I have linked some screenshots so you see the problem (the first screenshot is my pinegrow project, the second is the exported wp theme):
How do I center the images that I add in a wordpress post? And what functions should I give the image in my template so that wordpress interprets them right, and puts the images where they should be?
Hi @Bea
It seems that the default CSS for centering images is either missing or not correctly specified. Use the browser’s developer console to inspect the image and check if any centering styles, such as margin: 0 auto, are applied. Look for the relevant classes or inline styles and verify whether the expected CSS rules are present. Hope that helps.
“margin: 0 auto” is definitely missing, and other settings like “align: center” etc…
Where should I add this default CSS code in my pinegrow project in order to make sure that the images align properfly?
Hi @Bea
You can center the image using the Styles panel in Pinegrow. First, select the image in your template. In the Properties panel, ensure the image has a class, like post-image. Then, open the Styles panel and click the + button to add a rule for the selected class (.post-image). In the Styles editor, set Display to block and Margin to 0 auto. Hope that helps, I’m new here with Pinegrow, still in UI learning curve.
I had to put the .jpg picture into a tag called: “< figure >”, and I had to put this
< figure img.jpg </ figure > div into another div container that was given the function of “post content” and that it basically contains the paragraph, and also this (< figure img.jpg </ figure >) image was given the php function of : “if WP attachment_ is_image”, and then the img.jpg itself was given the php function of “post media”, et voila’!!!
It worked like a charm, and now I can “align center” every image I put in my WordPress posts.
(If you want the date / author / category tags, and the “featured image” to show, you have to put them outside the “post content” container)
