[Resolved] image alignment not working with custom post type

[John]

Hi Tom,

I have a custom post type ‘children’. When I view the archive for ‘children’ I originally had a problem that the columns setting didn’t work. I found a fix in this forum as follows:

add_filter( 'generate_blog_columns','generate_adjust_columns' );
function generate_adjust_columns( $columns )
{
    if ( is_post_type_archive('children') ) :
        return true;
    endif;

    return $columns;
}

I’ve been able to set the image size in the customizer, but I cannot get the image alignment to work. No matter how I set the alignment value, it is always centered. I tried this in the style file:

.post-image{float:left}

but that did not help.
Any ideas?
Thanks.

[Tom]

That should do it, but only if the image is small enough to float.

Can you link me to the page?

[John]

It is on a localhost right now. I looked at the source of the generated page and it looks like my child style.css is being over written by style-min.css.

[Tom]

If that’s the case, this might be the issue: https://generatepress.com/knowledgebase/child-theme-working/

[John]

I don’t have the @import in the child style sheet but I do have this code in my child function.php file. I suspect it is causing the same problem.
`function my_theme_enqueue_styles() {

$parent_style = ‘parent-style’; // This is ‘generatepress-style’ for the GeneratePress theme.

wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array( $parent_style ),
wp_get_theme()->get(‘Version’)
);
}
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );’
I put this in there when I was first learning how to create child-themes. I read somewhere it was a good idea.

[John]

I removed the wp_enqueue_style mentioned above and still cannot control image alignment. I examined the element with my browser and still this:

.generate-columns-activated .generate-columns-container article:not(.featured-column) .post-image {
    float: none;
    text-align: center;
    margin-left: 0;
    margin-right: 0;
}

The image only centers when enabling columns in the GP Blog settings.

[Tom]

You definitely want to remove that PHP – it’s not necessary in GP and will load the parent stylesheet twice.

I’m confused, are you trying to center the image or float it?

[John]

i have a post_type ‘children’. The only information for each child is stored in post-meta with keys like firstname, lastname, age, gender, village, etc. The purpose of this site is to show these orphans that are available for monthly sponsorship by donors. There are 850 kids in 6 different rescue units. I want the visitor to the site to be able to browse through pages of these kids so they can pick a child to sponsor. While browsing the archive, I want to show a thumbnail photo with limited metadata like name, age and rescue unit. When they click to see the single post, I want a large image with all the metadata shown. The single post page is working good for now, but the only way I can get a visually suitable archive page display is with a single column which leaves a lot of wasted white space to the right of the posts.

I will get what I have online and give you a link to it later today.

[John]

Hi Tom,

Here is a link to the ‘children’ archive page. I am modifying the query to limit the results to only one of the six rescue units with this link. Some of the children do not have photos yet.

http://kidsinuganda.net/?post_type=children&reunit=Bukedea

Thanks,
John

[Tom]

If you’re wanting to center the image, this should help:

.type-children .post-image {
    float: none;
    text-align: center;
    margin: 0 0 2em;
}

Let me know 🙂

[John]

Tom,

I tried the style you gave me and it didn’t seem to work.
Here is what I put in my plugin that forces columns regardless of the settings in the customizer:

add_filter( 'generate_blog_columns','generate_adjust_columns' );
function generate_adjust_columns( $columns )
{
    if ( is_post_type_archive('children') ) :
        return true;
    endif;

    return $columns;
}

Here is what I added to the style sheet in my child theme:

‘div.page-header-image-single{float:left;margin-right:10px}
h2.entry-title{text-align:center}
.entry-content{margin: 0px 0px 0px 0px;text-align:center}
.post-image-above-header .post-image{margin: 0px 0px 0px 0px}`

It is almost working perfect except I am getting a 2em space between the featured image and the post title. It would be great if you had a way to eliminate that. Here is a link to the page again.

http://kidsinuganda.net/?post_type=children&reunit=Bukedea

Thanks again for looking at this. Coffee is coming.

John

[Tom]

Ah, great job!

Try this:

body.post-image-above-header .post-image {
    margin-bottom: 0;
}

[John]

Still not doing it.
I had to remove the .entry-content:text-align:center from the style as it was centering all the content on the site. I just put a div/center around the metadata I added in the content-children.php template so the meta data positioned under the photo. I added an h2.entry-title/center to pull the title in under the photo.
The style you last gave me doesn’t remove the margin space under the photo and now I have extra space between the title and my metadata. My previous style actually had a similar code:
.post-image-above-header .post-image{margin: 0px 0px 0px 0px}.

When I inspect the element div/class/post_image with my browser, i still see a margin-bottom: 2em from style-min.css

[John]

I added this to the style and closed the space between the title and the metadata but still have the space between the photo and the title.
.entry-content{margin-top: 0px}

[Tom]

I just adjusted the CSS above, can you give it another shot?: https://generatepress.com/forums/topic/image-alignment-not-working-with-custom-post-type/#post-245060

[Author]

Posts