Hello, I need someone’s help…
I’m trying it by referring to other examples, but I can’t solve it myself.
On the main screen of my website, there are 4 logos and each image is used as a background image when the user ‘hover’ the logo.
So I made 4 image sections in Kirby and tried to bring up each image. It’s okay to bring up the image. But there was an error. (Please check the capture image.)
Could you post the blueprint please? I wonder where all the img tags with the empty src attributes are coming from. Shouldn’t there be only one image per per li element? In that case the foreach loop should be around the li tags rather than inside, but I need to understand the complete structure of your setup.
I’m sorry. The code is too long, so I only wrote the code for the first logo.
I’ll write down the full code. Four logos are not created by copying one logo.
Hm, I’m a bit confused. Because your logos seem to be added manually but then your are obviously trying to get images from the children of the photography page, but from some reason the number of images and the number of logos do not align.
The loop through the children of the photography page doesn’t seem to make sense and I don’t really understand how they relate to the logos.
Each of the 4 logos should have one background image. It’s too hard for me…
I changed the image registered on each page to the main page, but ‘DY’ succeeded in importing the image, but the other three couldn’t even bring the image even if I entered the same code. http://client.1-2-3-4-5.studio/dy/kr
<?php
class HomePage extends Page
{
public function bgimage()
{
return $this->content()->get('bgimage')->toFile() ?? $this->image();
}
public function cover()
{
return $this->content()->get('cover')->toFile() ?? $this->image();
}
public function covers()
{
return $this->content()->cover()->toFile() ?? $this->image();
}
public function dycovers()
{
return $this->content()->get('dycovers')->toFile() ?? $this->image();
}
public function dypowercovers()
{
return $this->content()->get('dypowercovers')->toFile() ?? $this->image();
}
public function dyautocovers()
{
return $this->content()->get('dyautocovers')->toFile() ?? $this->image();
}
public function dyinnocovers()
{
return $this->content()->get('dyinnocovers')->toFile() ?? $this->image();
}
public function published($format = null)
{
return parent::date()->toDate($format ?? 'd M, Y');
}
}
models/dy.php
<?php
class dyPage extends Page
{
public function bgimage()
{
return $this->content()->get('bgimage')->toFile() ?? $this->image();
}
public function cover()
{
return $this->content()->get('cover')->toFile() ?? $this->image();
}
public function covers()
{
return $this->content()->cover()->toFile() ?? $this->image();
}
public function published($format = null)
{
return parent::date()->toDate($format ?? 'd M, Y');
}
}
models/dyauto.php
<?php
class dyautoPage extends Page
{
public function bgimage()
{
return $this->content()->get('bgimage')->toFile() ?? $this->image();
}
public function cover()
{
return $this->content()->get('cover')->toFile() ?? $this->image();
}
public function covers()
{
return $this->content()->cover()->toFile() ?? $this->image();
}
public function published($format = null)
{
return parent::date()->toDate($format ?? 'd M, Y');
}
}
dy.yml
title: DY
icon: 📝
status:
draft: true
unlisted:
label: Hidden Page
text: The page is not listed in the main menu
listed:
label: Menu Page
text: The page is listed in the main menu
tabs:
tab1:
label: 메뉴 관리
preset: pages
toptitlebox:
label: 메인 이미지
icon: text
columns:
- width: 1/1
fields:
dycovers:
label: 데스크톱 표지
type: files
layout: cards
template: image
info: "{{ file.dimensions }}"
uploads: false
image:
ratio: 5/4
cover: true
size: small
help: 가로형 사진을 선택합니다.
dymobilecovers:
label: 모바일 표지
type: files
layout: cards
template: image
info: "{{ file.dimensions }}"
uploads: false
image:
ratio: 5/4
cover: true
size: small
help: 세로형 사진을 선택합니다.
- width: 1/1
sections:
allfiles:
headline: 이미지 아카이브
type: files
layout: cards
# template: image
info: "{{ file.dimensions }}"
image:
ratio: 5/4
cover: true
size: small
help: 최대 1600px 이하 크기 이미지로 업로드 권장, 파일명 영문 소문자, 언더바, 숫자만 사용.
toplinkbox:
label: 외부 링크 관리
icon: text
columns:
- width: 1/1
fields:
newslink:
label: 전자사보
type: text
dyauto.yml
title: DY AUTO
icon: 📝
status:
draft: true
unlisted:
label: Hidden Page
text: The page is not listed in the main menu
listed:
label: Menu Page
text: The page is listed in the main menu
tabs:
tab1:
label: 메뉴 관리
preset: pages
toptitlebox:
label: 메인 이미지
icon: text
columns:
- width: 1/1
fields:
dyautocovers:
label: 데스크톱 표지
type: files
layout: cards
template: image
info: "{{ file.dimensions }}"
uploads: false
image:
ratio: 5/4
cover: true
size: small
help: 가로형 사진을 선택합니다.
dyautomobilecovers:
label: 모바일 표지
type: files
layout: cards
template: image
info: "{{ file.dimensions }}"
uploads: false
image:
ratio: 5/4
cover: true
size: small
help: 세로형 사진을 선택합니다.지
- width: 1/1
sections:
allfiles:
headline: 이미지 아카이브
type: files
layout: cards
# template: image
info: "{{ file.dimensions }}"
image:
ratio: 5/4
cover: true
size: small
help: 최대 1600px 이하 크기 이미지로 업로드 권장, 파일명 영문 소문자, 언더바, 숫자만 사용
