Layouting ACF Repeater Fields untuk Desain Front End

Berikut ini adalah Contoh Layouting ACF Repeater Fields untuk Desain Front End Menggunakan Hard Coding.

Copy to Clipboard

// Check rows existexists.
echo "<style>
.button{
	padding: 10px;
    border: 2px solid #171717;
    margin-right: 10px;
}
img{
border-radius:.35rem !important
}
#main {
    max-width: 1080px;
    margin: auto;
}
.fusion-column-wrapper {
    word-wrap: break-word;
}
</style>";
echo "<h1 style='margin-top:-14px'>".get_the_title()."</h1>";
echo "<span>".get_field("start_date")." - ".get_field("end_date")."</span>";
$end = "";
if ( get_field('end_date') ) {
 $end ='%2F' . date("Ymd",strtotime(get_field("end_date")));
}
$calendar = "https://calendar.google.com/calendar/u/0/r/eventedit?dates=".date("Ymd",strtotime(get_field("start_date"))).$end."&text=".urlencode(get_the_title())."&location&details";
$ig = "https://instagram.com/explore/tags/".strtolower(get_field("main_instagram_hashtag"));
echo "<div style='margin-top:20px'><a href='".$calendar."' class='button''>Save the date</a>";
echo "<a href='".$ig."' class='button'>View gallery</a></div>";
$image = get_field('banner')[0]["sizes"]["large"];
if( have_rows('content_detail') ):

// Loop through rows.
    while( have_rows('content_detail') ) : the_row();

// Load sub field value.
        $content_image = !get_sub_field("add_content_images")[0]["content_image"]?$image:get_sub_field("add_content_images")[0]["content_image"];
        $lead = get_sub_field('lead_word');
		$caption = get_sub_field('caption');
		
							
        // Do something...
		echo "<div style='margin:20px 0'><img src='". $content_image ."'></div>";
		echo "<h5>".$lead."</h5>";
		echo $caption."";
    // End loop.
    endwhile;

// No value.
else :
    // Do something...
endif;

if( have_rows('child_program') ):

// Loop through rows.
    while( have_rows('child_program') ) : the_row();

// Load sub field value.
        $content_image = !get_sub_field("cp_thumbnail")["url"]?$image:get_sub_field("cp_thumbnail")["url"];
        $lead = get_sub_field('cp_title');
		$caption = get_sub_field('cp_content');
		
							
        // Do something...
		echo "<div style='margin:20px 0'><img src='". $content_image ."'></div>";
		echo "<h5>".$lead."</h5>";
		echo $caption."";
    // End loop.
    endwhile;

// No value.
else :
    // Do something...
endif;

Artikel lain: