Support

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!

#2809 Embedding Event Gallery photos in articles

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, 29 August 2017 12:36 UTC

applestone
Hi Sven

I wonder if you have a solution for the whitespace that seems to be added top and bottom of event gallery photos when posted into articles, or in this case, an Easy Blog article - see attached. The white space seems to be different for each photo ie a squarer photo has a larger whitespace.

Here's an article with a 16:9 ratio - http://www.terravitae.co.uk/index.php/news-and-articles-blog/smartphone-camera-compact-or-dslr

Here's an article with a 4:3 ratio - http://www.terravitae.co.uk/index.php/news-and-articles-blog/low-light-filming (the lower image).

In the latter image the whitespace is deeper than for the narrower image.

I'd be grateful for your thought on this Sven

Regards
David

Attachments

white_space_problems.jpg

sbluege
Hi,

Which tag do you use to add this image to your article? Right now in on example the image is set to 1080pxx607px but your template sets an auto-width which resizes the image. This results in the gaps you see.

applestone
Hi Sven
When I loaded your software it creates a macro or something which is included in the text box above the content area of an article. I just click on this and it allows me to choose a photo and then it adds the code into the article. Because the default size of the photo is just 50 px, which is tiny, I edit this to an arbitrary 1080px (ie no particular reason). I don't edit anything else. 
How do I overcome this problem? It's great to be able to add photos but the white space is a problem. 
Regards David 

On 26 Aug 2017 6:54 pm, "Sven Bluege" <sbluege@gmail.com> wrote:

sbluege
So you're using the fixed thumbnails? Instead of 1080px you can just use 960px. Or you can use one of the other layout options which fit the images automatically. Please have a look at the image insert dialog option. The mode setting is what you're looking for.

https://www.svenbluege.de/joomla-event-gallery/event-gallery-manual/plugins-and-modules#content-plugin

applestone
Hi Sven

It seems that you are expecting us to include tiny images in our articles but this isn't always the case. I'm sure that like me, many people want to add images of all sizes into our articles.

Having played around with various settings / sizes, if the image size is say, 960px, while it looks great on the desktop, it doesn't seem to format so well on mobile devices. On my Nvidia Shield (8" tablet) the white-space increases markedly and on my Samsung S6 it's huge, approaching 2" (50mm) I'd say. Wouldn't it be better to allow us to set a % value for width rather than a fixed parameter e.g. 100% rather than 960px? Would that solve the problem?

Regards
David

sbluege
You're right, you can add a single image only with a fixed width and the side effects you describe. My hint was related to the options you have for an event in an article. This is the workaround I suggest for now. Add an event to the article and set the offset and the max_images parameter in a way you only see one image. With the imagelist layout you get the result you want.

I'll add an item to my list to make the single image stuff more useful. Adding a simple % value will not work. Your template is actually doing this for you.

sbluege
Maybe I have a quick solution for you. Please open the file /plugins/content/eventgallery/tmpl/image.php and replace the content with this:

<?php // no direct access
defined('_JEXEC') or die('Restricted access');
/**
 * @var EventgalleryLibraryFile $file
 */
?>

<?php
    if (strlen($this->mode)>0) {
        include_once JPATH_ADMINISTRATOR.DIRECTORY_SEPARATOR.'components'.DIRECTORY_SEPARATOR.'com_eventgallery/version.php';
        // Load necessary media files 
        EventgalleryHelpersMedialoader::load();
    }
?>
<?php IF ($this->mode == 'raw'):?>
<?php
    echo '<img src="https://www.svenbluege.de/' . $file->getImageUrl($params->get('thumb_width'), $params->get('thumb_width'), false, $this->doCrop) . '" class="' . $this->cssClass . '">';
?>
<?php ELSE: ?>
    <?php
    $this->entry = $file;
    $this->folder = $folder;
    $this->params = $params;
    $this->params->set('use_cart', 0);
    $this->currentItemid = null;
    $this->showContent=false;
    $this->rel='plugin';
    $path = JPATH_SITE . '/components/com_eventgallery/views/snippets/tmpl/social.php';
    include $path;
    ?>

    <a class="<?php echo $this->cssClass; ?>"
        <?php IF ($this->mode == 'lightbox' || $this->mode == 'hidden'): ?>
               data-title="<?php echo rawurlencode($file->getLightBoxTitle()) ?>"
               data-eventgallery-lightbox="gallery"
               rel="galleryplugin<?php echo md5($folder->getFolderName()); ?>"
               href="https://www.svenbluege.de/<?php echo $file->getImageUrl(NULL, NULL, true) ?>">

        <span class="eventgallery-icon-container" style="display:none" data-visible="true"><?php echo $this->loadSnippet('event/inc/icon_add2cart'); ?><?php echo $this->loadSnippet('event/inc/icon_socialsharing'); ?></span>

        <?php ELSE: ?>
                href="https://www.svenbluege.de/<?php echo JRoute::_(EventgalleryHelpersRoute::createEventRoute($folder->getFolderName(), $folder->getTags(), $folder->getCategoryId())) ?>">
        <?php ENDIF?>
    <?php
        /**
         * @var EventgalleryLibraryInterfaceImage $file
         */
        echo '<img src="https://www.svenbluege.de/' . $file->getImageUrl($params->get('thumb_width'), $params->get('thumb_width'), false, $this->doCrop) . '" class="' . $this->cssClass . '">';
    ?></a>

<?php ENDIF ?>


Does this work for you?

applestone
Nice job Sven. I have no idea what you have done but that seems to have fixed the problem. On both my PC and smartphone the white-space is now minimal and the look is very much more attractive.

I have to say Sven, your product is amazing and your support, exemplary. Well done.

Thank you
David

sbluege
Thanks!

My change is pretty simple. Event Gallery shows images always as a blank 1x1 pixel gif with the picture as background. The resizing happens via JavaScript so I can always use the right image size. If you add a single image only no JS magic happens, so the image uses exactly the size you specified. Your template tries to fit the 1x1px to the available screen and auto adjust the height. That causes the margins around those images.

I'll include that change in the next release, so you don't need to care about it again.