Добавление логотипов в нижний колонтитул

Разработка
1

Привет,
Я хотел бы добавить логотипы университетов, поддерживающих форум, которым я управляю: https://fspm.discourse.group

Как вы можете видеть внизу, мне удалось их добавить, однако я хотел бы:

  • добавить ссылку на каждый логотип
  • добавить отступы между ними
  • сохранить оригинальные пропорции логотипа Гёттингена, который по какой-то причине был изменён

Я написал это в футере:

<div class="custom-footer-image">
    <img src="upload://3lfj0glW4Qjc2cMHAC7dBVglghP.png" alt="Footer Image">
    
    <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
    
    <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" />
</div>

а это в CSS:

.custom-footer-image {
    display: flex;
    justify-content: center;
    
    img {
        max-width: 30%;
    }
}
2

Попробуйте этот CSS:

.custom-footer-image {
    display: flex;
    justify-content: center;
    align-items: center; 
    gap: 1rem;
    
    img {
        max-width: 30%;
        height: 100%;
    }
}

Вы можете добавить ссылку следующим образом: <a href="https://..."><img... /></a>

3

CSS-трюк работает, спасибо!
Ссылку я всё ещё не могу настроить.

Я пробовал следующее в футере, но это не сработало… (я тестирую на третьем логотипе)

<div class="custom-footer-image">
    <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" />
    
    <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
    
    <a href="http://algorithmicbotany.org/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image"></a>
</div>
4

Хм, может, попробовать https:// вместо http://? Хотя, казалось бы, это должно работать :thinking:

5

Это правильно, но, возможно, вам также потребуется откорректировать CSS:

.custom-footer-image {
    display: flex;
    justify-content: center;
    align-items: center; 
    gap: 1rem;
    
    a {
        max-width: 30%;
        height: 100%;
    }
}

Убедитесь, что используете https, как указала Лилли, и измените первые две ссылки:

<div class="custom-footer-image">
    <a href="https://" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" />
    </a>

    <a href="https://" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
    </a>
    
    <a href="https://algorithmicbotany.org/" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" />
    </a>
</div>
6

Я вставил следующее, и теперь исчезли даже логотипы:

<div class="custom-footer-image">
    <a href="https://www.wur.nl/en.htm" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" />
    </a>

    <a href="https://www.uni-goettingen.de/en/1.html" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
    </a>
    
    <a href="https://algorithmicbotany.org/" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" />
    </a>
</div>

.custom-footer-image {
    display: flex;
    justify-content: center;
    align-content: center; 
    gap: 1rem;
    
    a {
        max-width: 30%;
        height: 100%;
    }
}
7

Почему в конце ваших HTML-тегов изображений есть пробелы и обратные слеши?

8

Вы имеете в виду в конце каждой строки, где вызываются логотипы? Я не совсем уверен — я просто скопировал и вставил код у других.

9

Ваш HTML корректен.

<div class="custom-footer-image">
    <a href="https://www.wur.nl/en.htm" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" />
    </a>

    <a href="https://www.uni-goettingen.de/en/1.html" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
    </a>
    
    <a href="https://algorithmicbotany.org/" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" />
    </a>
</div>

Попробуйте вместо этого использовать следующий CSS:

.custom-footer-image {
    display: flex;
    justify-content: center;
    align-items: center; 
    flex-wrap: wrap;
    gap: 2rem;

    a {
        width: max(20vw, 220px);
        
        img {
            width: 100%;
        }
    }
}

image
image1700×385 88.6 KB

image
image620×389 43.1 KB

10

Этот код сработал у меня, я только что его протестировал.

.custom-footer-image {
    display: flex;
    justify-content: center;
    align-content: center; 
    gap: 2rem;
    
    img {
        max-width: 20%;
        height: 100%;
    }
}

<div class="custom-footer-image">
    <a href="https://www.wur.nl/en.htm" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" />
    </a>

    <a href="https://www.uni-goettingen.de/en/1.html" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" />
    </a>
    
    <a href="https://algorithmicbotany.org/" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" />
    </a>
</div>

но вам придётся самостоятельно разобраться с размером изображений.

11

Не уверен, связано ли это с тем, что вы используете другую тему, но CSS для изображений выглядит не очень хорошо. :thinking:

что я вижу

image
image761×328 26 KB

12

Честно говоря, мне не очень нравится, как это выглядит :grin:

Должен же быть лучший способ сделать это… :thinking:

13

Интересно, почему вы выбрали этот путь, вместо того чтобы просто разместить HTML в секции футера темы?

Я разместил это в секции Footer пустой темы, и всё работало отлично.

РЕДАКТИРОВАТЬ CSS/HTML Футер:

    <center><a href="https://www.wur.nl/en.htm" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" width=300>
    </a>

    <a href="https://www.uni-goettingen.de/en/1.html" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" width=300>
    </a>
    
    <a href="https://algorithmicbotany.org/" target="_blank">
        <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" width=300>
    </a></center>
14

Извините, но у меня ничего не работает… Я считаю, что ваши решения работают, так что, видимо, я что-то делаю неправильно.
Я буквально копирую и вставляю код в раздел компонента либо в футер (HTML-код), либо в раздел CSS. И это работало отлично для базового решения без ссылок…

Я также пытался изменить раздел футера темы по совету @Lilly, но у меня это тоже не сработало…

15

Ваш форум — это ссылка в вашем профиле? Я хочу заглянуть.

16

да, это так!

17

Хорошо, я посмотрел и смог заставить ссылки работать в инструментах разработчика. Но при применении кода по какой-то причине меняются размеры изображений. Однако, если вы используете код, который я дал в своём последнем посте, и вставите его в код вашего подвала (footer), всё должно заработать. Я бы удалил тот CSS-код, включая класс div. После удаления всего CSS просто скопируйте и вставьте код, который я дал, в раздел подвала (footer) в секции «Редактировать CSS/HTML».\n\nПерейдите к компоненту вашей темы (или, что лучше, создайте новый, как сделал я):\n\n

IMG_3470
IMG_34701132×1441 123 KB
\n\nВставьте этот точный код в секции вкладок CSS и подвала следующим образом:\n\nВкладка CSS:\nscss\n.footer_align {\n display: flex;\n justify-content: center;\n}\n\n\nВкладка Подвал (Footer):\nhtml\n<div class="footer_align">\n <a href="https://www.wur.nl/en.htm" target="_blank">\n <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" width="300">\n </a> \n <a href="https://www.uni-goettingen.de/en/1.html" target="_blank">\n <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" width="300">\n </a> \n <a href="https://algorithmicbotany.org/" target="_blank">\n <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" width="300">\n </a>\n</div>\n\n\n
IMG_3477
IMG_34771536×785 129 KB
\n\n
IMG_3479
IMG_34791536×999 258 KB
\n\nВот результат на моём форуме. Я также независимо проверил, что каждое изображение ведёт на правильный URL:\n\n
IMG_3468
IMG_34682048×814 207 KB
\n\nЕсли вы хотите сделать их меньше, просто измените width=“300” для каждого изображения на меньшее значение. Если нужно добавить пространство между ними, вы можете использовать HTML-символ неразрывного пробела &nbsp; между HTML-кодом ссылок на изображения.

18

Я бы посоветовал избегать устаревших HTML-тегов и заменить их на <div> со свойством text-align: center;. :slight_smile:

19

Да, я просто пытался сделать всё максимально просто, без CSS, чтобы это работало на его сайте. Хотя я согласен, обновил свой пост. Спасибо. :slight_smile:

20

Хорошо, я попробовал, но, кажется, есть проблема с масштабированием до нужного размера.
Изображения отображаются только в определённом размере — он слишком мал. Если я пытаюсь установить больший размер, изображения исчезают

Screenshot 2023-06-07 at 18.50.31
Screenshot 2023-06-07 at 18.50.312292×842 88.7 KB

Screenshot 2023-06-07 at 18.50.37
Screenshot 2023-06-07 at 18.50.372290×818 38.1 KB

Screenshot 2023-06-07 at 18.50.56
Screenshot 2023-06-07 at 18.50.562724×1352 164 KB