Forums

How to Create valid markup thumbnails?

Permalink 1 user found helpful
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>';
    }    
}
siton
 
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
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.

- 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.