Add a background image to Emporio

Emporio currently doesn't have support for a background image, though it does have a background image variable. Very similar to the instructions for making the Simple theme's background responsive, the following gadget will change that.
  • Click the button below, and add the gadget.
  • Head to Theme => Customize => Background
  • Select a background, apply, view the blog.

NOTE: Changes won't show up in the Template designer/customizer, but hitting apply will set the background!


The gadget contains the following custom markup.
<b:includable id='main'>
  <style>
    /* Hide this gadget. */
    #<data:widget.instanceId /> { display: none; }
  </style>
  <b:if cond='data:skin.vars.body_background.image'>
    <b:include name='responsiveImageStyle'
               cond='not data:view.isPreview'
               data='{
                       image: data:skin.vars.body_background.image,
                       selector: ".page_body"
                     }' />
  </b:if>
</b:includable>


Note that the selector can be adapted to suit the way that your template's skin defines the background (e.g. in this template, the selector is ".bg_photo" instead.)

Happy templating!

Comments

  1. Anonymous24 March 2017 at 02:53

    Hello is there any way to prevent this?
    http://i.imgur.com/rMd5rMN.png

    ReplyDelete
    Replies
    1. Luke25 March 2017 at 18:10

      You'd need some custom CSS, maybe something like
      .page_body { background-size: cover; background-position: fixed; }
      (Add it at Theme => Customize => Advanced => Add CSS)

      Note that those styles might need to me marked !important to take precedence.

      Hope that helps.

      Delete
  2. TMBA (TradeMarked BadAss) Corbett 11 April 2017 at 09:58

    Thank you this helped me add the background I want but I am having issues with the columns on the Emporio theme. Could you help me on that: https://productforums.google.com/forum/#!topic/blogger/sJrrYoQQ-io

    ReplyDelete
    Replies
    1. TMBA (TradeMarked BadAss) Corbett 11 April 2017 at 09:59

      Also do you know how to change the image on the individual post page. THe emporio theme seems to use the image from the post but I would like it to use one image I choose for all posts.

      Delete
  3. lukman11 April 2017 at 23:22

    I loved emporio template, the new theme from blogspot

    Can you give us tutorial for edit this template because new template codes is more difficult for me than the old one. Example : I wanna create page and show my label of content, or add adsense on the bottom of article. For me it's hard.

    Can you help me to customize, or give pdf tutorial or video like http://www.truthinshredding.com/.

    I'm sorry if i put address, but that was not mine. surely.

    My new site is http://sketsaka.blogspot.co.id/, but can't customize like the first one.

    ReplyDelete
  4. Unknown19 June 2017 at 19:32

    Nice tutorial. but i need to remove the image on the top head of every post. like when you click a post, the image will appear at top. take a look and check here http://www.talkonpoints.com

    ReplyDelete
  5. Unknown31 July 2017 at 11:48

    Am not getting how to change my background photo on emperio template with custom image

    The custom image I uploaded is blur

    My blog @ Science'n'Tech Blog

    ReplyDelete

Post a Comment

Popular posts from this blog

Rotate my Blogger images

Image
Blogger-uploaded images can be rotated by modifying the url to include '-r90' (or 180, or 270). Take, for example, the image below. URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWVgBklYsvkxN7xwRlHuU8XWHdJTW7kpjJcEzMo2lD65tV4vwXuwHnPa3eiXZqUfpkdAYJMaTaPXO9RiEl1XY_tEfHWBEmBmnppNqP6_SovKyOe8gLd9-09TimKKdDZpIuMrjiPvg5hrOI/ s200 /IMG_2358.JPG If we switch the s200 to s200-r90 , we get the following image instead. URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcVtM8EBB40qw43B0tA7X6wiErlfRxG3YDKqPPKluXQzFSghY5bjSw312509fa6BHCQjcUDevY4L194LL7n5lImmia7zBVfYohxezEJq1bdxRx_CCOyL06w0rQS9Rb2RkjpLVpIx3PjnGy/ s200-r90 /IMG_2358.JPG Happy rotating!
Read more

Remove the header image for posts in Emporio

The new Emporio template features a large, blurred-out copy of the featured image for a post as the header image. Some like this feature, some don't - here's how to remove it if you're not a fan! Head to Theme => Edit HTML Search for ' data:view.isSingleItem ' The code that you see should look something like this:  <b:if cond='data:view.isSingleItem'> <b:if cond='data:widgets.Blog.first.posts.first.featuredImage'> <b:include data='{ image: data:widgets.Blog.first.posts.first.featuredImage, selector: &quot;.bg-photo&quot; }' name='responsiveImageStyle'/> <div class='bg-photo-container'> <div class='bg-photo'/> </div> </b:if> </b:if> Delete the XML including the <b:if> tag code. Happy Emporio'ing!
Read more

Get nicer thumbnails for my Post snippets

I recently received some feedback that my thumbnails are a bit nicer than the standard thumbnails offered by Blogger. This is because I use a custom snippet in my Blog widget, to produce bigger thumbnails, using the new resizeImage operator . Note: This post leverages the techniques described in the article about  Responsive images for Google photos . A note: The resizing behaviour provided on Blogger requires that the image is hosted on a Google platform to work - provided that you add your images by uploading them in the editor, this technique should work. Creating a responsive, resized Thumbnail The resize operator takes 3 parameters - the URL of the image, the width to resize it to, and an optional ratio for a cropped version of the image. <img expr:src=’resizeImage(data:post.firstImageUrl, 300)’ /> In my Blog widget, I've customized the HTML so that on feed views (homepage, search, etc), I display post snippets instead of the full post. As a part of thes...
Read more