Monitor Reply

Support

Responsive image support?

Permalink Browser Info Environment October 23, 2015 at 8:13 AM

I would like my custom block to switch image thumbnails automatically between small, medium and large file manager thumbnails depending on screen size. Now it shows the image in just the same size as uploaded to file manager, although it squeezes them on mobile screens.

How can I make images added to my custom block responsive, like images in core image block and Redactor?

My site uses the Elemental theme.

Type:	Discussion
Status:	Resolved

ramonleenders replied on Oct 23, 2015 at 8:21 am Permalink Reply

Hi there,

Not sure if I know what's going on with your images with the default Image block and Redactor. Perhaps you can take a look at the HTML that is used for these images? I don't see any difference graphic wise. Can you make screenshots of a page how you want it to be and a page how it is with your custom block? Also, make screenshots of both HTML (hit right-mouse button on the image and select "Inspect element").

Kind regards,

Ramon

AnttiP replied on Oct 23, 2015 at 8:53 am Permalink Reply

Here's what I mean:

If I add three appearances of a single 2000px wide image from File Manager to a page:

• 1st time using the Image Block
• 2nd time using the Content Block and adding the image in Redactor
• 3rd time using my own Block Designer block that contains an "image" form type

What happens, is that the first two images appear in 1140px size on @screen-lg size, then switch to 940px size when I resize the screen down to @screen-md, and to 740px when I resize to @screen-sm. The third one stays at 2000px all the time like the original image in file manager.

The Elemental theme, Image Block and Redactor support responsive images as descibed here:https://www.concrete5.org/documentation/developers/5.7/designing-for...

How can I get the image in my Block Designer -made block to swap images at Bootstrap breakpoints also?

ramonleenders replied on Oct 23, 2015 at 9:45 am Permalink Reply

OK, now I get what you mean. This is not (yet) available within Block Designer. You could change the view.php file yourself, or wait for an update to come (it will be on my todo-list now).

If you want to make the edit yourself and you're not familiar with what you have to change in the view.php file, I could help you where needed!

Kind regards,

Ramon

AnttiP replied on Oct 23, 2015 at 11:53 am Permalink Reply

Thanks for your reply!

Here's the part of the view.php that contains the image:

<?php  if ($tuotekuva){ ?>
             <div class="ccm-block-testimonial-image">
               <a href="<?php  echo $tuotekuva->getURL(); ?>" data-concrete5-link-lightbox="image">
                      <img src="<?php  echo $tuotekuva->getURL(); ?>" alt="<?php  echo $tuotekuva->getTitle(); ?>" class="img-responsive">
                  </a>
             </div><?php  } ?>

I already modified the original code to make the images open in lightbox, and added the 'registerViewAssets' public funcfion to controller.php to make the lightbox work.

I had a look at the core image block view.php where it has all the code I think I need, but I couldn't figure out how to combine it with the above code...

Ideally it would open the original or @screen-lg size in lightbox and show the correct size for the current breakpoint elsewhere.

ramonleenders replied on Oct 23, 2015 at 12:46 pm Permalink Reply

Hi there,

Try this code (untested, but should work):

<?php if ($tuotekuva) {
    $tuotekuva_image = Core::make('html/image', array($tuotekuva));
    $tuotekuva_tag = $tuotekuva_image->getTag();
    $tuotekuva_tag->addClass('ccm-image-block img-responsive');
    $tuotekuva_tag->alt($tuotekuva->getTitle());
    ?>
    <div class="ccm-block-testimonial-image">
        <a href="<?php echo $tuotekuva->getURL(); ?>" data-concrete5-link-lightbox="image">
            <img src="<?php echo $tuotekuva_tag; ?>" alt="<?php echo $tuotekuva->getTitle(); ?>" class="img-responsive">
        </a>
    </div>
<?php } ?>

If you want to change the picture opening in your lightbox, change the "$tuotekuva->getURL()" into "$tuotekuva_tag". The first one is the full URL to the image, so it isn't using breakpoints!

Let me know what this did :)

AnttiP replied on Oct 23, 2015 at 1:26 pm Permalink Reply 1 Attachment

Thousand thanks!

It almost works, only some glitches... see the screenshot.

The "alt" tag and "img-responsive"class are visible and something else is missing from above the product image...?

ramonleenders replied on Oct 23, 2015 at 1:48 pm Permalink Reply

My bad..

Try this:

<?php if ($tuotekuva) {
    $tuotekuva_image = Core::make('html/image', array($tuotekuva));
    $tuotekuva_tag = $tuotekuva_image->getTag();
    $tuotekuva_tag->addClass('ccm-image-block img-responsive');
    $tuotekuva_tag->alt($tuotekuva->getTitle());
    ?>
    <div class="ccm-block-testimonial-image">
        <a href="<?php echo $tuotekuva->getURL(); ?>" data-concrete5-link-lightbox="image">
            <?php echo $tuotekuva_tag; ?>
        </a>
    </div>
<?php } ?>

AnttiP replied on Oct 23, 2015 at 2:20 pm Permalink Reply 1 Attachment

Now it works, great! I would never have figured this out myself.

Somehow everything looks and works just fine in Chrome and Firefox, but in Safari OS X and Safari iOS product images get stretched horizontally. I don't know if this is caused by my css or what, but in Safari strange pixel values appear at the end of the image tag... You can see this in the attached screenshot.

ramonleenders replied on Oct 24, 2015 at 3:51 am Permalink Reply

No idea to be honest, perhaps you can post that in the forums? Could be a Concrete5 or browser issue... both are Safari I assume? Haven't worked with this before, so I can't really tell. The community may have answers for this!

Kind regards,

Ramon

ramonleenders replied on Nov 28, 2015 at 3:38 am Permalink Reply

"Responsive image" option is now available for the "Image" field type (version 1.3.6)). Check the checkbox within the field type, and it will use the html/image helper of concrete5 as we did above.

Kind regards,

Ramon

Block Designer

Support

Responsive image support?

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post