Bug: columns not using the complete width of an image row

[BjoernH01]

Hi,
thanks a lot for this long awaited extension for the great JoomGallery!
Yesterday I've tested the alpha3 of Bootone for Bootstrap 2.0 on a testsite:

Joomla 3.4.1
Gantry5 with Ethereal Rockettheme Template (however the problem also exists with the normal Joomla Protostar template)
JoomGallery 3.2.1
Bootone Alpha 3 for 2.x

I've set up a small gallery with 3 columns, each thumbnail should have a width of 350px and a height of 263px.

However the images are resized on the frontend to 290px width (real image width is 350px), only on the detail view they are shown with 350px.

If I change to 2 columns, the images get 350px width.

The problem seems to me that the image row takes only about 80% of the width of the template which is 1200px

Here you can see it online:
http://www.hallier.de/index.php/joomgallery

If you want to have access to the backend, please send me a note / email.

Thanks in advance,
Björn

[Chraneco]

Thanks for the feedback and the link to your page! This should be fixed with release Alpha 4.
Could you please confirm that?

[BjoernH01]

I can confirm that it's functioning now in the category / subcategory view but not in the main gallery view!

Not working (image still too small)
http://www.hallier.de/index.php/joomgallery

Working:
http://www.hallier.de/index.php/joomgallery/bayliner

Is there a reason why all the image names are shown as -h3-?
I don't think that it's so wise for SEO-reasons to maybe have 30 oder 40 -h3- on one page.
Wouldn't it be better to format it with rem instead and maybe have the -h3- only on detail view?
Or let the user choose what kind of headline he wants?

[Chraneco]

According to the HTML source code of your gallery view there is still the old version used. Maybe there is some kind of caching going on or the layout was not updated correctly. In file components/com_joomgallery/views/gallery/tmpl/bootone.php you should find a line that looks like this:
<div class="row-fluid jg-thumbnails-area">. If it's not there please replace the file with the corresponding one from the downloaded zip archive.

---

Having H3s in the thumbnail areas is based on another feature request: http://joomgallery.uservoice.com/forums/13274-joomgallery-feature-requests/suggestions/144902-better-css-compatible-html-code
In my opinion it is the correct way to go, too.

As far as I know you can have as many headings as you need on a page. You should be careful only with the H1 tag.

But if you read something that contradicts this please let me know.

If a user wants to change the headings he can do that by creating a template override. This is the power of Joomla's alternative layout system: You can have other layouts that can be overridden as well.

[BjoernH01]

Caching can't be the reason since it's turned completey off (and even after cleaning the browser cache the problem exits).

The bootone.php within gallery/tmpl has the div with class "row-fluid" so this shouln't be the reason either.

[Chraneco]

Okay, I think I made a mistake. Let's try this again with Alpha 5.

[BjoernH01]

Issue has been fixed!

Images also in gallery view are now shown with the width set in the background.

Thanks a lot!

One more suggestion:
the div "thumbnails" always takes the full width of the column, even if the image is much smaller.
Therefore the padding on the left and right of the image is much broader than on top and bottom.

Wouldn't it look much nicer if the padding on the left and right is always the same like the one on top of the image?

It's just a small issue that only appears if you resize the browser and the columns float and have more space.

[Chraneco]

You could try to fix that by adding

.thumbnail{
  display:inline-block;
}

to the end of your CSS.

I think the intention of Bootstrap not to have that as the default is that they are assuming the images already have to correct size.
You could also fix this by making your thumbnails slightly bigger. For smaller columns they will be automatically resized.

[BjoernH01]

Since I'm massively using JoomPlu for fetching image categories in blog articles, will JoomPlu also be made responsive?
That would be really awesome...

[Chraneco]

Yes, that is the long term goal. Unfortunately, the HTML output of the interface of JoomGallery (which JoomPlu is using) is not yet based on the new JLayout system of Joomla. This needs to change first (hopefully with the next feature release of JoomGallery).

[BjoernH01]

Is there a possibility to get the JoomPlu images responsive?
With: .jg_element_cat {width: auto !important;} at least they float in articles, however they don't get smaller.

[Chraneco]

You can try max-width:100% without specifying the actual width. This way the image should adapt to the parent container.

[BjoernH01]

That doesn't work since the container does not resize.
The divs for the images just float above each other insted of resizing and getting smaller.

[Chraneco]

You mean you want to keep several columns even on small screens?
Do you have an example link?