layout grid and article object

[scribe]

Hi there

Is there a way to make the image in the article object responsive in the layout grid in the same way that clicking full width "true" in the layout grid makes an image resize in a smooth transition as the browser window goes from desktop to tablet to phone?

[Pablo]

There is no standard option for this. But the 'Article' object uses HTML templates. The layout is controlled by these templates.
If you have HTML knowledge then you can modify the templates or create your own ones.

[scribe]

It would be a good update for 16.1
Yes?

[scribe]

This is the code for an image in an article object that is in the layout grid;

<div class="blogthumb"><a href="images/freesailing1.jpg"><img alt="Subject" src="images/freesailing1.jpg"></a></div>

compared to the code for just an image itself in a layout grid with full width set to true;

<div id="wb_Image1" style="display:inline-block;width:100%;height:auto;z-index:0;">
<img src="images/freesailing1.jpg" id="Image1" alt="">
</div>

In changing the html would you insert the new html object in the layout grid in place of the article object or would you alter the code in the html properties?

[Pablo]

I am not sure if it's as simple as that.
The generated HTML depends on the context of the element. So, the HTML will be different based on where the object is in the structure of the page.

[scribe]

Wouldn't you only be inserting;


max-width: 100%;
height: auto;


in the image tag?

[Pablo]

It may work, but it may also have side effects.
But you can modify the template yourself, so you can try if it works.

[scribe]

I added "width: 100%; height: auto;" at the end of the image tag, placed it in the html object and put it in the layout grid.

It does act smoothly in transition when it goes less than 480 but although the text is in the code the lorum ipsum does not display.

Who writes the wysiwyg code?

[Pablo]

I'm sorry, I cannot help you with writing custom code. For me, it may also take a lot of time to figure out how to make this work.
But if you have a suggestion then you can post it in the "suggestions" section of this forum. if more users find it useful then I wlll consider it for future development.