1. Dennis Helm
  2. Presale Questions
  3. Wednesday, 18 September 2019
  4.  Subscribe via email
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
Accepted Answer
Accepted Answer Pending Moderation
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!!
  1. more than a month ago
  2. Presale Questions
  3. # Permalink
Accepted Answer Pending Moderation
Thanks Carlos, that worked good for me!
  1. more than a month ago
  2. Presale Questions
  3. # 1
Accepted Answer Pending Moderation
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
  1. more than a month ago
  2. Presale Questions
  3. # 2
Accepted Answer Pending Moderation
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?
Attachments (3)
  1. more than a month ago
  2. Presale Questions
  3. # 3
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Keep up to date

Keep up to date with news about EasyLayouts