Display image from subpage on hover

The CMS Questions
1

Hi all —

I have a main page with a bunch of subpages that get labeled with one of three possible tags (“yes”, “no” and “list”, in this example). The main page lists all the subpages, and when one hovers over the name of one of the subpages tagged “yes”, the background should be filled with the “coverimage” assigned to each specific subpage.

This is the field in the subpage blueprint:

fields:
  coverimage:
    label: Cover
    type: image

I am using js. If I select an arbitrary background image to be displayed it works:

   $(".yes").hover(
    function(){
      $('body').css('background-image', 'url(/assets/images/photo.jpg)');
      $('body').css('background-size', 'cover');
      $(".yes, .no, .list .arrows, .back").addClass("hide");
      $(this).removeClass("hide");
    },
    function(){
      $('body').css('background-image', 'none');
      $(".yes, .no, .list, .arrows, .back").removeClass("hide");
    },
  );

However I have problems calling the child page and its featured photo.

    $(".yes").hover(
    function(){
      $('body').css('background-image', '$img = $page->children()->coverimage()->toFile()');
      $('body').css('background-size', 'cover');
      $(".yes, .no, .list .arrows, .back").addClass("hide");
      $(this).removeClass("hide");
    },
    function(){
      $('body').css('background-image', 'none');
      $(".yes, .no, .list, .arrows, .back").removeClass("hide");
    },
  );

What am I doing wrong? Thanks in advance!

2

This code doesn’t make sense for several reasons, the main one being that you can’t call a field name on a collection, but you need to get the relevant page here first. And we need a URL instead of a file object.

So I think the best approach would be to pass the file URL as a data attribute to the .yes element, which you can then fetch in your script.

If you need more details, please post your HTML/PHP where you list the subpages.

3

Thanks for the reply! I don’t quite understand what you mean by passing the url as a data attibute.

This is the php bit where the pages get listed:

<div class="mylist">

<?php foreach($page->children() as $subpage): ?>
  <div class="<?= $subpage->tags() ?>">
    <span> <a href="<?= $subpage->url() ?>">
      <h2><?= html($subpage->title()) ?> </h2>
    </a>
  </span>
    <svg>
        <circle stroke="#7B7B7B" stroke-width="1" fill=none  />
        <text x="48%" y="50%" text-anchor="middle" fill="black" dy=".32em" font-family='alpina_ext_th_it'><?= $subpage->number() ?></text>
    </svg>
  </div>

<?php endforeach ?>
4 
<?php if ($image = $subpage->coverimage()->toFile()) : ?>
<div class="<?= $subpage->tags() ?>" data-url="<?php echo $image->url() ?>">
<?php endif ?>

var element = $(".yes");
var url = element.data("url");
$('body').css('background-image', 'url(url)');
5

So I now have this in my php

  <?php foreach($page->children() as $subpage): ?>
  <?php if ($image = $subpage->coverimage()->toFile()) : ?>

    <div class="<?= $subpage->tags() ?>" data-url="<?php echo $image->url() ?>">

      <span>
        <a href="<?= $subpage->url() ?>">
          <h2><?= html($subpage->title()) ?> </h2>
        </a>
      </span>

      <svg>
        <circle stroke="#7B7B7B" stroke-width="1" fill=none  />
        <text x="48%" y="50%" text-anchor="middle" fill="black" dy=".32em" font-family='alpina_ext_th_it'><?= $subpage->number() ?></text>
      </svg>

    </div>

  <?php endif ?>
<?php endforeach ?>

and this in my js

  var element = $(".yes");
  var url = element.data("$subpage->coverimage()->toFile()");

  $(".yes").hover(
    function(){
      $('body').css('background-image', 'url(url)');
      $('body').css('background-size', 'cover');
      $('circle').css('stroke', 'black');
      $(".yes, .no, .list").addClass("hide");
      $(this).removeClass("hide");
    },
    function(){
      $('body').css('background-image', 'none');
      $('circle').css('stroke', '#7B7B7B');
      $(".yes, .no, .list").removeClass("hide");
    },
  );

the problems now are

  1. that the only items I see listed are the subpages that do have a coverimage (so the ones with a yes tag, the other ones are not visible). Does it have to something to do with the if loop?

  2. When I hover nothing changes as far as the background

6

No, here you have to get the value of the data-url attribute as in my code above (var url = element.data("url");). If you console.log(url) this should then log the url from the data attribute.

You probably have to move the if statement:

<?php $image = $subpage->coverimage()->toFile(); ?>
 <div class="<?= $subpage->tags() ?>" <?= $image ? 'data-url="' . $image->url() . '"' : null ?>>

The only thing I’m not sure about is if we can use this line as is

  $('body').css('background-image', 'url(url)');

or if we have to use string concatenation… or double quotes…

Edit: Probably like this:

css('background-image', 'url(' + url + ')');
1 Like
7

Thank you very much for your help!

css('background-image', 'url(' + url + ')');

This worked! However it always displays the same image regardless of what I hover on…why?

8

Try this:

 $(".yes").hover(
    function(){
      var url = $(this).data("url");
      $('body').css('background-image', 'url(' + url + ')');
      $('body').css('background-size', 'cover');
      $('circle').css('stroke', 'black');
      $(".yes, .no, .list").addClass("hide");
      $(this).removeClass("hide");
    },
    function(){
      $('body').css('background-image', 'none');
      $('circle').css('stroke', '#7B7B7B');
      $(".yes, .no, .list").removeClass("hide");
    },
  );
9

Yessss thank you so much!
It has to be
var url = $(this).data("url");
to work but it works!

Thank you so so much!

10

Ah, of course, corrected it above. Haven’t used jQuery in a while…