[Resolved] Adding graphic elements to pages using hook elements

Home Forums Support Adding graphic elements to pages using hook elements

  • This topic has 9 replies, 3 voices, and was last updated 1 month ago by David.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1254700
    Carsten

    Hi there, I would like to add different graphic elements or flavicons to different pages by using display rules.

    There are different methods, as I understand:

    One method is to use HTML icons:

    Use HTML to insert icons as an individual image.

    <i class="icon-home" style="color: #FF5D5D"></i>
    <a href="http://mysite.com"><i class="icon-home"></i></a>

    Another to use flavicon with something like this.

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

    Last option is to add a png.

    All three methods need to be wrapped into php to use in a hook element.
    I really would like to learn more about that, to get more control over my site content by using elements, which opens up a lot of new options. Any documentation on marking up content for elements?

    Creating an element for each page to put different graphic elements leads to many elements. How does elements affect load time and performance on a site, generelly?

    Regards
    Carsten

    #1255269
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Why would these elements need to be wrapped in PHP? What would the PHP be doing?

    The Display Rules determine whether to execute the Element or not. If you adding hundreds of Elements, you might notice it performance-wise somewhat, depending on your server. However, if you’re only adding a handful of them, it will make no difference.

    #1255312
    Carsten

    Hi there, my php skills are next to nothing,so since the element is executing php, I expected them to be wrapped to work 😉

    #1255722
    Tom
    Lead Developer
    Lead Developer

    You shouldn’t need to add PHP at all in the Hook content unless you’re doing something very advanced.

    #1256959
    Carsten

    Hi there, I would like to add individual png’s to individual hooks on pages, can I ask for your help, how this markup would look like, to insert in a hook element?

    Thanks

    #1257603
    David
    Staff
    Customer Support

    Hi there,

    you just need to use an <img /> HTML tag – you may find this useful:

    https://www.w3schools.com/tags/tag_img.asp

    #1257664
    Carsten

    Hi David, thanks for the link to 3schools,its working fine with the example.

    <img src="smiley.gif" alt="Smiley face" height="42" width="42">

    But I need to insert an image from my media directory, this would have been easy, but it is of course not working.

    <img src="https://domain/wp-content/uploads/2020/03/cropped-thumbs-up-e1587833175378-1.png">

    I guess I need to add href= for it to work, but how would the markup look for this?

    #1257698
    David
    Staff
    Customer Support

    Nope that markup you have is correct – check the URL to your image in a browser tab to make sure it is correct.

    #1257724
    Carsten

    Yes, it’s working now, great!

    Thank you!

    #1257746
    David
    Staff
    Customer Support

    Glad we could be of help

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.