Created
December 6, 2012 06:33
-
-
Save adamjohnson/4222241 to your computer and use it in GitHub Desktop.
Overriding the Concrete5 Image block to not print out width & height attributes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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; | |
} | |
} | |
?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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; }
.