Where to put layout pictures

Hello,

I want to integrate a rating system, so I need some star-pictures.

In which folder should those pictures located an how can I call them in a view?

Tobi

  • Anywhere in your plugin folder, typically 'graphics' or '_graphics' folder. 

    $url = elgg_get_site_url() . 'mod/myplugin/graphics/something.jpg';

     

  • Now I have tried, but it does not work. The picture URL is always redirected to the activity page.

  • show your coding so we can more easily see how you doing it. :)

  • Here my code (ratingcss.php):

    <?php
    $url = elgg_get_site_url() . 'mod/agvideo/_graphics/stars.png';
    ?>
    <style type="text/css" ><!--
    .rating {
        width:100px;   
        height:20px;
        float:left;
        background:url(<?php echo $url;?>);
        cursor:pointer;
    }
    ...

     

    An so is the file included
    elgg_extend_view('page/elements/head', 'agvideo/ratingcss');

  • ok, a couple of things:

    1) CSS should not be in your php files unless it's a css.php (with only css)

    2) You said  "The picture URL is always redirected to the activity page." you mean when you click on the picture or something else?

    I'm surprised your star even shows up at all if that is the full coding for ratingcss.php since nowhere does your code actually add a class="rating" element to the DOM. Is that all of ratingcss.php or only a bit? Please provide all if only a bit.

     

     

     

     

  • I cant click on the picture - I just copy the picture url and try to see it in the browser, but I am redirected to the startpage (activity page). So I guess that the url

    $url = elgg_get_site_url() . 'mod/votw_video/_graphics/stars.png';

    is not the right way to call the picture

     

    Her are some more code

    the original ratingscript comes from here
    -> http://www.flosenart.de/blog/?p=6 (german)

    views/default/agvideo/rating.php

    <?php
    //CSS erweitern
    elgg_extend_view('page/elements/head', 'agvideo/ratingcss');
    //javascript
    elgg_load_js('ag_rating'); //is defined in the init function of the modul

    $section='agvideo';
    //different database for rating
    require_once dirname(__FILE__) . '/../../../settings_rating.php';
    //DB-Connection
    $r2 =mysql_connect( $host_rat,$user_rat, $pass_rat) OR die(mysql_error());
    mysql_select_db($db_rat,$r2) OR die(mysql_error());

    $vid=$vars['video']->guid;

    $sql = 'SELECT Rating FROM rating WHERE Section = \''.$section.'\' AND    CID = '.$vid;
    $result = mysql_query($sql,$r2) OR die(mysql_error());
    $votesnr = 0;             //Die Anzahl der abgegebenen Votes
    $totalvotes = 0;          //Die Summe der Votes(1-5)
     var_dump($result);
    while($row = mysql_fetch_assoc($result))
    {
        $votesnr++;
        $totalvotes += $row['Rating'];
    }

     
    if($votesnr == 0){
        $rating = 0;
    }else{
        $rating = $totalvotes/$votesnr;
    }
    $roundedrating = floor($rating)+round($rating - floor($rating))/2;
     
    //alte DB wieder waehlen
    mysql_select_db($GLOBALS['CONFIG']->dbname) OR die(mysql_error());

    echo '<div style="margin-left:15px;">';
    echo '<div class="flosen-rating" id="rating'.$section.'contid'.$vid.'result'.$roundedrating.'"
            style="background-position:0 -'.($roundedrating*40).'px;">';
    echo '    <div class="flosens"></div>';
    echo '    <div class="flosens"></div>';
    echo '    <div class="flosens"></div>';
    echo '    <div class="flosens"></div>';
    echo '    <div class="flosens"></div>';
    echo '</div>';
    echo '<div class="ergebnis">';
    echo '    <span style="color:#ff6600">&nbsp;&nbsp;&Oslash; '.round($rating,2).'</span>';
    echo '</div>';
    echo '<br /><br />';
    echo '<font size="1"> Bewertungen: '.$votesnr.' </font> ';
    echo '</div>';
    ?>

    views/default/agvideo/ratingcss.php

    <?php
    $url = elgg_get_site_url() . 'mod/votw_video/_graphics/stars.png';
    ?>
    <style type="text/css" ><!--
    .flosen-rating {
        width:100px;   
        height:20px;
        float:left;
        background:url(<?php echo $url;?>);
        cursor:pointer;
    }
    .flosens {
        width:20px;
        height:20px;
        float:left;
    }
    .ergebnis {
        float:left;
        height:20px;
        color:#454545;
        margin-left:15px;
        line-height:110%;
    }
    -->
    </style>

    views/default/js/agvideo/rating.php

    <?php
    $ts = time();
    $token = generate_action_token($ts);
    $url = elgg_get_site_url() . 'action/agvideo/rating?__elgg_ts='.$ts.'&__elgg_token='.$token;
    ?>
    $(function()
    {
        $('.flosens').mouseover(function (){
            var logos = $(this).index()+1;
            $(this).parent().css('background-position','0-'+(40*logos)+'px');
        })
     
        $('.flosen-rating').mouseout(function (){
            var originalresult = $(this).attr('id').split('result')[1];
            $(this).css("background-position","0 -" + (40 * originalresult) + "px");
        })
     
        $('.flosens').click(function (){
            //Die ID aus der Div mit der Klasse "flosen-rating" wird aufgeteilt
            var split1 = $(this).parent().attr('id').split('rating')[1].split('contid');       
     
            //in dieser steht nun "compositing"
            var section = split1[0];           
     
            //ID des Inhaltes, nach unserem Beispiel hier die 0
            var contid = split1[1].split('result')[0];   
     
            //Anzahl der Bewertungen, in dem Fall auch die 0
            var vote = $(this).index()+1;       
            $.ajax({
                type: "POST",
                url: "<?php echo $url;?>",
                data: "section="+section+"&vote="+vote+"&contid="+contid
            });
            $(this).parent().removeAttr("id");
            $(this).parent().html(" ");
        })
    });


  • 1. Too much inline sql. Use elgg api in stead

    2. Do not use <style> tags in your css.php files

    3. Your CSS is commented out

    4. You can use elgg.action in your js files. It will automatically add all the necessary tokens

    5. I am assuming you need to wrap your js in $(document).ready(), otherwise it won't initialize at the right time

    6. The image path is correct and should work, provided you have a _graphics folder in mod/plugin_name and stars.png is in there

    7. Any reason not to use existing community plugins, e.g. elggx fivestar or hypestarrating?

  • 1.) I need inline sql because the rating comes from another database

    2.) the style Tag is needed, because the css is added into the head, it is not externally

    3.) It is a relict for really old browsers

    4.) I will have a look at elgg.action

    5.) the js is working

    6.) picture is showing now - the rights for the picture were not correctly

    7.) I need the rating not only in the elgg site (look 1.)

  • For no. 2, take a look at elgg_register_css() and elgg_load_css()