Tagged: ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • October 31, 2015 at 8:16 am #527859
    themeforesttony

    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 #527995
    Basilis

    Hi themeforesttony!

    Sorry, that was a wrong reply.
    I am really sorry about that.

    Cheers!
    Basilis

    • This reply was modified 9 years, 1 month ago by Basilis.
    October 31, 2015 at 10:58 pm #527997
    Basilis

    Hey!

    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!
    Basilis

    November 1, 2015 at 3:06 am #528037
    themeforesttony

    Basilis,
    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 #528639
    Yigit

    Hi!

    Can you attach your logo to your image and then upload it to Fullwidth slider?

    Regards,
    Yigit

    November 2, 2015 at 8:43 pm #528784
    themeforesttony

    I 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 #529031
    Ismael

    Hey!

    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,
    Ismael

    December 14, 2016 at 11:58 am #724220
    seanchk

    Hi 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 #724284
    Yigit

    Hi,

    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,
    Yigit

    November 2, 2020 at 2:46 pm #1257606
    Ship-ST

    Good 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 #1257755
    Victoria

    Hi Ship-ST,

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    November 3, 2020 at 12:12 pm #1257958
    Ship-ST

    Hi 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
    Matthieu

    November 5, 2020 at 6:34 pm #1258702
    Victoria

    Hi 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,
    Victoria

    November 9, 2020 at 10:58 am #1259202
    Ship-ST

    Thanks @Victoria,
    I was hoping for something more responsive within the full-screen slider, but I’ll do as you suggest.
    Best Regards

    Matthieu

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Add Image to "caption" on full-screen slider’ is closed to new replies.