[Support request] Entry title fit with thumbnail (overlay title on features images)

Home Forums Support Entry title fit with thumbnail (overlay title on features images)

  • This topic has 11 replies, 3 voices, and was last updated 1 year ago by Tom.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1117143
    Vuong

    Hello guys,i want to make entry title overlay on post thumbnail,like this screenshot ( i did it on my old theme)
    eg
    but when i do,its not fit with my post thumbnail
    s
    and here my css on my old theme

    .entry-title {
        line-height: 1;
        position: absolute;
        padding: 10px;
        background: url(https://asdmovies.com/wp-content/themes/frontier/images/title-bg.png) top repeat-x;
        z-index: 5;
        bottom: 0;
        width: 100%;
        text-align: center;
    }

    So what should i do,pls help..thanks very much !

    #1117323
    David
    Staff
    Customer Support

    Hi there,

    can you provide a link to your new site so i can provide the CSS if it is possible.

    #1117588
    Vuong

    im still testing on localhost,but here my site using old theme : https://asdmovies.com
    on my old theme ( frontier ) they put post-image div to content.php so i can easily add any div to this ( see this ss below )

    View post on imgur.com


    in this screenshot,i can just add “quality” div and put entry-title inside entry-thumbnail so they can display without problem
    but on Generatepress,i can’t find any post-thumbnail div in content.php (ss below)

    View post on imgur.com


    hope you get what i said,im not really good in english.

    #1117786
    David
    Staff
    Customer Support

    So I would do the following:

    1. Customizer > Layout > Blog –> Featured Images Archive – sets its position above title.
    2. Create a New Hook Element:

    Hook Content:
    <div class="post-wrap"><!-- Open Post wrap -->
    Make sure to remove the closing </div> the editor will add.
    Select the before_content hook
    Set the Display Rules to Blog & All Archives

    3. Create another new Hook Element:

    Hook Content:
    </div>
    Select the before after_entry_title hook
    Set the the Priority to 5
    Set the Display Rules to Blog & All Archives

    We should now have the post-imageand the entry-header within our div wrap.

    So this CSS will help for the overlay:

    .post-wrap {
    	position: relative;
    }
    .post-wrap .post-image {
    	margin-bottom: 0 !important;
    }
    .post-wrap .post-image img {
    	vertical-align: middle;
    }
    .post-wrap .entry-header {
    	position: absolute;
    	bottom: 10px;
    	left: 10px;
    }

    In the last CSS RULE adjust the bottom, left properties to suit.

    #1117970
    Vuong

    Tks David,its working well on pc now,but in tablet and mobile mode,its not..”quality” and title not display correctly
    https://i.imgur.com/kVJ9OBI.jpga
    https://i.imgur.com/OrZddw1.jpg2
    i uploaded new theme to my site,you can check it : https://asdmovies.com
    Do you need admin / password to check it easy ?

    #1117973
    Vuong

    And another problem,tag clod widget not display full,here screenshot
    3

    #1118064
    Vuong

    Tested on iphone :
    1

    #1118190
    David
    Staff
    Customer Support

    I really need to see a link to the site to tell what the issue is. Are you able to push it to a live domain so i can see?

    #1118210
    Vuong

    Yes,here my site now : https://asdmovies.com
    and btw,how can i display post grid on mobile too ?.tks

    #1118440
    David
    Staff
    Customer Support

    You can try forcing the image to fill the column by changing this CSS:

    .post-wrap .post-image img {
    	vertical-align: middle;
    }

    to:

    .post-wrap .post-image img {
        vertical-align: middle;
        width: 100%;
    }
    #1118492
    Vuong

    Tks David,i get it,could you help me solve my sidebar widget problem ? you can check it on my site (genre widget and year widget )
    Sorry for disturb.

    #1118724
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    It looks like you’re just using regular links now?

    Let me know 🙂

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