Using LoopBuddy To Show a Page’s Featured Image In a Widget

Output:

Screen Shot 2013-04-04 at 2.23.17 PM

1)

LoopBuddy Query Editor ‹ iThemes Builder Test Site — WordPress

2)

Edit Page ‹ iThemes Builder Test Site — WordPress

3)

In Fondation Blank’s functions.php:

add_image_size('front-page-thumbnail', 281, 179, true);

add_theme_support( 'builder-full-width-modules' );

4)

LoopBuddy Layout Editor ‹ iThemes Builder Test Site — WordPress

Screen Shot 2013-04-04 at 2.11.40 PM

Screen Shot 2013-04-04 at 2.11.50 PM

5)

Widgets   Default ‹ iThemes Builder Test Site — WordPress

6)

Add the following at the end of child theme’s style.css (WP dashboard -> Appearance -> Editor):

#builder-module-514372ec66190 .widget {
 background: none;
 position: relative;
 padding: 5px;
 margin-left: 3%;
}

img.attachment-front-page-thumbnail {
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 background: url("http://f.cl.ly/items/242h172S0V200R2w223i/Image%202013.04.04%202:24:49%20PM.png");
 border: 1px solid #DDD;
}

/*#builder-module-514372ec66190 h4.widget-title,*/
.widget-image-title {
 font-family: 'Open Sans', sans-serif;
 background: #65B573 url("http://f.cl.ly/items/1x3T0O1x1t2u22133d2v/Image%202013.04.04%202:25:43%20PM.png");
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.24);
 color: #FFF;
 text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.2);
 position: absolute;
 bottom: 18%;
 font-size: 1.1em;
 line-height: 1.2em;
 left: -1px;
 max-width: 70%;
 padding: 11px 13px 11px 23px;
 margin: 0 !important;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
}

.builder-module-sidebar .widget .widget-image-title a {
 color: #FFF;
 font-weight: bold;
}

#builder-module-514372ec66190-outer-wrapper,
#builder-module-514372ec66190,
#builder-module-514372ec66190 .builder-module-block-outer-wrapper {
 overflow: visible !important;
}