Forums

Customize the markup when using "Edit Area Design" function

Permalink
I have a site where I'm adding background images to areas using the area design editor. When this is used there is some markup injected around the area's blocks - a div with a class like class="ccm-custom-style-[area name]" and then the associated styles are added to the header.

I would like to modify the HTML created by this function. Does anyone know where this comes from and if there is a clean way of overriding it?

As an example of what I'm trying to accomplish: change the output from this
<div class="ccm-custom-style-areaname">....</div>

to this
<div class="ccm-custom-style-areaname" data-image="[path-to-selected-image]">....</div>
graydog
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi graydog,

This might point you in the right direction.

You might be able to override CustomStyle.php.
concrete\src\Area\CustomStyle.php

Maybe this could be used for the data-image attribute value.
$f = $set->getBackgroundImageFileObject();

https://github.com/concrete5/concrete5-5.7.0/blob/develop/web/concre...

Actually, it looks like multiple files would need to be overridden.

What are you trying to accomplish? Maybe there is another way to do it.
graydog replied on at Permalink Reply
graydog
Thanks, that got me pointed in the right direction.

What I'm trying to do is add a parallax effect to the background image using a jQuery plugin. If this proves too difficult I might just try a different method - pure CSS or modify the plugin. But, my end goal is to allow the user to turn the feature on/off with a checkbox within the edit area menu.

I was able to accomplish my example by modifying two files. I added this to concrete\src\Area\CustomStyle.php:
public function getBackgroundImage() {
    return $this->set->getBackgroundImageFileObject(); 
}


And then added an override to concrete\elements\block_area_header_view.php in /applications with this:
<?php
defined('C5_EXECUTE') or die("Access Denied.");
$c = Page::getCurrentPage();
$css = $c->getAreaCustomStyle($a);
if (is_object($css)) {
    $class = $css->getContainerClass();
    $bkrd = $css->getBackgroundImage();
}
if ($class) { ?>
    <div class="<?php echo $class?>"
    <?php if (is_object($bkrd)) {
        echo 'data-image="'.$bkrd->getRelativePath().'"';
      } ?>
    >
<?php } ?>


Now, the question is how do I correctly override these files in a package? If I add the second modification in \packages\[name]\elements\ it has no effect. I've seen some mention of Core::bind(), but can't find any real documentation on it, specifically using it on a file in /elements. Can I have a bootstrap/app.php in a package with the same effect as the one in the applications directory?

EDIT:

Actually, it looks like I can get all the data without modifying the core class. I can get a file object for the background image using
$css = $c->getAreaCustomStyle($a);
$bkrd = $css->getStyleSet()->getBackgroundImageFileObject();

So, I just need to figure out how to override concrete/elements/block_area_header_view.php in the package.
graydog replied on at Permalink Reply
graydog
I was able to override the concrete/elements/block_area_header_view.php template in a package by copying it to packages/[name]/elements/ and then adding the following to the package's controller.
......
use Environment;
....
  public function on_start() {
    $env = Environment::get();
    $env->overrideCoreByPackage('elements/block_area_header_view.php', $this->pkgHandle);
  }


Make sure there is not a copy of the same file in application/elements/ as that will take precedence.