Archived topic
Adding graphic elements to pages using hook elements
9 replies · Started by Carsten on April 25, 2020
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
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.
Hi there, my php skills are next to nothing,so since the element is executing php, I expected them to be wrapped to work ;-)
You shouldn't need to add PHP at all in the Hook content unless you're doing something very advanced.
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
Hi there,
you just need to use an <img /> HTML tag - you may find this useful:
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?
Nope that markup you have is correct - check the URL to your image in a browser tab to make sure it is correct.
Yes, it's working now, great!
Thank you!
Glad we could be of help
