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
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
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:
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!!
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!!
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:
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!!
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!!
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
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
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:
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:
This way EasyLayouts generates a code similar to this:
Finally you need to close the anchor tag in the image field:
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?
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: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:
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:
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.