Using Another Image For Mobile Version Of Your Template?


#1

I want to use a different header image for my blogger´s mobile version because at the moment it is using the image that is shown in web version.

I´ve been looking for a solution but no one seems to explain it correctly.I tried to add some html but it didn´t work.

Please help,I´m very desperate!!

:sweat:


#2

Right after the </head> tag add or make sure the body tag looks like this - <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> then you can change the header background(?) by using .moblie in front of the element you want to change. It might look something like

#header-wrapper {
background: url('your-web-background-image.jpg');
}

for the mobile version use this

.mobile #header-wrapper {
background: url('your-mobile-background-image.jpg');
}

Hope this helps! :slight_smile:


#3

Thanks a lot , but i ´m talking about the header image ,not the backround. I tried something like the following but it didn´t work:

Using Another Image For Mobile Version Of Your Template

Sometimes the header image for the desktop is not appropriate for mobile version of your site. In this case we can use the alternative image by referring to its custom URL. We do this by replacing code from line 5 to be something like this:

1

Replace:

YOUR_URL with the URL of your image. You will need to upload your mobile image somewhere on the web. You can use Google Picasa for this. IMAGE_ HEIGHT with your image height. For example, if height is 400px, then the code would be min-height:400px;_height:400px; If the image is not shown properly, modify the CSS background properties to fix them. If you are not familiar with them, check this article for basics information and for more comprehensive tutorial, check here.


#4

Hi Pablo,

You probably put the header image in on the Layout Page and chose “Instead of title and description”? I could do it for you but to write a tutorial would take all day. I made a mock up if you want to see and this is what you mean. The pink and blue writing are just images, no real text. Here’s the web version and here’s the mobile version.


#5

Thanks alot but i would like you to see if the part at the bottom of this tutorial is tru .Right where it says “Using Another Image For Mobile Version Of Your Template” :


#6

That’s pretty close! That bottom part of the tutorial does not tell you how to call one for desktop and one for mobile. It would show the same image in both.

Here’s the really good news Pablo! You’ve been on here enough to put a link here, yay! I’m really glad you want to do it yourself too as that is way more satisfying than having someone do it for you. Please put a link to your blog or even make a tester blog like I did above so we can see what you’re working with. Please post links to both images too! That would help a lot.

If just basic how to call the different layouts would help, you would use conditional tags.

<b:if cond='data:blog.isMobile == &quot;false&quot;'>
<div id='header-inner'>
what you want for desktop code would be here
</div>
</b:if>

<b:if cond='data:blog.isMobile'>
<div id='header-inner'>
what you want for mobile code would be here
</div>
</b:if>

:slight_smile:


#10

Sorry for answering back this late,my computer broke. Thanks a lot! That last part is very useful,but i have tried to search with no results part of the code using ctrl+f and typing : <b:if cond=‘data:blog.isMobile == “false”’>

It doesn´t find that piece of code thus i don´t know where to use that formula you gave me.What you said is very very close to the resolution of my problem,i just need to know where to place the piece of code in case it is me the one who has to insert it. It would be awesome and incredibly helpful if you could please solve this last problem

#11

Hi Pablo! I am sorry for taking so much time to get back too. Been very busy

I need a link to your blog because code is different depending on who wrote it. I am pretty sure I can help but I do not have enough information at this time.


#13

This topic is temporarily closed for 4 hours due to a large number of community flags.


#14

This topic was automatically opened after 4 hours.