[Resolved] Post title on featured image

Home Forums Support [Resolved] Post title on featured image

Home Forums Support Post title on featured image

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #69081
    Aleksey

    Can You help me please.
    How to do at frontpage featured posts whith posttitle above featured image.

    #69108
    Aleksey

    I mean something like this:

    #69250
    Tom
    Lead Developer
    Lead Developer

    Hmm, this is possible but involves a bit too much custom coding for me to provide here.

    Basically, you would need the content to be positioned absolutely and the image would need to take up the whole container.

    #69266
    Aleksey

    Thank you Tom!
    if I’m not mistaken, I need to make the appropriate changes in CSS file?
    Sorry for stupid questions, I just a beginner in web πŸ˜‰

    #69338
    Tom
    Lead Developer
    Lead Developer

    You would need to use a child theme, which would include a style.css file for the CSS.

    Been looking for a plugin that could display posts like that because the code would actually get pretty complicated into HTML/PHP, but I haven’t had any luck.

    I may need to do something to a future project, and will provide my finished code in here once I do that.

    Thanks!

    #69836
    Aleksey

    Thank you very much Tom! πŸ™‚
    Good luck in your projects! πŸ™‚

    I have 2 more questions:
    1. How can I change padding in masonry blocks?
    2. How to do (for example every 10-th block of masonry) an advertising block?
    Please help a newbie! πŸ™‚
    Thanks!

    #70420
    Tom
    Lead Developer
    Lead Developer

    1. This CSS should work:

    .masonry-post .inside-article {
          padding-top: 40px;
          padding-right: 40px;
          padding-bottom: 40px;
          padding-left: 40px;
    }

    2. I wish I knew – been on the lookout for this kind of functionality for a while – if you find anything definitely let me know πŸ™‚

    #70471
    Aleksey

    1. It works! πŸ™‚
    Thanks! πŸ™‚
    2. Ok, if I find smth I’ll provide it in here )

    #353261
    Nick

    I was able to accomplish this with the magic of CSS. On my site, I have the featured image as a fixed background inside the div that contains it. The effect this creates is when the reader scrolls down, different parts of the featured image are displayed. I have the post title in the top left corner of the featured image. You can see the end result on my web site at http://www.pc.solutions.

    I used the Simple Custom CSS plugin to add CSS. I added the following CSS to move the post title.

    .inside-article {
      position: relative;
    }
    
    h1.entry-title {
      background-color: #FFF;
      position: absolute;
      top: 30px;
      left: 30px;
      margin-right: 30px;
      padding: 5px;
    }

    With Tom’s help, I was able to get the featured image to be the background of the containing div. I added the following to the wp_head sedction of GP Hooks.

        <?php 
    $thumb = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' );
    
    if ( $thumb && is_single() ) {
        ?>
        <style type="text/css">
            div.page-header-image-single {
                width: 100%;
                background-image: url('<?php echo $thumb['0'];?> ');
                background-attachment: fixed;
                background-repeat: no-repeat;
                background-size: 100%;
                height: 400px;
                margin: 0px;
                padding: 0px;
            }
            img.wp-post-image {
                display: none;
            }
            img.attachment-full {
                display: none;
            }
        </style>
        <?php
    }
    ?>

    You’ll need to make sure you have “Execute PHP” checked. Hope this helps!

    #353395
    Tom
    Lead Developer
    Lead Developer

    Great solution!

    You may be interested in our upcoming Page Header update in GPP 1.4: https://vimeo.com/223381628

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.