Wednesday, 18 September 2019
  4 Replies
  6.2K Visits
0
Votes
Undo
  Subscribe
Hi Folks,

two short question:
a) I need to have an image (outputed by a custom field) to be linked to its article:
https://www.screencast.com/t/Ee2wtv78z5

This is done within a Category Blog : Article (Intro)

b) On the Article Detail page i need to have the image to be opend in a modal view, when clicked on:
https://www.screencast.com/t/7a8NchxF

Suggestions?
Thanks as always,
Dennis
4 years ago
·
#2241
Accepted Answer
Hi Dennis,
you almost got it!!

You just needed to add the content of the modal ;). I have fixed adding again the custom field and wrapping it in a container with the id and the proper "modal" class.

Also I have replaced the id with "productbild" I cannot stand using default classes from examples in production :P

The modal now works but the css of your them does not allow it to correctly display. A quick fix will be adding this css to your layout css part:


.modal-backdrop {
z-index: -1;
}


Also I have noticed your template uses UIKit 3 as frontend framework so maybe using uikit will be a better option as it's much more modern than BS2 and in my opinion allows you to do wonderful things.

Best!!
4 years ago
·
#2242
Thanks Carlos, that worked good for me!
4 years ago
·
#2241
Accepted Answer
Hi Dennis,
you almost got it!!

You just needed to add the content of the modal ;). I have fixed adding again the custom field and wrapping it in a container with the id and the proper "modal" class.

Also I have replaced the id with "productbild" I cannot stand using default classes from examples in production :P

The modal now works but the css of your them does not allow it to correctly display. A quick fix will be adding this css to your layout css part:


.modal-backdrop {
z-index: -1;
}


Also I have noticed your template uses UIKit 3 as frontend framework so maybe using uikit will be a better option as it's much more modern than BS2 and in my opinion allows you to do wonderful things.

Best!!
4 years ago
·
#2235
Hi Carlos,

thanks for getting the right tipps: The Linked images are working perfect as described!

Secon i tried the Modal on my own but get stucked: I use Bootsrap 2 and did make some addings to the wrappers of the Image itself:
https://www.screencast.com/t/5M2Cl7jM

Unfortunally that does not effect. I´ve looked up at https://getbootstrap.com/2.3.2/javascript.html#modals but that didn´t helped me either.
Amy Idea on this?

Thanks,
Dennis
4 years ago
·
#2234
Hi Dennis,
to accomplish that you need to get a bit imaginative in your layout. ;). What I have done in some of my projects with similar requirements is to add the field "Article Title Link" above the image:

Captura de pantalla 2019-09-19 a las 10.22.18.png

Then I have configured that field to output the Raw URL and I have also carefully added the anchor tag html in the HTML Wrapper - Top:

Captura de pantalla 2019-09-19 a las 10.23.24.png

This way EasyLayouts generates a code similar to this:


<a href="/ARTICLE_URL"><img src="/IMAGE_URL" />


Finally you need to close the anchor tag in the image field:

Captura de pantalla 2019-09-19 a las 10.25.35.png

In my screenshots I use the image field and not a media custom field, but the logic is exactly the same in your scenario.

For the modal page, you can use a similar logic but using Bootstrap or UIKit modal API so that the content is triggered easily. Which CSS and JS framework is your site?
  • Page :
  • 1
There are no replies made for this post yet.

If you use EasyLayouts please post a rating and a review at the
Joomla! Extensions Directory.