Updates to Attributes Slider


I've made some updates to my Attributes Slider add on.  Most are pretty minor, but now in versions past 5.5 it supports composer as well.  This requires a fair amount of changes to your view to make it work, so this post documents how to make those changes so that your custom template will work with composer. This post also documents a little known javascript function for views, ccm_addHeaderItem('url', 'TYPE');  This function can help you out with a lot of problems with doing embedded blocks in your theme files.

I was going to try and put all of this into a documentation page for Attributes Slider, but you can't really do code blocks in that interface.

Anyway, doing composer pages for blocks like image galleries has always been a bit difficult.  The only real examples in the core are content and image blocks, and what they show is making a completely different template for editing in composer.  This doesn't really work with really complex edit views.  I was never able to get one to work.

There is, however a different way to approach it.  In version 5.5 on (think that's where it starts), there's a function called 'composer' on blocks.  This runs before the block is displayed when in composer view.  So I use that function in versions later than 5.5 to set a couple of variables for the view.  If those variables exist, then I don't initialize the slider, and I include a css file to hide the images and text and show a 'disabled in composer' view instead.

So, for the people that are only here to find out how to update their views for Attributes Slider, here's the short version.  There will be more details on the theory behind it after this.

How to Update Your Template to Work With Composer

It's really only a couple of things that you need to change.  For most templates, there is a view.css file, and a view.php file.  We'll look at view.css first.  There is only one change needed here - add a rule that hides the 'disabled in composer' div when viewing from the front end.  Here's the rule:

#attributes-slider-composer-disabled {
	display: none !important;

That means that you can make your changes to the front end.  Actually, you can then make them even if you are updating the block template for both 5.5 and 5.4 versions.  If it's there, then any changes you make to the view will apply in composer on compatible systems, and not on older systems.

The flip side of that rule to hide the 'disabled' message on the front end has a flip side - on the composer end of things, you need to include a css file that shows the message and hides the actual slideshow.  The first and most basic way to do this is to create a composer.css file and include it in the header if we are in composer mode.  In order to know if you are in composer mode, you need to have a 'composer' function on your block controller.  Updated versions of Attributes Slider have this function, so they don't need to edit, but for people wanting to make their own blocks compatible with composer, you should make a function that looks something like this in order to figure out the path to the 'composer' css file that lives in our block folder, and set it for the view.

public function composer() {
	$html = Loader::helper('html');
	$bv = new BlockView();
	$b = $this->getBlockObject();
	$composer_css_link = $html->css($bv->getBlockURL() . '/composer.css');
	$this->set('composer_css_link', $composer_css_link->file);

This means that now we can check for the existence of a 'composer_css_link' variable in our view, and use that to change how the template is rendered.  If it's there, we can skip outputting the javascript that initializes the slider, and instead use the javascript function ccm_addHeaderItem() to use our css file that will hide and show what we want.

This is what's in the css file:

div.attributes-slider-block-wrap {
	display: none !important;
#attributes-slider-composer-disabled {
	display: block !important;
	border: 1px solid grey;
	padding: 40px 0;
	text-align: center;

If you've looked at many of the attributes slider templates, you'll notice that .attributes-slider-block-wrap is not a class that exists for any of them.  This is the first thing we need to change about the view.  For the outer div that is targeted by the initialization script, we need to add this class. 

So this:

<div id="attributes-slider-<?php    echo $bID;?>" class="dias">

Becomes this:

<div id="attributes-slider-<?php    echo $bID;?>" class="dias attributes-slider-block-wrap">

That allows us to hide the portion with the images and text when we are loading our composer.css file because we are in the dashboard view.  But in order to do that, we need to actually add the css file.  For some reason, you can't use addHeaderItem inside of the composer function, but you can set the variables for the view.  So if those variables are there, you can change how your template works, avoid php and javascript errors, and allow people to edit the block parameters by clicking the block name in the sidebar.

When you are updating your template, scroll down to the closing div tag to the one you just edited.  It should have a script tag directly underneath it, We're going to make a slight change here, adding in a couple different options and some php.


<script type="text/javascript">
     $(document).ready(function() {
		$("#slide-wrap-<?php echo $bID;?>").carouFredSel({

New :

<div id="attributes-slider-composer-disabled" class="ccm-disabled-item">
	<h3><?php echo t("Attributes Slider Disabled in Composer");?></h3>
<script type="text/javascript"> 
     $(document).ready(function() {
<?php if ($caroufredsel_link){ ?>
	ccm_addHeaderItem('<?php echo $composer_css_link; ?>', 'CSS');
<?php } else { ?>
          $("#slide-wrap-<?php    echo $bID;?>").carouFredSel({

You may notice that this leaves a hanging else statement that we will need to close to prevent the page from breaking.  Technically, you could leave this out, just outputting the header items if you are in composer mode.  Doing this, you could technically output a fully functioning view for composer.  Loading different javascript files and css files for each view would need to be figured out in the composer function on the block controller.  Then you'd set them to the view, and if they exist, output. I updated the galleria add on for a recent site to display properly when in composer.  It's working fine, but for Attributes slider with the fact that templates are exact widths and not responsive, it seemed like it was better to completely disable the view rather than try to make it display properly.  You can make the decision on your add ons if they will work with the composer view or not, if you are trying to do this for other add ons.

Anyway, we did leave it open with 'else' - so we need to close that. In the templates in the marketplace, this is directly before the closing }); for the  $(document).ready(function() { call.  If you are adding in other functions for your view, it would just be after the caroufredsel declaration, though really, you probably don't need the other functions because you're not actually making a slider.  It's just .

That's really about all the more there is to it.  You could pretty easily check for bFilename and use that to load up secondary javascript and css according to view, and then display those views in the composer screen.  The problem I could see there is that the front end view is often wider than the composer screen, and the animation could be distracting to someone trying to create a featured property or a product detail page or a blog post or any other page type that uses Attributes Slider.

I wish that this worked back to 5.4, but it doesn't.  It's backwards compatible, so if you update for newer versions then older ones don't fail, but it would be nice if you could make it work for them.  


Honestly, I wish I'd gotten a lot more done the last two days than I did.  I started in on making all the add ons I want to make, and pretty much all I did is get _most_ of the dev environments and git repos set up.  There are still a couple more to do.  Downloaded all the libraries I need.  That's when I got started on setting up Attributes Slider.  I had learned how to do composer for a site at work a few weeks ago, and had a couple of other fixes to deploy so I set them up today.  I was going to be changing it to GenericSlider not AttributesSlider and trying to make something that could be easily ported to a few dozen javascript libraries without much effort, but ran into a couple things when I starrted looking at the code.  

I fixed it all, but still, what have I gotten done this weekend?  Hopefully tomorrow is more productive.