Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #478028

    Hi-
    I have a masonry portfolio grid in a page that has the title and excerpt always showing. I would like them to show underneath the featured image for that portfolio piece instead of overlaying on top of the image. I couldn’t find it as a setting? Or can I achieve it with css?
    Thanks!
    -D

    #478775

    Hi jollyrogerd!

    May we have a screenshot of the overlaying issue?

    Cheers!
    Dake

    #478792

    Hi Dake-
    Here is a screenshot: https://www.dropbox.com/s/c6s48kq8u9rc6fc/Screen%20Shot%202015-07-26%20at%2012.21.15%20PM.png?dl=0
    Ideally, I would like to have the image as a 4:3 rectangle and then the title and excerpt below it.
    Thanks!
    -D

    #478800

    Hi!

    I’m still not sure what the actual issue is.

    The title and excerpt are below the image, but the rectangle is more along the lines of 4:2.

    http://i.imgur.com/BicJEAi.png

    Do you only want to adjust the width and height of the preview image?

    If so then you can try using the “Flexible Masonry” or “Perfect Automatic Masonry” options.

    Regards,
    Dake

    #491569

    In for the follow.

    Dake, if I am not mistaken, he would like to have the FULL image and then below it, the title. As the theme sits now, the title is shown on top of the image – whether you set it as hover or not. Simply select “Display Neither” as the “Element Title and Excerpt” and you’ll see what we mean.

    My question, not to hijack the thread, is, can a format such as here – http://www.morganstanley.com/ – be achieved with the theme? For starters, how can I place the title/content below the image and wrap the image/content with a border?

    Thanks!

    • This reply was modified 9 years, 3 months ago by Eagles1227.
    #491994

    Hi!

    Yes, it is possible but it will require major code rewrite. You need to modify the config-templatebuilder > avia-shortcodes > portfolio.php file and then add custom css modifications. Look for this code:

    $extraClass .= ' default_av_fullwidth ';
    
                        $output .= "<div data-ajax-id='{$the_id}' class=' grid-entry flex_column isotope-item all_sort {$style_class} {$post_class} {$sort_class} {$grid} {$extraClass}'>";
                        $output .= "<article class='main_color inner-entry' ".avia_markup_helper(array('context' => 'entry','echo'=>false, 'id'=>$the_id, 'custom_markup'=>$custom_markup)).">";
                        $output .= apply_filters('avf_portfolio_extra', "", $entry);
                        $output .= "<".$link_markup[0]." data-rel='grid-".avia_post_grid::$grid."' class='grid-image avia-hover-fx'>".$custom_overlay.get_the_post_thumbnail( $the_id, $image_size, $image_attrs )."</".$link_markup[1].">";
                        $output .= !empty($title) || !empty($excerpt) ? "<div class='grid-content'><div class='avia-arrow'></div>" : '';
    
                        if(!empty($title))
                        {
                            $markup = avia_markup_helper(array('context' => 'entry_title','echo'=>false, 'id'=>$the_id, 'custom_markup'=>$custom_markup));
                            $output .= '<header class="entry-content-header">';
                            $output .= "<h3 class='grid-entry-title entry-title' $markup>";
                            
                            if(!empty($title_link))
                            {
                            	$output .= "<a href='{$title_link}' title='".esc_attr(strip_tags($title))."'>".$title."</a>";
                            }
                            else
                            {
                            	$output .= "".$title."";
                            }
                            
                            $output .= '</h3></header>';
                        }
                        $output .= !empty($excerpt) ? "<div class='grid-entry-excerpt entry-content' ".avia_markup_helper(array('context'=>'entry_content','echo'=>false, 'id'=>$the_id, 'custom_markup'=>$custom_markup)).">".$excerpt."</div>" : '';
                        $output .= !empty($title) || !empty($excerpt) ? "</div>" : '';
                        $output .= '<footer class="entry-footer"></footer>';
                        $output .= "</article>";
                        $output .= "</div>";

    You can re-arrange the elements.

    Best regards,
    Ismael

    #507450

    Hi-
    I am finally circling back on this. What I ended up doing was changing from perfect grid to flexible masonry and then the thumbnails and text below it looked great. I have since added a bunch of entries and have run into the problem of sorting. It seems like with the flexible masonry it is running in a snake like pattern, line 1 left to right, line 2 right to left, line 3 left to right. Is this normal? Is there a way for all the lines to run left to right?
    Thanks!

    #507857

    Hey!

    not sure what you are trying to achieve. I checked your website and could not see any issues. Could you show us an example or a screenshot showing what you want?

    Best regards,
    Andy

    #508064

    Hi-
    It seems like with the flexible masonry the order is going in more of a snake pattern instead of a strict left to right. I need a left to right, line by line post sorting. More details in the private content.
    Thanks!

    #508084

    A little more info… I just added a few more portfolio posts that made a third line. It too is running right to left, instead of left to right so the only correct line is the first…
    Thanks!
    -D

    #508745

    It had to do with the featured image sizes, they were almost all the same but off a few pixels here and there. I resized everything to the same size/proportion and added them as featured images. It fixed the issue.
    Thanks!
    -D

    #509473

    Hi!

    glad you could fix it! Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Cheers!
    Andy

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Masonry Portfolio Title Underneath the Images’ is closed to new replies.