Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Resolved] image alignment not working with custom post type

Home Forums Support [Resolved] image alignment not working with custom post type

Home Forums Support image alignment not working with custom post type

  • This topic has 18 replies, 2 voices, and was last updated 5 years ago by Tom.
Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #244617
    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.

    #244694
    Tom
    Lead Developer
    Lead Developer

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

    Can you link me to the page?

    #244711
    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.

    #244852
    Tom
    Lead Developer
    Lead Developer
    #244893
    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.

    #244896
    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.

    #244942
    Tom
    Lead Developer
    Lead Developer

    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?

    #244958
    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.

    #245011
    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

    #245021
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #245044
    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

    #245060
    Tom
    Lead Developer
    Lead Developer

    Ah, great job!

    Try this:

    body.post-image-above-header .post-image {
        margin-bottom: 0;
    }
    #245068
    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

    #245069
    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}

    #245193
    Tom
    Lead Developer
    Lead Developer
Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.