Support is part of Event Gallery Extended.

Please get a subscription if you need support. Feel free to use the ticket system or the contact form for reporting defects or pre-sale questions. Make sure you're logged in in order to be able to create a new ticket.

For general information you can also jump to the manual.

Subscribe now!

#2051 how to edit the height of a single image?

Posted in ‘Event Gallery Extended’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by sbluege on Tuesday, 05 April 2016 11:13 UTC

I'm referring to this topic: #1992
I also would like to present one image in an article, but from a folder with more pictures in it. Clicking on it it shall open the gallery-lightbox with access to all further images in the concering folder. This is something we use the EventGallery-module for, right?
But am I right saying that it is not possible at the moment to edit the height of this one image? I found no other way than showing it as a square tile, which means that a tile with a page-width of 1000px (which is adjustable in the backend) increases also its height up to 1000px automatically.
Or is there a way to edit this in CSS?

Thanks in advance!

sbluege
You want to use the content plugin, not the modules.

There is no option to change the height of images since there is no need for it. If you don't want square sized thumbnails chose another layout instead. Example: {eventgallery event="foo" max_images=4 mode=imagelist} which would use the imagelist layout. If you want to add more images of an event use this tag: {eventgallery event="foo" offset=5 max_images=4 mode=hidden}. It'll render more images so the lightbox can pick them up.

Examples: http://svenbluege.de/demo/index.php/events-in-articles
Manual: https://www.svenbluege.de/joomla-event-gallery/event-gallery-manual/plugins-and-modules#content-plugin

If you want to adjust the number of items per row for some layouts you can have a look at this page:
https://www.svenbluege.de/joomla-event-gallery/event-gallery-manual/customize-event-grid-layout

Thanks for your fast und precise replay.

I used this: {eventgallery event='lissieu' attr=images mode=imagelist max_images=1 thumb_width=978} to show first of all just one image in full width. But the thumbnail-width is now automatically reduced to 50px. Looking at the element-information I get this:
data-rowheightjitter="50". Where is this set?
http://berneyflutes.com/2015/index.php/the-flutes/renaissance-flutes, see the gallery at the bottom of "Lissieu".

sbluege
If you use the imagelist as layout the thumb_with-parameter makes no sense since the layout will be generated automatically.

If you want to show just one image use the grid layout. By default a thumbnail will fill about 25% of the space. Use the CSS trick I mentioned to make it fill up to 100%.

Ok. Generally: clicking on the thumbnails open the lightbox-gallery, this is exactly what I want.
But again, I don't get the image in its original aspect ratio, fitting to a (page-)width of 100%.

As you recommended I used this pure and simple code: {eventgallery event='lissieu' mode=grid max_images=1}.

And I copied the follwing into my template.css as you also recommended
.eventgallery-tiles-list .eventgallery-tile {
width: 100%;
}

But something produces this code automatically:

img.eventgallery-lazyme.eventgallery-lazyload-loaded {
width: 50px;
height: 50px;
[...]
}

So the result is a very small thumbnail (50x50px), not a width of 100% and still in a cropping square tile format.

sbluege

Can you provide a link to this page please?

Yes, sure. See my post from 10:23 UTC. Thanks.

sbluege
I guess I missed two things:

1. the url
2. you're using Event Gallery 3.4. Please update to Event Gallery 3.5. The content plugin has improved in the new version.

Sorry for the missing url:
http://berneyflutes.com/2015/index.php/the-flutes/renaissance-flutes

see the gallery at the bottom of "Lissieu".

__


I just updated to the new version of EventGallery Extended (3.5.4).
Nothing changed unfortunately. Any further suggestions?

sbluege
There is a surrounding div tag with the class ".gallery-wrapper". This div has no width. Can you try to remove this class? We need to give the thumbnail section more space.

I commented the line out. This increases the size of the image a bit, but there seems to be something wrong anyhow:
http://berneyflutes.com/2015/index.php/the-flutes/renaissance-flutes

In my opinion what we see is a generated small thumbnail of the original image, which seems to have an original width of 288px (see attached screenshot). I increased the class img.eventgallery-lazyme.eventgallery-lazyload-loaded to a width of 900px to see what happens.

Do you have an example somewhere on your website using the grid-modem but with just one image per row?

sbluege
You can use this CSS snippet:

.eventgallery-simplelist .eventgallery-simplelist-tile {
    width: 100%;
}


by default we show 4 item per row (25%). If an item is 100% width we show just one per line.

Thanks again Sven, this get's me close to aim now.
There is a div surrounding the image,

div.eventgallery-simplelist.eventgallery-thumbnails.thumbnails

which is now displayed with a height of 1128px, though the image has a height of 287px.
How comes this about? http://berneyflutes.com/2015/index.php/the-flutes/renaissance-flutes

sbluege
Well.... that's how this layout works. It always uses a square sized container.

How often do you plan to change this tag? In the worst case we can kind of hard code the HTML for the first image and let the other tag render the hidden images.

I plan to add a content plugin which can add a single image... but so far it's not available.

I want to use the plugin for every flute on this customer's website, this means 16 times over all flute-pages. The customers at first asked for a grid-gallery below the text with 4 images which would have worked fine with your EventGallery.
Then he changed his mind and dropped the galleries instead for one single header-image (as a link to the light-box-gallery with more hidden images) at the top of the text.

As I appreciate your EventGallery because it provides some features other plugins don't in the combination I need, I would like to stick to your plugin nevertheless. So I would be grateful to get some hard-coding, yes. Best would be to get something flexible fitting to the image inside the div, I would set the margins then if needed.

You already mentioned in topic#1992 that you plan to provide is a single-image-feauture in the future, this would be great!

My last question is related to the hidden images. I don't understand at all how max_images and offset work in combination with the grid-mode and only one image in a row. But probably it's better to create a new topic for this, right?

Thanks for your fast replies and you precise support.



sbluege
This would work:

<a class="thumbnail eventgallery_cboxElement" href="http://berneyflutes.com/2015/components/com_eventgallery/helpers/image.php?&mode=full&folder=lissieu&file=Lissieu_main.jpg" title="" data-title="%3Cspan%20class%3D%22img-exif%22%3ECanon%20EOS%205D%20Mark%20III%00%2C%2050mm%2C%20f%2F21.9%2C%20ISO%20100%3C%2Fspan%3E" rel="galleryplugin9ce88b9e16496ded16d1059c2ad265ab" data-eventgallery-lightbox="gallery"><img class="" data-width="4599" data-height="1194" src="http://berneyflutes.com/2015/components/com_eventgallery/helpers/image.php?&mode=uncrop&width=1152&folder=lissieu&file=Lissieu_main.jpg" style="width: 100%; height: auto;" alt="Lissieu">   </a>


You need to ajdust two things here: the href attribute of the A tag and the src attribute of the IMG tag. The thumbnail is currently 1152px. If this is not enough make it larger. The image will resize to the screen size but the source will stay the same.

You want to show one image. If a user clicks on it, the lightbox should open and there should be more images, right?
Add this tag to your article:

{eventgallery event="lissieu" offset=1 max_images=100 mode=hidden}

This will skip the first image and add 100 additional images to the lightbox.

Yes, almost done! There is still one mistake.

The concerning gallery-folder contains 5 pictures:

Lissieu1.jpg
Lissieu2.jpg
Lissieu3.jpg
Lissieu4.jpg
Lissieu_main.jpg

The hard-coded line now shows the Lissieu_main.jpg (the whole flute) on the article-page: correct.
Clicking on it opens the lightbox: correct.
At first the Lissieu_main.jpg appears again: this is what I want, too, but it seems to work by mistake.

And then stepping trough the gallery: the Lissieu_main.jpg appears 2 times more, only then appear the 5 pictures of that gallery-folder (see above).

As in the gallery there are 5 images I used this tag:
{eventgallery event='lissieu' max_images=5 mode=hidden}

I don't want to offset, so I deleted offset=1. I will rename Lissieu_main.jpg to Lissieu0.jpg both in the hard-coded link and in the gallery, then it will appear at the start of the gallery before the other four images.

But why do the Lissieu_main.jpg now appear three times in a row?
http://berneyflutes.com/2015/index.php/the-flutes/renaissance-flutes

sbluege
if the main image is the last image and you have 5 images in total you can use this tag which only renders 4 images

{eventgallery event='lissieu' max_images=4 mode=hidden}

But the source code of this page looks wired. Can you provide the whole article content please? What I see so far: you missed to close the A-tag from my example above.

The article is part of a category-blog. I copied the code of this article. I unpublished the other articles for the moment.

As far as I can see I closed the <a>-tag:


______________________

<p><a name="lissieu"></a></p>
<div class="section-ochre2 top-section">
<div class="container stage-content">
<h1>Lissieu</h1>
</div>
</div>
<div id="bg-lissieu">
<div class="stage-image"><img class="content-img" src="https://www.svenbluege.de/images/images/content-images/flutes/renaissance/lissieu.jpg" alt="lissieu" />
</div>
</div>
<div class="section-ochre2">
<div class="container stage-content frame30">
<div class="row">
<div class="col-xs-12 col-md-6">This unusual model is a copy of an original in the Kunsthistorisches Museum in Vienna, made by the French maker Lissieu, active in Lyon during the second half of the seventeenth century. Little is known about his life, but his instruments appear to have been well known for their quality and fine workmanship. One of the references to this maker is found in the Musette method of Piere Borjon de Scellery (Lyon, 1672):<br /><br /><em>"Le sieur Lissieux, qui depuis quelques anneé s'est étably à Lyon, en construit [des musettes] avec beaucoup de propreté et de justesse, aussi bien que toute sorte d'utres instruments à vent. Je n'en connois point qui approche davantage de l'adresse des sieurs Hotteterre."</em><br />("Mr. Lissieux, who has been established in Lyon for a few years, makes them [musettes] with great accuracy and good intonation, as well as all sorts of other wind instruments. I don't know any other maker who approaches him in quality of work, apart for the Hotteterres")</div>
<div class="col-xs-12 col-md-6">Apart from this flute there are only two other surviving instruments by Lissieu: a small recorder in a private collection in Boston, MA, and a beautifully made musette de cour surviving in the collection of Moreph Chantry Bagpipe Museum in England. The musette can be dated to the 1670's.<br /><br />This flute is a high pitched instrument, playing at A=460 and is, acoustically speaking, of a renaissance design. With a cylindrical bore and six finger holes, it works well with renaissance fingerings. The wall thickness is slightly larger than an average renaissance flute, which, combined with the higher pitch, give this instrument a sweet, clear sound, reminiscent of a mute cornet.<br /><br />As for the instrument's repertoire, it is difficult to say what French flutists during this time period would have played on such an instrument. The high pitch, and the type of sound and response are, however, most suitable for playing earlier seventeenth century repertoire, such as Italian Canzonas and early Sonatas, and combines well with other wind instruments at high pitch such as cornets, dulcians and trombones.<br /><br />This model is available at the original pitch, A=460, as well as with an extra body for A=465.</div>
</div>
</div>
<div class="container-fluid gallery section-ochre1">
<div class="container"><a class="thumbnail eventgallery_cboxElement" href="http://berneyflutes.com/2015/components/com_eventgallery/helpers/image.php?&mode=full&folder=lissieu&file=Lissieu_main.jpg" title="" data-title="%3Cspan%20class%3D%22img-exif%22%3ECanon%20EOS%205D%20Mark%20III%00%2C%2050mm%2C%20f%2F21.9%2C%20ISO%20100%3C%2Fspan%3E" rel="galleryplugin9ce88b9e16496ded16d1059c2ad265ab" data-eventgallery-lightbox="gallery"><img class="" data-width="4599" data-height="1194" src="http://berneyflutes.com/2015/components/com_eventgallery/helpers/image.php?&mode=uncrop&width=1152&folder=lissieu&file=Lissieu_main.jpg" style="width: 100%; height: auto;" alt="Lissieu" /> {eventgallery event='lissieu' max_images=5 mode=hidden}</a>
</div>
</div>
<div class="container-fluid totop-bg-ochre2">
<div class="container page-nav "><a href="https://www.svenbluege.de/#top">to top</a>
</div>
</div>
</div>

_________________

sbluege
Yes... you did. But please don't add the tag {eventgallery event='lissieu' max_images=5 mode=hidden} inside this A-tag. Place it somewhere below.

YES! Everything is fine now and works exactly as it should!

Note (just for people who read this topic until the end):

You wrote this in your last post: "if the main image is the last image and you have 5 images in total you can use this tag which only renders 4 images: {eventgallery event='lissieu' max_images=5 mode=hidden} "

I think you meant max_images=4, because this prevents the last (the fith) image from being shown. Correct?
I set 4 and it works perfect now.

___


I appreciate your patience and your helpful support for over two days. Thank you very much for that!
And let us know if you're going to publish the single-image-feature. This would be a great.
Thanks / Danke!

sbluege
You're right. I changed it ;)