Responsive Images?

A forum for Bolt related questions / issues

Responsive Images?

Postby Stark Raving » Sun Jul 20, 2014 6:24 am

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.
"After I'm dead I would rather have people ask why I have no monument than why I have one." ~ Cato the Elder

"In heaven all the interesting people are missing." ~ Friedrich Nietzsche
User avatar
Stark Raving
Silver Sponsor
 
Posts: 115
Joined: Tue Dec 11, 2007 9:24 pm
Location: Vancouver

Re: Responsive Images?

Postby ningus » Sun Jul 20, 2014 5:09 pm

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.
ningus
 
Posts: 33
Joined: Fri Jun 21, 2013 4:05 pm
Location: Europe

Re: Responsive Images?

Postby Stark Raving » Sun Jul 20, 2014 7:17 pm

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
"After I'm dead I would rather have people ask why I have no monument than why I have one." ~ Cato the Elder

"In heaven all the interesting people are missing." ~ Friedrich Nietzsche
User avatar
Stark Raving
Silver Sponsor
 
Posts: 115
Joined: Tue Dec 11, 2007 9:24 pm
Location: Vancouver

Re: Responsive Images?

Postby Stark Raving » Sun Jul 20, 2014 7:46 pm

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.
"After I'm dead I would rather have people ask why I have no monument than why I have one." ~ Cato the Elder

"In heaven all the interesting people are missing." ~ Friedrich Nietzsche
User avatar
Stark Raving
Silver Sponsor
 
Posts: 115
Joined: Tue Dec 11, 2007 9:24 pm
Location: Vancouver

Re: Responsive Images?

Postby ningus » Sun Jul 20, 2014 9:21 pm

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.
ningus
 
Posts: 33
Joined: Fri Jun 21, 2013 4:05 pm
Location: Europe

Re: Responsive Images?

Postby isul » Tue Jul 22, 2014 4:31 am

i have tried to put this
Code: Select all
 img {
    height: auto;
    max-width: 100%; !important;
}


to app.css and it work :)
isul
 
Posts: 13
Joined: Tue Jul 22, 2014 2:32 am

Re: Responsive Images?

Postby Stark Raving » Wed Jul 23, 2014 6:03 am

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
"After I'm dead I would rather have people ask why I have no monument than why I have one." ~ Cato the Elder

"In heaven all the interesting people are missing." ~ Friedrich Nietzsche
User avatar
Stark Raving
Silver Sponsor
 
Posts: 115
Joined: Tue Dec 11, 2007 9:24 pm
Location: Vancouver

Re: Responsive Images?

Postby Stark Raving » Thu Jul 24, 2014 5:05 am

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.
"After I'm dead I would rather have people ask why I have no monument than why I have one." ~ Cato the Elder

"In heaven all the interesting people are missing." ~ Friedrich Nietzsche
User avatar
Stark Raving
Silver Sponsor
 
Posts: 115
Joined: Tue Dec 11, 2007 9:24 pm
Location: Vancouver

Re: Responsive Images?

Postby ningus » Fri Jul 25, 2014 12:32 pm

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!
ningus
 
Posts: 33
Joined: Fri Jun 21, 2013 4:05 pm
Location: Europe

Re: Responsive Images?

Postby isul » Sat Aug 16, 2014 11:15 am

Sorry i made mistake. It is the right one.
Code: Select all
 p img    {
   width: 100%;
   height: auto !important;

}
isul
 
Posts: 13
Joined: Tue Jul 22, 2014 2:32 am


Return to Bolt Discussion

Who is online

Users browsing this forum: Yahoo [Bot] and 1 guest

cron