Skip to content

Instantly share code, notes, and snippets.

@adamjohnson
Created December 6, 2012 06:33
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adamjohnson/4222241 to your computer and use it in GitHub Desktop.
Save adamjohnson/4222241 to your computer and use it in GitHub Desktop.
Overriding the Concrete5 Image block to not print out width & height attributes
<?php
defined('C5_EXECUTE') or die("Access Denied.");
/*
* How to make overrides/extend controllers in Concrete v5.6+
* 1. Create a new file & put your opening & closing PHP tags
* 2. Add line 2 above (execute or die!)
* 3. Go to (root)/concrete/blocks/block-you-want-to-override/file-you-want-to-override.php
* 4. You'll see something like 'class somethingBlah extends somethingElse_blah'. Copy that with the opening & closing brackets
* 5. Now go to (root)/concrete/core/controllers/blocks/file-you-want-to-change.php
* 6. Open said file and look at the functions inside of it. Copy from 'function... { stuff... }' --being sure to include the closing bracket
* 7. Change what you want in that specific function (add/edit/delete stuff)
* 8. Save the new file you just made to (root)/blocks/block-you-want-to-override/file-you-want-to-change.php
* 9. Log into Concrete5 & disable all things cache--especially the overrides cache, cause that's what we're changing
* 10. Refresh the page and watch magic happen!
* Below is an override of the default Image block in C5.6.0.2 where I've removed
* the width, height, & border attributes from printing in the DOM ( {$sizeStr} and border=\"0\" )
* This essentially enables your images to shrink porportionally when you do responsive design
* Place this file in (root)/blocks/image. (You'll probably have to create the image folder if you haven't already)
*/
class ImageBlockController extends Concrete5_Controller_Block_Image {
function getContentAndGenerate($align = false, $style = false, $id = null) {
$c = Page::getCurrentPage();
$bID = $this->bID;
$f = $this->getFileObject();
$fullPath = $f->getPath();
$relPath = $f->getRelativePath();
$size = @getimagesize($fullPath);
if (empty($size)) {
echo t( 'Image Not Found. ');
return '';
}
if ($this->maxWidth == $size[0] && $this->maxHeight == $size[1]) {
$sizeStr = $size[3];
} else if (!$this->forceImageToMatchDimensions && ($this->maxWidth > 0 || $this->maxHeight > 0)) {
$mw = $this->maxWidth > 0 ? $this->maxWidth : $size[0];
$mh = $this->maxHeight > 0 ? $this->maxHeight : $size[1];
$ih = Loader::helper('image');
$thumb = $ih->getThumbnail($f, $mw, $mh);
$sizeStr = ' width="' . $thumb->width . '" height="' . $thumb->height . '"';
$relPath = $thumb->src;
} else {
$sizeStr = $size[3];
}
$img = "<img class=\"ccm-image-block\" alt=\"{$this->altText}\" src=\"{$relPath}\" ";
$img .= ($align) ? "align=\"{$align}\" " : '';
$img .= ($style) ? "style=\"{$style}\" " : '';
if($this->fOnstateID != 0) {
$fos = $this->getFileOnstateObject();
$fullPathOnstate = $f->getPath();
$sizehover = @getimagesize($fullPathOnstate);
if ($this->maxWidth == $sizehover[0] && $this->maxHeight == $sizehover[1]) {
$relPathHover = $fos->getRelativePath();
} else if (!$this->forceImageToMatchDimensions && ($this->maxWidth > 0 || $this->maxHeight > 0)) {
$thumbHover = $ih->getThumbnail($fos, $mw, $mh);
$relPathHover = $thumbHover->src;
} else {
$relPathHover = $fos->getRelativePath();
}
$img .= " onmouseover=\"this.src = '{$relPathHover}'\" ";
$img .= " onmouseout=\"this.src = '{$relPath}'\" ";
}
$img .= ($id) ? "id=\"{$id}\" " : "";
$img .= "/>";
$linkURL = $this->getLinkURL();
if (!empty($linkURL)) {
$img = "<a href=\"{$linkURL}\">" . $img ."</a>";
}
return $img;
}
}
?>
@adamjohnson
Copy link
Author

As a side note, if all you want are responsive images that scale, you can actually leave the default controller alone if you add img { max-width: 100%; height: auto; }.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment