푸터 섹션에 로고 추가

개발
1

안녕하세요,
제가 관리하는 포럼(https://fspm.discourse.group)을 후원하는 대학들의 로고를 추가하고 싶습니다.

하단에 로고를 추가하는 것은 성공했지만, 다음과 같은 방식으로 표시하고 싶습니다:

  • 각 로고에 링크를 연결
  • 로고 간 간격 설정
  • 어떤 이유로든 비율이 변경된 괴팅겐(Göttingen) 로고의 원래 비율 유지

footer에 다음 코드를 작성했습니다:

<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

음, http:// 대신 https://를 사용해 볼까요? 하지만 그건 작동해야 할 것 같은데 :thinking:

5

정답이지만, CSS도 조정해야 할 수 있습니다:

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

Lilly가 말한 대로 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

음, 확인해 봤는데 개발 도구를 사용하면 링크가 작동하도록 만들 수 있었습니다. 하지만 코드를 적용하면 어떤 이유에서인지 이미지 크기가 변합니다. 하지만 제가 이전 게시물에서 드린 코드를 사용해서 푸터 코드에 넣으면 작동할 것입니다. 그 CSS 코드, div 클래스를 포함해서 제거하세요. CSS 부분을 제거한 후에는 제가 드린 코드를 복사해서 EDIT CSS/HTML 섹션의 푸터 부분에 붙여넣기만 하면 됩니다.

테마 구성 요소로 이동하세요(아니면 제가 그랬듯이 새 구성 요소를 만드는 것이 좋습니다):

IMG_3470
IMG_34701132×1441 123 KB

다음과 같이 CSS 탭과 푸터 탭 섹션에 이 정확한 코드를 붙여넣으세요:

CSS 탭:

.footer_align {
    display: flex;
    justify-content: center;
}

푸터 탭:

<div class="footer_align">
    <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>
</div>

IMG_3477
IMG_34771536×785 129 KB

IMG_3479
IMG_34791536×999 258 KB

이것이 제 포럼에서의 결과입니다. 각 이미지가 올바른 URL로 링크되는지 독립적으로 확인했습니다:

IMG_3468
IMG_34682048×814 207 KB

더 작게 만들려면 각 이미지의 width="300"를 더 작은 값으로 수정하면 됩니다. 간격을 두고 싶다면 링크된 이미지 HTML 코드 사이에 HTML 비공백 &nbsp;을 사용할 수 있습니다.

18

폐기된 HTML 태그는 피하고, text-align: center; 속성을 가진 <div>로 대체하는 것을 권장합니다. :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