Different styling for first returned feed item and integration with Haiku

  • Resolved keepitnang

    (@keepitnang)


    13 years, 8 months ago

    First of all I have to say that the functionality of this plugin ‘out of the box’ is quite excellent ??

    However, I am bringing in an iTunes feed for a site I am working on at the moment and would like to be able to style the top returned entry slightly differently to the rest of the entries (in this case the Number 1 song to have a different background colour as a minimum) and am wondering how I might be able to achieve this. I can see that I can drop in a hardcoded list item tag in hungryfeed.php before the $template_html and $rss_values are retrieved, but I’m afraid that I’m not proficient enough with PHP at the moment to know how to action an if/else statement based on the number of the record, so at the moment I only have 

    echo "<li class=\"song-info-holder\">\n";
			echo hungryfeed_merge_template($template_html,$rss_values);
			echo "</li>\n";

    Any pointers with this would be much appreciated.

    I would also like to integrate Haiku player with this in order to replace the enclosure links with the Haiku player. I have amended the Haiku code to work with the .m4a file extension and swap that out, but Haiku will not dynamically replace links unless they are within the content and does not work with replacing HTML generated within HungryFEED. As I cannot drop in the shortcode for Haiku into the HungryFEED templates as far as I am aware I was therefore looking at again hardcoding something in. Something along the lines of

    echo do_shortcode('[haiku url=]');

    Unfortunately I don’t (again!) know enough about how this works to be able to bring in the value of the url from $enclosure_link, so any help would appreciated with this too.

    I understand that this is all a bit of a big ask, but I have looked around quite extensively and cannot seem to find any articles that would enable me to answer my own questions on this occasion.

    Thanks in advance for any help that anyone may be able to provide me with.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor Jason

    (@verysimple)

    I would probably just use CSS so that you don’t have to modify the plugin code. you can style the first item (child) in any list using regular CSS & it’s supported in all major browsers: https://www.w3schools.com/cssref/sel_firstchild.asp

    for the haiku player, the hungryFEED templates don’t process shortcodes but the haiku plugin simply generates HTML, and you could paste that HTML code into the hungryFEED template. Again it shouldn’t require modifying any plugin code.

    That’s probably the route I would go for both of those – I’m pretty sure you can accomplish both things just by editing template code and CSS.

    Thread Starter keepitnang

    (@keepitnang)

    Thanks so much for your reply. The simpler solution as regards styling the list item is certainly the better option in this case ?? However, with regard to the Haiku plugin, I note that the HTML generated by this includes unique ID references for each feed item, for example 

    <div id="player-container1" class="player-container">
 <div id="player-container2" class="player-container">

    and so on. On this basis I hardcoded the player shortcode into hungryfeed.php using

    echo do_shortcode('[haiku url="' . $enclosure_link . '"]');

    Possibly not the most graceful of solutions, but it works for me. If you have any other suggestions I would welcome them though.

    Thanks again for your help on this.

    Plugin Contributor Jason

    (@verysimple)

    If you have it working that is great. The only issue will be upgrading HungryFEED when updates are released, but that’s probably the only negative.

    You could possibly solve the style issue like this:

    <div id="player-container{{id}}" class="player-container">
<div id="player-container{{id}}" class="player-container">

    then each container will have a unique id

    Plugin Contributor Jason

    (@verysimple)

    I just updated the plugin to 1.4.6 and it includes a new template tag that you can use {{index}} that outputs the index number of the item (ie 1,2,3, etc). So you could do this in the template:

    <div id="player-container{{index}}" class="player-container">
<div id="player-container{{index}}" class="player-container">
    Thread Starter keepitnang

    (@keepitnang)

    Thanks for the heads-up on that change – very useful. Unfortunately I have 40 entries to display per page, so I think I will stick with the hardcoded solution just for the time being. The update is certainly providing some handy extended functionality to an already excellent plugin though ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Different styling for first returned feed item and integration with Haiku’ is closed to new replies.