Responsive Images?

[Stark Raving]

Right, so I have learned to use

Code: Select all

{{ fancybox("image.jpg", 334, 250) }}

or

Code: Select all

{{ showimage("bolt/files/image.jpg", 800, 600) }}

(with no fancybox) in pages and entries. Note that I'm manually putting these in my enty or page posts.

Inserting an image in an introduction or body with the wysiwyg doesn't give me fancybox. Is there a way to do this?

However, regardless of how I do it, the images are not responsive. Which kind of sucks because the Bolt template is responsive. So how to make them responsive like the images in the default Bolt entries/pages? I've used the default class "imageholder" in a div tag, but to no avail.

Nor can I position two smaller thumbnails left or right of a larger image and have them realign as the browser resizes.

I realize this is probably rediculously simple for php/twig people, but I started with html/css and graduated to pivot/pivotx. They are so simple by comparison. And I really have tried to understand the Bolt documentation. Honest. But I'm not. So, please help. Pretty please. I won't even try to figure out the image record arrays for the templates until I get this wrapped around my head.

[ningus]

Regarding the responsivness in base-2014 theme, this is achieved by css, like so:

Code: Select all

img {
    height: auto;
    max-width: 100%;
}

Above code is in foundation.css, so maybe you’ve overwritten that in your own styles?!

Embedding fancyboxed images through wysiwyg seems indeed not possibe, what about using "imagelist" for that(?) … and tweak positioning and sizes with css.

[Stark Raving]

Thank you for the response. No, I've made no changes to images in the app.css so that isn't the problem. What I discovered in the Bolt user guide is this:

Important: images placed in the text using the Editor field will not be ‘responsive’ like the rest of the website, meaning that the image will keep the same size even if a browserscreen changes in size. By using the ‘Image field’ to upload your images this will be prevented.

How unfortunate. If I use the image field, I can't control the placement of the image. In other words, the image can only be inserted at the beginning of a post. Nor can I have more than one "responsive" image. I guess this is just a current limitation to Bolt.

I put imagelist in the contenttypes.yml, but then what? What exactly would I put in the template?

Sorry, but I just find this confusing. Thanks for helping. Anyone else, feel free to jump in, too.

Cheers

[Stark Raving]

Ah, I see that when I added imagelist to contenttypes.yml, and updated the database, Bolt then had an image field that allowed for insertion of more than one image. The images are not showing yet because I don't know what to add to the template. I see this in the default index.twig:

Code: Select all

{% if home.image is defined and home.image is not empty %}
                <div class="five columns imageholder">
                    <a href="{{ image(home.image) }}">
                        <img src="{{ thumbnail(home.image, 400, 260) }}">
                    </a>
                </div>
            {% endif %}

Is this where I would need to make changes, and if so, what do I change? I have three images. Could I have one larger image, and then two smaller images stacked on its left?

I'm getting close, I think.

[ningus]

Images placed in the text using the editor might not be "responsive" in a true sense, but at least they are scaling accordingly when browser window size is changed, I just checked that in a fresh bolt installation with base-2014 as theme.

You can even show this image in fancybox. In editor field place your image, leave at least the height field empty (otherwise it would not scale evenly). Mark the image and click on the "link"-button (unfortunately in link-dialog no files are chooseable, so you have to write the link to an image by hand, i.e.: /files/sample2.jpg). The next step is a bit awkward: click on "source"-button, locate the img-tag, it is embedded in p-tags, replace them with divs and add class="imageholder" to the opening div. Voíla.

Code for imagelists is already included in records.twig (line 29 - 42). So maybe you should try imagelists on a page.

[isul]

i have tried to put this

Code: Select all

 img {
    height: auto;
    max-width: 100%; !important;
}

to app.css and it work

[Stark Raving]

Yes, thank you so much islul and ningus. I've been away on retreat on a wee island. Still working on the site. Things are happening. One image is up. The others about to be tackled. Will report back on how it goes.

Cheers

[Stark Raving]

Well I added the images in the editor field (intro or body works) as suggested by ningus, and I have three images that open in Fancybox. Only the larger image on the left actually scales as the browser resizes, the two smaller thumbnails do not. They do, however, nicely slip below the larger image in the smaller browser sizes. The only issue is that each image opens in a separate Fancybox. There is no way to navigate to the companion images within Fancybox. Maybe someone has an idea on how to do that?

Also adding the code suggested by isul worked, so long as I remembered to remove the height from the img tag.

Thanks again.

[ningus]

Hello Stark, nice that it works so far. The code of isul contains a small error, there should be only one semicolon:

Code: Select all

max-width: 100% !important;

Well, the responsivness of all this is indeed given through the behavior of lists to collapse. Or even inline-images would collapse in a similar way. The size for smaller thumbnails could be defined to fit into the smallest screen-size of choice, while the larger one is allowed to have a flexible size or max-width.

To navigate through all images within fancybox, please make sure to not only define class="fancybox" in a-tag, but also rel="gallery":

Code: Select all

<a class="fancybox" rel="gallery" href="{{ image(item.filename) }}">

Cheers!

[isul]

Sorry i made mistake. It is the right one.

Code: Select all

 p img    {
   width: 100%;
   height: auto !important;

}