XF 2.2 What is the proper way to add banners to nodes?

[RichDevman]

I am talking about the example below. I have this coded without using exact dimensions so that the theme stays reflexive. The problem is that this causes a cls issue for Google. How can I add dimensions but keep this reflexive?

 

[Old Nick]

Are max-width and max-height can solve this issue ? You keep the responsiveness and GG get its dimensions.

 

[RichDevman]

Thanks

Can I do this but have the % for the max width and the dimension for the width?

width="100%" style="max-width:728px; height:auto; max-height:90px;

So like this?

width="728px" style="max-width:100%; height:auto; max-height:90px;

 

[bzcomputers]

Be aware a wide banner like that even when set to responsive sizing will never look good on a small screen. You should look into either displaying a completely different image or no image at all for a small screen size in this instance. This can be done through css media queries.

 

[Old Nick]

why not style="max-width:728px; max-height:90px;" only ? by default and without contraindication it seems to me that the image will take up all the space granted to it within the limits of its own dimensions.
The question is: does GG consider max-width and height as dimensions or as properties ?

 

[RichDevman]

Be aware a wide banner like that even when set to responsive sizing will never look good on a small screen. You should look into either displaying a completely different image or no image at all for a small screen size in this instance. This can be done through css media queries.

They do not show up on mobile. They are good for everything else.

 

[RichDevman]

Be aware a wide banner like that even when set to responsive sizing will never look good on a small screen. You should look into either displaying a completely different image or no image at all for a small screen size in this instance. This can be done through css media queries.

Can you explain this for me? I would like to remove these banners from mobile. They are gifs and are slowing load times down. Thanks

 

[Old Nick]

@media (max-width: 650px) {
    .your-container {
        display: none;
    }
}

 

[Old Nick]

650px corresponds to the portrait mode in smartphone.
900 px to the landscape mode in a smartphone, so you can decide if its better to choose 650 or 900px for your case.

Or use the XF syntax

@media (max-width: @xf-responsiveWide)
{
    /* CSS for Wide Width Screens Here */
}

@media (max-width: @xf-responsiveMedium)
{
    /* CSS for Medium Width Screens Here */
}

@media (max-width: @xf-responsiveNarrow)
{
    /* CSS for Narrow Width Screens Here */
}

 

[RichDevman]

650px corresponds to the portrait mode in smartphone.
900 px to the landscape mode in a smartphone, so you can decide if its better to choose 650 or 900px for your case.

Or use the XF syntax

@media (max-width: @xf-responsiveWide)
{
    /* CSS for Wide Width Screens Here */
}

@media (max-width: @xf-responsiveMedium)
{
    /* CSS for Medium Width Screens Here */
}

@media (max-width: @xf-responsiveNarrow)
{
    /* CSS for Narrow Width Screens Here */
}

Thanks! I really appreciate it!

 

[Mr Lucky]

They are gifs and are slowing load times down.

Have you experiment with other formats for the images or 8 bit and lower color gifs. In your example you could get away with very few Colors.

 

[RichDevman]

Have you experiment with other formats for the images or 8 bit and lower color gifs. In your example you could get away with very few Colors.

I have optimized them but there are a bunch. I thought about using mp4 but never figured out how to get it to work.

 

[Russ]

@Richieboy67 aren't you using @Siropu 's ad manager? I believe you can set height/width values in the ad settings and also control whether or not they show on mobile.

 

[RichDevman]

@Richieboy67 aren't you using @Siropu 's ad manager? I believe you can set height/width values in the ad settings and also control whether or not they show on mobile.

I do use it but I never could figure out how to use it for banners in nodes.