Post title over image - Support | Kriesi.at

Hey Sasolini!

Thank you for coming back.

To move the post title you have to modify the core file includes\loop-index.php.

From line 130 you find


          echo '<header class="entry-content-header">';
                echo $title;

                echo "<span class='post-meta-infos'>";

..........

           echo '</header>';

This you have to move before line 89:


 //     insert your code here

       //echo preview image
        if(strpos($blog_style, 'big') !== false)
        {
            if($slider) $slider = '<a href="'.$link.'" title="'.$featured_img_desc.'">'.$slider.'</a>';
            if($slider) echo '<div class="big-preview '.$blog_style.'">'.$slider.'</div>';
        }

        if(!empty($before_content))
            echo '<div class="big-preview '.$blog_style.'">'.$before_content.'</div>';

But you should wrap the moved code in a div like for styling reasons:


<div class="entry-content-wrapper clearfix standard-content my-moved-header">

</div>

For the animation effect you can try to modify js\avia.js from line 571.

Cheers!
Günter

February 19, 2015 at 3:38 pm #398952

Hi Gunter,

Thank you for your quick reply. I tried what you suggested and was able to move my blog title above the picture not over as I planed (so picture would be in the background of the link it self). Below is the code I used:

//my moved blog post header
echo '<div class="entry-content-wrapper clearfix standard-content my-moved-header">';
	echo '<header class="entry-content-header">';
                echo $title;

                echo "<span class='post-meta-infos'>";
                $markup = avia_markup_helper(array('context' => 'entry_time','echo'=>false));
                echo "<time class='date-container minor-meta updated' $markup>".get_the_time(get_option('date_format'))."</time>";
                echo "<span class='text-sep text-sep-date'>/</span>";

                    if ( get_comments_number() != "0" || comments_open() ){

                    echo "<span class='comment-container minor-meta'>";
                    comments_popup_link(  "0 ".__('Comments','avia_framework'),
                                          "1 ".__('Comment' ,'avia_framework'),
                                          "% ".__('Comments','avia_framework'),'comments-link',
                                          "".__('Comments Disabled','avia_framework'));
                    echo "</span>";
                    echo "<span class='text-sep text-sep-comment'>/</span>";
                    }

                    $taxonomies  = get_object_taxonomies(get_post_type($the_id));
                    $cats = '';
                    $excluded_taxonomies =  apply_filters('avf_exclude_taxonomies', array('post_tag','post_format'), get_post_type($the_id), $the_id);

                    if(!empty($taxonomies))
                    {
                        foreach($taxonomies as $taxonomy)
                        {
                            if(!in_array($taxonomy, $excluded_taxonomies))
                            {
                                $cats .= get_the_term_list($the_id, $taxonomy, '', ', ','').' ';
                            }
                        }
                    }

                    if(!empty($cats))
                    {
                        echo '<span class="blog-categories minor-meta">'.__('in','avia_framework')." ";
                        echo $cats;
                        echo '</span><span class="text-sep text-sep-cat">/</span>';
                    }

                    echo '<span class="blog-author minor-meta">'.__('by','avia_framework')." ";
                    echo '<span class="entry-author-link" '.avia_markup_helper(array('context' => 'author_name','echo'=>false)).'>';
                    echo '<span class="vcard author"><span class="fn">';
                    the_author_posts_link();
                    echo '</span></span>';
                    echo '</span>';
                    echo '</span>';
                echo '</span>';
            echo '</header>';
echo '</div>';

        //echo preview image
...

Any idea how to move the link to overlay the picture?

February 19, 2015 at 4:14 pm #398985

Hi!

Thank you for coming back.

To move the headline over the image try the following:

Look for (line 96 of original file:


        if(!empty($before_content))
            echo '<div class="big-preview '.$blog_style.'">'.$before_content.'</div>';

and split it:


        if(!empty($before_content))
            echo '<div class="big-preview '.$blog_style.'">'.

////        put your codeblock with surrounding <div> here

            echo $before_content.'</div>';

You may need some CSS styling.

The image has the same link as the title, so this should work.

To remove the hover effect try the following:

js\avia.js goto line 571:


            	link.on('mouseenter', function(e)
				{
					var current = link.find('img:first'),
						_self	= current.get(0),

and replace with:


            	link.on('mouseenter', function(e)
				{
                                        return;

					var current = link.find('img:first'),
						_self	= current.get(0),

Best regards,
Günter

February 19, 2015 at 4:43 pm #399008

This reply has been marked as private.

February 20, 2015 at 6:24 am #399453

Ismael

Moderator

Hi!

Add this to the Quick CSS field:

#top .fullsize .template-blog .post .entry-content-wrapper {
padding: 20px;
margin-bottom: 20px;
}

Best regards,
Ismael

February 20, 2015 at 10:22 am #399521

Thank you Ismael, this eliminated the space between the image and the post.

Unfortunately I still don’t see the link being written over (as overlay) the image it self. Do you have any idea why this is the case?

February 23, 2015 at 12:51 pm #400594

Hi!

I tried to find a solution for your request, but it is not so easy (other ideas broke the design).

You can try the following solution, but I’m not sure, if it will work and what the sideeffects on your other pages are:

Goto line 89 of the original file:


       //echo preview image
        if(strpos($blog_style, 'big') !== false)
        {
            if($slider) $slider = '<a href="'.$link.'" title="'.$featured_img_desc.'">'.$slider.'</a>';
            if($slider) echo '<div class="big-preview '.$blog_style.'">'.$slider.'</div>';
		
////////////////////  insert codeblock here, first div with class="my-moved-header" only
                   

        }

Then we can move the title with CSS over the image:


.template-blog .my-moved-header {
    padding: 10px;
    position: relative;
    top: -175px;
    z-index: 1000;
}

We will need to position the post content also, but this we will do, when the code above works and you are satisfied with the solution.

Cheers!
Günter

February 23, 2015 at 9:23 pm #401001

Gunter, thank you very much for trying to find a solution!

I actually tried what you said, but had some hick-ups (I am not a coder :) ). Ether way I thought about it, and i really don’t want to do some super special modification and brake the design, since i may have problem in the future because of this.

So thank you again! I learned a lot.

Please consider this issue solved.

P.S.: Awesome support!

February 24, 2015 at 10:47 am #401273