-
Posts
-
Alas I’m chasing shiny new objects again :)
Is it possible to embed an image (or images) into the body of a blog post where the image spans the full width of the browser?
Something like this example (scroll down until you see the full width image embedded in the post):
http://ness.cubellthemes.com/travels/full-screen-images-in-post/
Perhaps a shortcode? Or “easy button” :)
Hey!
Try adding this at the very end of your theme functions.php file:
add_filter('avf_builder_boxes','enable_boxes_on_posts'); function enable_boxes_on_posts($boxes) { $boxes[] = array( 'title' =>__('Avia Layout Builder','avia_framework' ), 'id'=>'avia_builder', 'page'=>array('page','post', 'portfolio'), 'context'=>'normal', 'expandable'=>true ); $boxes[] = array( 'title' =>__('Layout','avia_framework' ), 'id'=>'layout', 'page'=>array('page','post', 'portfolio'), 'context'=>'side', 'priority'=>'low'); $boxes[] = array( 'title' =>__('Additional Portfolio Settings','avia_framework' ), 'id'=>'preview', 'page'=>array('page','post','portfolio'), 'context'=>'normal', 'priority'=>'high' ); return $boxes; }That will activate the Advanced Layout Builder for Posts, that way you can insert fullwidth elements like a Color Section.
Cheers!
JosueI’ll give this a try. Thanks!
I did find a plugin that does something similar called WP Canvas Shortcodes. I haven’t thoroughly tested but so far it works with the full width images and videos within posts.
Which now leads to another thing… I would love for the featured image or video have the option to span the full width of the browser window, too.
Hey!
Try adding this code to the Quick CSS:
.template-single-blog main.content.units.twelve.alpha article .big-preview.single-big, .template-single-blog main.content.units.twelve.alpha article , .template-single-blog main.content.units.twelve.alpha, .template-single-blog { width: 100% !important; } .template-single-blog main.content.units.twelve.alpha article > *, .template-single-blog main.content.units.twelve.alpha > * { width: 1030px; margin: 0 auto; float: none; } .template-single-blog .content { padding-top: 0; }Cheers!
JosueThanks, unfortunately the featured image does not break of the blog post content area and go full width.
I was able to get the advance layout editor to work in a blog post, but that breaks all the usual blog post stuff like the heading, author, date, etc. It’s a cool trick though that may be useful in some circumstances.
Thanks again for the top notch support. I really do appreciate the help and suggestions. I realize I’m pushing things into the experimental realm.
Hi!
After adding that code the single posts should look like this – http://screencast.com/t/KiYoSoahYDt
Try purging any caching/minification plugin you may have activated.
Cheers!
JosueSorry for the delay in getting back to you on this… yes, I got it to work. Nice!
Thank you for your help.
Hey!
Modify the code to this:
.template-single-blog main.content.units.twelve.alpha article .big-preview.single-big, .template-single-blog main.content.units.twelve.alpha article, .template-single-blog main.content.units.twelve.alpha, .template-single-blog { width: 100% !important; max-width: initial !important; padding: 0; } .template-single-blog main.content.units.twelve.alpha article > *, .template-single-blog main.content.units.twelve.alpha > * { width: 1030px; margin: 0 auto; float: none; } .template-single-blog .content { padding-top: 0; }Best regards,
JosueThanks, Josue. That partially worked. Unfortunately it causes the comments to spread out and fill the browser width.
I would really like to have a checkbox in the Enfold config area to control the feature image (full width, image full height, etc.).
It would be nice to be able to also add full width images in the body of the post without having to hack the theme.
Thanks!
Hey!
Add this too:
.comment_meta_container, .comment_container { max-width: 1130px !important; margin: 0 auto; padding: 0 20px; }Feel free to request this as a new feature here:
https://kriesi.at/support/enfold-feature-requests/Best regards,
Josue
- You must be logged in to reply to this topic.