How to: link to image directly NOT an article containing image. Topic is solved

General questions relating to Joomla! 3.x.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10
Post Reply
bulgin
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 215
Joined: Sun Sep 30, 2007 10:18 pm

How to: link to image directly NOT an article containing image.

Post by bulgin » Sat Nov 21, 2020 6:14 pm

I can't wrap my head around how to introduce a link in text that opens an image in the media folder, directly.

All the directions I find for linking to an image assume it's an image in-line or in an article, with tips on how to simply insert an image into an article.

Maybe I'm missing something here.

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 39210
Joined: Sat Apr 05, 2008 9:58 pm

Re: How to: link to image directly NOT an article containing image.

Post by Webdongle » Sat Nov 21, 2020 6:31 pm

use the url of the image to open in new window.
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"The definition of insanity is doing the same thing over and over again, but expecting different results": Albert Einstein.

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 27296
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: How to: link to image directly NOT an article containing image.

Post by Per Yngve Berg » Sat Nov 21, 2020 6:40 pm

Where do you want yo show it?

You can add it to a custom html module.

Same procedure as adding in an article.

bulgin
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 215
Joined: Sun Sep 30, 2007 10:18 pm

Re: How to: link to image directly NOT an article containing image.

Post by bulgin » Sat Nov 21, 2020 9:33 pm

Thanks! I got it solved thanks to you all. I can use the link directly to the image - the issue was finding that but I figured that out, too.

Best wishes to everyone!

annahersh
Joomla! Guru
Joomla! Guru
Posts: 708
Joined: Wed Aug 15, 2018 8:23 pm

Re: How to: link to image directly NOT an article containing image.

Post by annahersh » Sun Nov 22, 2020 8:01 am

bulgin wrote:
Sat Nov 21, 2020 9:33 pm
I can use the link directly to the image
You can add attribute class="modal" to the image's anchor tag to open the linked image in an overlaid modal window.

Example

Code: Select all

<a href="images/big-image.jpg" class="modal">
  <img src="images/small-image.jpg" />
</a>

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 39210
Joined: Sat Apr 05, 2008 9:58 pm

Re: How to: link to image directly NOT an article containing image.

Post by Webdongle » Sun Nov 22, 2020 2:31 pm

You can also use JCE with mediabox to create various ways to open the image.
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"The definition of insanity is doing the same thing over and over again, but expecting different results": Albert Einstein.

bulgin
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 215
Joined: Sun Sep 30, 2007 10:18 pm

Re: How to: link to image directly NOT an article containing image.

Post by bulgin » Sun Nov 22, 2020 3:41 pm

Hi @annahersh

So in JCE editor what are the steps for that. I've applied an anchor to the link but find no place to insert your example code. Or must it be done somewhere else?

That looks like a very fun solution and I'd like to use it!

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 39210
Joined: Sat Apr 05, 2008 9:58 pm

Re: How to: link to image directly NOT an article containing image.

Post by Webdongle » Sun Nov 22, 2020 5:51 pm

click in the link
Click the JCE link icon
Select popup tab
Select 'JCE mediabox' in type
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"The definition of insanity is doing the same thing over and over again, but expecting different results": Albert Einstein.

bulgin
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 215
Joined: Sun Sep 30, 2007 10:18 pm

Re: How to: link to image directly NOT an article containing image.

Post by bulgin » Sun Nov 22, 2020 9:55 pm

Thanks I did that, but the image doesn't pop up in a modal window or even a different window/tab - just takes over the current link. User will have to click "back" on browser to get to where they started from. Yes, I chose "new window'.

annahersh
Joomla! Guru
Joomla! Guru
Posts: 708
Joined: Wed Aug 15, 2018 8:23 pm

Re: How to: link to image directly NOT an article containing image.

Post by annahersh » Mon Nov 23, 2020 2:21 am

bulgin wrote:
Sun Nov 22, 2020 9:55 pm
Thanks I did that, but the image doesn't pop up in a modal window or even a different window/tab - just takes over the current link.
The function must not exist in your template. If you know how, add the following within the PHP coding

Code: Select all

JHtml::_('behavior.modal');

bulgin
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 215
Joined: Sun Sep 30, 2007 10:18 pm

Re: How to: link to image directly NOT an article containing image.

Post by bulgin » Mon Nov 23, 2020 3:12 am

Thanks @annahersh - I'm not afraid to plug in php code but approximately where in a template would it go - if there is a general location, that is.

I'm using shaper_helixultimate template.

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 39210
Joined: Sat Apr 05, 2008 9:58 pm

Re: How to: link to image directly NOT an article containing image.

Post by Webdongle » Mon Nov 23, 2020 7:28 am

Doing it correctly it works with any Template.

I have set out two test menu items on my site. One opens up a test Article which has a link that opens an image in a modal. The second opens up the image in a modal directly.

Both utilise JCE and JCE MediaBox popups
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"The definition of insanity is doing the same thing over and over again, but expecting different results": Albert Einstein.

annahersh
Joomla! Guru
Joomla! Guru
Posts: 708
Joined: Wed Aug 15, 2018 8:23 pm

Re: How to: link to image directly NOT an article containing image.

Post by annahersh » Mon Nov 23, 2020 8:56 am

bulgin wrote:
Mon Nov 23, 2020 3:12 am
Thanks @annahersh - I'm not afraid to plug in php code but approximately where in a template would it go
That code can be placed anywhere, however I tend to place it at the top.

Example

Code: Select all

<?php
/**
 * @package     Joomla.Site
 * @subpackage  Templates.protostar
 *
 * @copyright   Copyright (C) 2005 - 2020 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

// load modal
JHtml::_('behavior.modal');
That function will load the required core Joomla files
<link href="/media/system/css/modal.css" rel="stylesheet" type="text/css" />
<script src="/media/system/js/modal.js" type="text/javascript"></script>

and the inline head function

Code: Select all

function initSqueezeBox(event, container)
{
  SqueezeBox.assign($(container || document).find('a.modal').get(), {
    parse: 'rel'
  });
}

bulgin
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 215
Joined: Sun Sep 30, 2007 10:18 pm

Re: How to: link to image directly NOT an article containing image.

Post by bulgin » Mon Nov 23, 2020 2:59 pm

Thanks I'll try that out and report back. Have a great day!

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 39210
Joined: Sat Apr 05, 2008 9:58 pm

Re: How to: link to image directly NOT an article containing image.

Post by Webdongle » Mon Nov 23, 2020 4:35 pm

Have you tried the test yet? Is it the sort of thing that you are trying to achieve?
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"The definition of insanity is doing the same thing over and over again, but expecting different results": Albert Einstein.

bulgin
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 215
Joined: Sun Sep 30, 2007 10:18 pm

Re: How to: link to image directly NOT an article containing image.

Post by bulgin » Mon Nov 23, 2020 5:50 pm

Well I added the following to the index.php as suggested:

// load modal
JHtml::_('behavior.modal');

I'm assuming when you wrote

function initSqueezeBox(event, container)
{
SqueezeBox.assign($(container || document).find('a.modal').get(), {
parse: 'rel'
});
}

that is already loaded and I don't have to put that anywhere.

Currently it has not made a difference, simply loads the image on the same tab and the user would have to use their back button on browser to get back to the original page.

annahersh
Joomla! Guru
Joomla! Guru
Posts: 708
Joined: Wed Aug 15, 2018 8:23 pm

Re: How to: link to image directly NOT an article containing image.

Post by annahersh » Mon Nov 23, 2020 6:30 pm

bulgin wrote:
Mon Nov 23, 2020 5:50 pm
Well I added as suggested:
Currently it has not made a difference, simply loads the image on the same tab and the user would have to use their back button on browser to get back to the original page.
I can only assume that your template does not load or allow the MooTools library. Maybe it use just Bootstrap methods

To load the MooTools, try the following

Code: Select all

JHtml::_('behavior.framework');
JHtml::_('behavior.core'); // mootools
JHtml::_('behavior.modal'); // modal script
See details at https://docs.joomla.org/J3.x:Javascript_Frameworks

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 39210
Joined: Sat Apr 05, 2008 9:58 pm

Re: How to: link to image directly NOT an article containing image.

Post by Webdongle » Mon Nov 23, 2020 10:42 pm

Why go to all that trouble when it can be done in 3 simple steps with JCE and MediaBox?
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"The definition of insanity is doing the same thing over and over again, but expecting different results": Albert Einstein.

bulgin
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 215
Joined: Sun Sep 30, 2007 10:18 pm

Re: How to: link to image directly NOT an article containing image.

Post by bulgin » Tue Nov 24, 2020 4:13 pm

I have JCE and MediaBox and I'm beginning to think it's the joomlashaper template and not joomla.

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 39210
Joined: Sat Apr 05, 2008 9:58 pm

Re: How to: link to image directly NOT an article containing image.

Post by Webdongle » Tue Nov 24, 2020 11:51 pm

JCE and MediaBox work independent of the Template.
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"The definition of insanity is doing the same thing over and over again, but expecting different results": Albert Einstein.


Post Reply

Return to “General Questions/New to Joomla! 3.x”