XF 2.2 Make simple banner image responsive

[and2]

Good morning,

I inherited a forum which I am now modernizing which includes a banner of sponsors of the forum.

At the moment, the 3x3 banner matrix is display in the simplest of ways via the advertising function as follow:

<div class="forenpartner">
    <a href="https://www.xyz.com">
        <img src="/community/data/assets/forenpartner/xyz.jpg" width="300px">
    </a>
    <a href="https://www.xyz.com">
        <img src="/community/data/assets/forenpartner/xyz.jpg" width="300px">
    </a>
    <a href="https://www.xyz.com">
        <img src="/community/data/assets/forenpartner/xyz.jpg" width="300px">
    </a>
<br>
    <a href="https://www.xyz.com">
        <img src="/community/data/assets/forenpartner/xyz.jpg" width="300px">
    </a>
    <a href="https://www.xyz.com">
        <img src="/community/data/assets/forenpartner/xyz.jpg" width="300px">
    </a>
    <a href="https://www.xyz.com">
        <img src="/community/data/assets/forenpartner/xyz.jpg" width="300px">
    </a>
<br>
    <a href="https://www.xyz.com">
        <img src="/community/data/assets/forenpartner/xyz.jpg" width="300px">
    </a>
    <a href="https://www.xyz.com">
        <img src="/community/data/assets/forenpartner/xyz.jpg" width="300px">
    </a>
    <a href="https://www.xyz.com">
        <img src="/community/data/assets/forenpartner/xyz.jpg" width="300px">
    </a>
</div>

Now I am wondering: what would be the easiest way to make this responsive?

I know that there are add-ons out there, but I want to avoid addons as much as possible. Basically, my idea would be to use the media size directives to scale the image-widths accordingly.

I thought about templates but this seems overly complex. I could also create custom CSS for this but this seems to be redundant and a potential root cause for maintenance errors.

So I am wondering, what would be the easiest, cleanest and simplest way to achieve this?

Thank you
Andreas

 

[Paul B]

You may want to change your approach.

Currently you are displaying 9 images in a 3x3 block - if they scale up when on a large screen - they're going to take up a lot of vertical space, just as they do on a narrow screen where they are currently displayed stacked 9 high.

Pushing content that far down the page, especially on mobile, is not ideal.

 

[and2]

Hi @Brogan , thanks for your quick reply.

The banner are only 50px tall and 300px width each and the placement is paid for, so I cannot change that at the moment.

What I do want to change is that I scale down the width and heigth according to media type, that is why I asked my question - because yes, on the mobile they are pushed down and it does not look good

Thanks
Andreas

 

[Paul B]

So you want the 9x9 block to remain the same at all widths?
The images will be unreadable.

However, if you really want to do that then currently all of the images have hard coded widths and heights.

You will need to rewrite the code used to display them and assign a class, which you can then use in the extra.less template to apply the appropriate styling.

 

[and2]

Let's ignore the 9x9 block, basically I want to change the dimensions of the images depending on the viewport - and I am not sure if I can do this simply by using template syntax or if I need to modify any .less stuff

 

[and2]

So, after spending a few hours searching through the internet, I found the solution myself.

In the Ads, just put the HTML as so:

<div class="forenpartner">
    <a href="https://www.xyz.com"><img src="/community/data/assets/forenpartner/xyz.jpg">
    </a>
    <a href="https://www.xyz.com"><img src="/community/data/assets/forenpartner/xyz.jpg">
    </a>
    <a href="https://www.xyz.com"><img src="/community/data/assets/forenpartner/xyz.jpg">
    </a>
.....
</div>

And in the extra.less, put your CSS, making sure that you use .less syntax:

@media (max-width: @xf-responsiveWide)
{
        .forenpartner img {
        height: 69px;
        width: 300px;
        }
}

@media (max-width: @xf-responsiveMedium)
{
        .forenpartner img {
        height: 49px;
        width: 215px;
        }
}

@media (max-width: @xf-responsiveNarrow)
{
        .forenpartner img {
        height: 37px;
        width: 160px;
        }
}

I hope that helps other people in the future, not sure why this was hard to answer though

Andreas

 

[Paul B]

not sure why this was hard to answer though

It wasn't - I already answered it several days ago.

You will need to rewrite the code used to display them and assign a class, which you can then use in the extra.less template to apply the appropriate styling.