Editing (v7+)

How to Create valid markup thumbnails?

Permalink 1 user found helpful February 16, 2016 at 11:18 AM

I look at this TUT - in section "A Better Way":
http://documentation.concrete5.org/developers/working-with-files-an...

The tut missing "how to add" very basic and important element:
1)Alt (very important! for SEO & accessibility & valid code) *in file manger "alt" is missing so i use "description"
2)Width and height
3)Title
.

<?php
$type = \Concrete\Core\File\Image\Thumbnail\Type\Type::getByHandle('gallery');
foreach($images as $file) {
    if (is_object($file)) {
        $src = $file->getThumbnailURL($type->getBaseVersion());
        print '<div class="thumbnail">';
        print "<img src=\"{$src}\" />";
        print '</div>';
    }    
}

MrKDilkington replied on Feb 16, 2016 at 10:29 pm Permalink Best Answer Reply

Hi siton,

Here are a few examples:
- display an image with class, title, alt, height, and width

// get the attribute file object
$img = $c->getAttribute('test_image');
if (is_object($img)) {
    // get the "tall_thumbnail" thumbnail type
    $type = \Concrete\Core\File\Image\Thumbnail\Type\Type::getByHandle('tall_thumbnail');
    // getThumbnailUrl() is passed $type->getBaseVersion()
    // - the base version is the thumbnail created from the specified thumbnail dimensions
    // - if there is no thumbnail of that type, the path of the original image is used
    // getThumbnailUrl() returns the absolute path of the image
    $src = $img->getThumbnailURL($type->getBaseVersion());
    // - if there is no title, then the filename is used
    // - concatenation operator on a single line
    echo '<img src="' . $src . '" class="monkeypants" title="' . $img->getTitle() . '" alt="' . $img->getTitle() . '" width="' . $type->getWidth() . '" height="' . $type->getHeight() . '" >';
    // - expanded variables, functions, and methods using double quotes
    echo "<img src=\"$src\" class=\"monkeypants\" title=\"{$img->getTitle()}\" alt=\"{$img->getTitle()}\" width=\"{$type->getWidth()}\" height=\"{$type->getHeight()}\">";

Viewing 15 lines of 18 lines. View entire code block.

 
// get the attribute file object
$img = $c->getAttribute('test_image');
if (is_object($img)) {
    // get the "tall_thumbnail" thumbnail type
    $type = \Concrete\Core\File\Image\Thumbnail\Type\Type::getByHandle('tall_thumbnail');
    // getThumbnailUrl() is passed $type->getBaseVersion()
    // - the base version is the thumbnail created from the specified thumbnail dimensions
    // - if there is no thumbnail of that type, the path of the original image is used
    // getThumbnailUrl() returns the absolute path of the image
    $src = $img->getThumbnailURL($type->getBaseVersion());
    // - if there is no title, then the filename is used
    // - concatenation operator on a single line
    echo '<img src="' . $src . '" class="monkeypants" title="' . $img->getTitle() . '" alt="' . $img->getTitle() . '" width="' . $type->getWidth() . '" height="' . $type->getHeight() . '" >';
    // - expanded variables, functions, and methods using double quotes
    echo "<img src=\"$src\" class=\"monkeypants\" title=\"{$img->getTitle()}\" alt=\"{$img->getTitle()}\" width=\"{$type->getWidth()}\" height=\"{$type->getHeight()}\">";
 
    // Example output:
    // <img src="http://localhost/concrete5/application/files/thumbnails/tall_thumbnail/5414/5102/4445/Strawberry-Red-Velvet-Cupcakes1.jpg" class="monkeypants" title="delicious strawberry red velvet cupcakes" alt="delicious strawberry red velvet cupcakes" width="300" height="600">
}

- display an image with class, title, alt, height, and width using HTMLObject

// get the attribute file object
$img = $c->getAttribute('test_image');
if (is_object($img)) {
    // get the "tall_thumbnail" thumbnail type
    $type = \Concrete\Core\File\Image\Thumbnail\Type\Type::getByHandle('tall_thumbnail');
    // getThumbnailUrl() is passed $type->getBaseVersion()
    // - the base version is the thumbnail created from the specified thumbnail dimensions
    // - if there is no thumbnail of that type, the path of the original image is used
    // getThumbnailUrl() returns the absolute path of the image
    $src = $img->getThumbnailURL($type->getBaseVersion());
    // HtmlObject\Image is part of the HTMLObject vendor library and is used to create the img element
    // C:\xampp\htdocs\concrete5\concrete\vendor\anahkiasen\html-object\src\HtmlObject\Image.php
    // - if there is no title, then the filename is used
    echo HtmlObject\Image::create($src)->class('my-img-class')->title($img->getTitle())->alt($img->getTitle())->width($type->getWidth())->height($type->getHeight());
    // Example output:

Viewing 15 lines of 17 lines. View entire code block.

 
// get the attribute file object
$img = $c->getAttribute('test_image');
if (is_object($img)) {
    // get the "tall_thumbnail" thumbnail type
    $type = \Concrete\Core\File\Image\Thumbnail\Type\Type::getByHandle('tall_thumbnail');
    // getThumbnailUrl() is passed $type->getBaseVersion()
    // - the base version is the thumbnail created from the specified thumbnail dimensions
    // - if there is no thumbnail of that type, the path of the original image is used
    // getThumbnailUrl() returns the absolute path of the image
    $src = $img->getThumbnailURL($type->getBaseVersion());
    // HtmlObject\Image is part of the HTMLObject vendor library and is used to create the img element
    // C:\xampp\htdocs\concrete5\concrete\vendor\anahkiasen\html-object\src\HtmlObject\Image.php
    // - if there is no title, then the filename is used
    echo HtmlObject\Image::create($src)->class('my-img-class')->title($img->getTitle())->alt($img->getTitle())->width($type->getWidth())->height($type->getHeight());
 
    // Example output:
    // <img src="http://localhost/concrete5/application/files/thumbnails/tall_thumbnail/5414/5102/4445/Strawberry-Red-Velvet-Cupcakes1.jpg" alt="delicious strawberry red velvet cupcakes" class="my-img-class" title="delicious strawberry red velvet cupcakes" width="300" height="600">
}

Forums

Editing (v7+)

How to Create valid markup thumbnails?

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?