Tagged: add image, fullscreen slider
-
AuthorPosts
-
October 31, 2015 at 8:16 am #527859
I am using the Enfold one-page theme and want to know if it is possible to add an image (transparent background PNG file) in place of the caption title on a slide in the full-screen slider? If so how do I do it and will it be “responsive” in resizing on different platforms?
Thanks in advance.October 31, 2015 at 10:57 pm #527995Hi themeforesttony!
Sorry, that was a wrong reply.
I am really sorry about that.Cheers!
Basilis- This reply was modified 9 years ago by Basilis.
October 31, 2015 at 10:58 pm #527997Hey!
It is possible to do it, do you want to provide us a link og a page and a screenshot o what you aim to do, so we an help you further?
Cheers!
BasilisNovember 1, 2015 at 3:06 am #528037Basilis,
Thanks for responding. Below is a link to a comp of what I am trying to do.
Full width slider. Instead of Caption title (or in addition) I want to put a PNG image overlay (Raise Your Glass logo) in a fixed position on the slide. I’d like to be able to control relevant positioning and have it responsively autoscale as needed.
Thanks for any help you can provide.November 2, 2015 at 5:08 pm #528639Hi!
Can you attach your logo to your image and then upload it to Fullwidth slider?
Regards,
YigitNovember 2, 2015 at 8:43 pm #528784I can but the issue is the way the slider resizes images. I cannot get it to keep relative size and positioning correct.
November 3, 2015 at 8:17 am #529031Hey!
Use html tags in the slider caption.
<img src="URL TO THE IMAGE" class="custom-image">
Use the “.custom-image” selector to adjust the style (position, size etc) of the image on different screen sizes.
Regards,
IsmaelDecember 14, 2016 at 11:58 am #724220Hi Ismael,
Can you explain or show examples of Use the “.custom-image” selector to adjust the style (position, size etc) of the image on different screen sizes.
Thanks
December 14, 2016 at 2:47 pm #724284Hi,
Here is an example CSS code
@media only screen and (max-width: 1024px) and (min-width: 769px) { .custom-image { position: relative; top: 40px; } } @media only screen and (max-width: 768px) { .custom-image { position: relative; top: 20px; } }
Best regards,
YigitNovember 2, 2020 at 2:46 pm #1257606Good morning,
I tried to use HTML tags as suggested but it was escaped.
Then I tried to fix the special caracters issue as explained here: https://kriesi.at/documentation/enfold/intro-to-layout-builder/#using-special-characters
###lt### img src="https://www.rhino3d.com/en/images/Rhino6Logo.svg" class="custom-image"###gt###
But the code was still escaped (Code displayed instead of the picture)
Then I tried to fix it as explained here: https://kriesi.at/support/topic/enfold-4-7-1-issue-on-h1/#post-1173344
But it is even worse, even after removing the html tags the caption is not shown anymore!Can you help me?
Best regards
November 2, 2020 at 11:09 pm #1257755Hi Ship-ST,
Could you please attach a mockup of what you’re trying to achieve?
Best regards,
VictoriaNovember 3, 2020 at 12:12 pm #1257958Hi Victoria,
Please find attached a mockup of what I’m trying to do.
Ideally the logo Rhino® would be displayed as an overlay on the bottom left corner of the slide show, but if it were just below the slide caption it would be ok too.
Regards
MatthieuNovember 5, 2020 at 6:34 pm #1258702Hi Ship-ST,
It’s better to add this image to the image with Photoshop or use the Layer Slider to be able to achieve this look.
Best regards,
VictoriaNovember 9, 2020 at 10:58 am #1259202Thanks @Victoria,
I was hoping for something more responsive within the full-screen slider, but I’ll do as you suggest.
Best RegardsMatthieu
-
AuthorPosts
- The topic ‘Add Image to "caption" on full-screen slider’ is closed to new replies.