hello,
i have a slider that gets its data from a sacf options page.
i made a div in which the slider container is. the div is the looper provider ({{dc:acf:option_field field=“sl_st_head”}}).
the slide 1 is the looper consumer. everything works so far. i get all the data.
but now i wanted different images depending on max-width.
i entered the code in element => customize => element css:
@media (min-width: 768px) {
.custom-div{
/* Desktop background photo */
background-image: url(’{{dc:looper:field key=“sl_st_head_desk”}}’);
}
}
@media (max-width: 767px) {
.custom-div{
/* Mobile background photo */
background-image: url(’{{dc:looper:field key=“sl_st_head_mob”}}’);
}
}
i also tried this one:
@media (min-width: 768px) {
$el {
/* Desktop background photo */
background-image: url(’{{dc:looper:field key=“sl_st_head_desk”}}’);
}
}
@media (max-width: 767px) {
$el {
/* Mobile background photo */
background-image: url(’{{dc:looper:field key=“sl_st_head_mob”}}’);
}
}
the acf image filed returns me the image id. so that should fit.
unfortunately the looper output is empty.
the looper itself works, if i enter {{dc:looper:field key=“sl_st_head_desk”}} in a textfield i get the image id…
can you take a look at this?
thanks in advance