Drupal-7 rss feed icon to text - php

I am looking for a way to modify the default Views feed icon from an image to a text value. I have found several cases where people change the default image to a new image, but I prefer working with fonts as they look more crisp regardless of resolution or device.
The idea is to replace the image with a FontAwesome icon (fa-rss-square, &#xf143). I have had succes with changing the default text in the search-block, ie.:
function theme_form_alter(&$form, &$form_state, $form_id) {
if($form_id == 'search_block_form') {
$form['actions']['submit']['#value'] = decode_entities('');
}
}
I am a newbie when it comes to php, so my attempts of modifying the hook explained in the Drupal-API has not worked (thus far):
function theme_feed_icon($variables) {
$text = t('Subscribe to !feed-title', array('!feed-title' => $variables['title']));
if ($image = theme('image', array('path' => 'misc/feed.png', 'width' => 16, 'height' => 16, 'alt' => $text))) {
return l($image, $variables['url'], array('html' => TRUE, 'attributes' => array('class' => array('feed-icon'), 'title' => $text)));
}
}
The current output looks like this:
<div class="feed-icon">
<img typeof="foaf:Image" src="mywebsite/misc/feed.png" width="16" height="16" alt="Subscribe to news from my website">
</div>
I'd like to keep the div and its class, but only have the font/text link inside, preferably without the same class. I'd appreciate any clever advice :-)

you could avoid printing the feed icon from php and just enter the html code either in the footer or the header of the view from the UI
or
you could hide the image via CSS, and use
.feed-icon:before {
font-family: FontAwesome;
content: "\f143";
}

Related

Using Headless Chrome, background colors not rendering on PDFs for all pages / sites

I am using Headless Chrome to render HTML into PDFs, but
background color rendering in PDFs only seems to work on certain webpages.
This is the library I am using: https://github.com/chrome-php/headless-chromium-php
For the following code, if I change $url to https://www.hovec.co.uk/ then it does not render any background colors or images, and yet it works for the BBC site.
$browserFactory = new BrowserFactory("/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"); //thats my local Chrome
$browser = $browserFactory->createBrowser([
'windowSize' => [794, 1122]
]);
$url='https://www.bbc.co.uk/';
//$url='https://www.hovec.co.uk/';
// creates a new page and navigate to $url
$page = $browser->createPage();
$page->navigate($url)->waitForNavigation();
$page->pdf(['printBackground'=>true, 'marginTop' => 0.0, 'marginBottom' => 0.0, 'marginLeft' => 0.0, 'marginRight' => 0.0])->saveToFile($filepath);
$browser->close();
Any help with this would be much appreciated!
Add this style to HTML page:
<style>
html { -webkit-print-color-adjust: exact; }
</style>
Credits: https://stackoverflow.com/a/60736572/3013633

What php to use to be able to pick an image from the Wordpress library

This is the original php code:
function lovethemes_pricing_shortcode($atts)
{extract(shortcode_atts(array(
"heading" => '',
"price" => '',
"link" => '',
"name" => '',
), $atts ) );
return '<div class="pricing animated bounceIn">
<section class="head">'.heading.'
<section class="content">
<ul><li class="price">'.$price.'</li>
<li>'.$name.'</li>
</ul></section> </div>';}
add_shortcode('pricing', 'lovethemes_pricing_shortcode');
This is what is written on my page in the backend:
[pricing heading="7 februari 2015"
price="Strak bekleden van een taart"
link="/agenda/workshops/strak-bekleden-van-een-fondant-taart"
name="Info"]
Resulting in this:
http://www.alexandra-van-zandbergen.be/wp-content/uploads/2015/08/Schermafbeelding-2015-08-08-om-13.23.38.png
And what I would like to have is this:
http://www.alexandra-van-zandbergen.be/wp-content/uploads/2015/08/Schermafbeelding-2015-08-08-om-13.22.47.png
I can read and write html and css but no php... Can anyone help me with this please? I've tried to add several codes and nothing is working.
I have to be able to change the image in the backend, I would like to be able to just choose an image from the Wordpress image gallery.
Thanks in advance!
Alexandra
I'm not very familiar with it either, and would need to try it to see if it works, so pls don't shoot me if it does not. However, this function makes use of the shortcode API.
The code tells to create a [pricing] shortcode, currently with 4 attributes. So, if all the rest works, then you most likely can simply add another one.
What I do not understand - and I'm not taking the time to look it up - is why all variables in your code start with $, but not the heading. I'll ignore that since it doesn't seem to be the problem.
Note:
It's best to add:
the image size to the HTML for performance. I'm assuming that you'll
use images of the same size. If you would want to set the image
size, you can create attributes for it too.
an alt text for SEO. Below I use the price attribute.
While I'm at it I would suggest to add a link to the image and title too. People sometimes click on it instead of on the info button. This would make it more user friendly.
So, it then would look like this:
function lovethemes_pricing_shortcode($atts) {
extract(shortcode_atts(array(
"heading" => '',
"price" => '',
"link" => '',
"name" => '',
"img" => '',
), $atts ) );
return '<div class="pricing animated bounceIn">
<section class="head">'.heading.'
<section class="content">
<ul><li class="price">'.$price.'</li>
<li><img src="'.$img.'" alt="'.$price.'" width="247" height="186" /></li>
<li>'.$name.'</li>
</ul></section></div>';
}
add_shortcode('pricing', 'lovethemes_pricing_shortcode');
and your shortcode would be:
[pricing heading="7 februari 2015"
price="Strak bekleden van een taart"
link="/agenda/workshops/strak-bekleden-van-een-fondant-taart"
img="/your/image/url.jpg"
name="Info"]
To make it a little more user friendly, you could also rename the attributes to something that corresponds to the content, f.ex. heading > date
I hope this helps!

Replace text link with image using php

l(t('Edit'), 'node/' . $node->nid . '/webform/components/' . $cid, array('query' => drupal_get_destination())),
I'd like to be able to replace the word "Edit" with an image instead, however when I put an image src in there it shows up as text. Is there a different function I should be using?
I'm using Drupal as my framework.
Thanks ffrom a noob.
Best way to do this is to combine l() and theme_image():
print l(theme_image(array('path' => 'edit_button.png', 'attributes' => array('title' => t('Edit')))), 'node/' . $node->nid . '/webform/components/' . $cid, array('query' => drupal_get_destination(), 'html' => TRUE));
You should also use drupal_get_path() to prefix the path of your image.
This way you will fully apply to the Drupal Coding standards, and make your life easier.
That button should have its own class, for example, action_button or an id such as edit_button. Now use CSS to hide the text and use a background image in its place as shown below:
.action_button, #edit_button {
/* Hide Text */
text-indent: -9999px;
display: block;
background: url('edit_button.png') no-repeat;
/* Set width and height equal to the size of your image */
width: 20px;
height: 20px;
}
EDIT 1:
Change your code with below and use above CSS:
l(t('Edit'), 'node/'.$node->nid.'/webform/components/'.$cid, array('attributes' => array('id' => array('edit_button')), 'query' => drupal_get_destination()));
EDIT 2 [FINAL]:
Passing html as TRUE to array parameter of l() method can make us able to use first parameter as img tag instead of just text for display as link:
l('<img src="edit_button.png" alt="Edit" />', 'node/'.$node->nid.'/webform/components/'.$cid, array('query' => drupal_get_destination(), 'html' => 'TRUE'));
This is the best way I implemented:
list($nodeImage) = field_get_items('node', $node, 'uc_product_image');
$style_array = array('path' => $nodeImage['uri'], 'style_name' => 'MY_IMAGE_STYLE');
$render_node_image = theme('image_style', $style_array);
$render_node_image_WITH_LINK = l($render_node_image, 'node/' . $node->nid, array('html' => TRUE));
print $render_node_image_WITH_LINK

Specify Image Height and Width in php string

I have a linked image that I need to specify height and width html attributes for that is generated by php string. I've looked into using getimagesize but its not looking like what I need. I am currently using social engine.
This is the string I have that calls the image link.
<?php echo $this->htmlLink($item->getHref(), $this->itemPhoto($item, 'null'), array('class' => '')) ?>
which outputs html somthing like <img src="#" class="null"/>
I need to modify the php to create an image that is specified to be 110px x 110px
ie <img src="#" class="null" width="110" height="110"/>
Can anyone give me an example of how I could write my string?
You have to use this:
<?php echo $this->htmlLink(
$item->getHref(),
$this->itemPhoto(
$item,
'null',
null,
array('width' => '110px', 'height' => '110px')),
array('class' => '')
) ?>
That is, add a fourth parameter array to itemPhoto function.
Socialengine is an extension of Zend framework. You should try to check out the definition of itemPhoto, htmlLink etc. functions in order to customize them. For example itemPhoto can be found here- \application\modules\Core\View\Helper\ItemPhoto.php
The last parameter is used for that, isn't that?
$this->htmlLink(
$item->getHref(),
$this->itemPhoto($item, '', '', array('width' => 110, 'height' => 110)),
array('class' => '')
);
Method1:
Just add style for null class
<?php echo $this->htmlLink($item->getHref(), $this->itemPhoto($item, 'null'), array('class' => '')) ?>
as:
.null {
height: 110px;
width: 110px;
}
Method2:
Or you can pass a inline style attribute as:
<?php echo $this->htmlLink($item->getHref(), $this->itemPhoto($item, 'null'), array('class' => '', 'style' => 'height: 110px; width: 110px')) ?>
I cant see whats behind the function htmlLink() but I guess due to the name of those elements you pass you could just write.
echo '<img src="'.$this->itemPhoto($item, 'null').'" class="null" width="110" height="110"/>';
but ether post that function or just try and error!

Drupal rendering order - how to define order of rendering?

I'm building a site with Drupal and I have a small problem. I'm rendering a form using hook_menu. The form renders fine and all is good. I am then adding some more markup to the page using hook_page_alter(). Hook_page_alter looks like this:
function renderer_page_alter(&$page) {
if(drupal_is_front_page()) {
$q = db_query('SELECT name, mname, number_of_instances FROM {event_type} ORDER BY number_of_instances DESC');
foreach($q as $event) {
$options['name'][] = $event->name;
$options['mname'][] = $event->mname;
}
$tri = array(
'#theme' => 'frontpage_canvas',
'#options' => $options
);
return $page['content']['triangles'] = $tri;
}
}
So in my local MAMP install, the content is displayed with the results from hook_page_alter() first then followed by the form. However, in the remote install, the order is reversed (with the submit button for the form at the top of the page and the rest of the content beneath it). The only difference between the installs (that I can think of) is that the remote install is Drupal 7.8 and the local one is Drupal 7.9.
I would like to have the remote install in the same way as the local one. Has anyone come across an issue like this before?
The basic structure of the rendered HTML is like this:
<div class=content>
//all the form information is in here
</div>
<div class=rendered>
//all the output from hook_page_alter() is here
</div>
EDIT: The issue is that for some reason, block.tpl.php is adding two divs:
<div id="block-system-main" class="block block-system first last odd">
<div class="content">
//My form markup is in here
</div>
</div>
//The hook_page_alter markup is in here.
So, is there any way to force Drupal to add the hook_page_alter markup to the same div as the form is being rendered in? Because the way it's being rendered at the moment, the #weight property doesn't affect the positioning.
Thanks,
The display order in render arrays is set using the #weight attribute, elements with a higher #weight will be rendered after those with a lower value.
If you want to force the content added in hook_page_alter() to be rendered at the top of the content area declare it like this:
$tri = array(
'#theme' => 'frontpage_canvas',
'#options' => $options,
'#weight' => -1000
);
or at the bottom of the content area:
$tri = array(
'#theme' => 'frontpage_canvas',
'#options' => $options,
'#weight' => 1000
);
You can also adjust the #weight for other elements that already exist in the $page array passed in to the function, so you have total control over the display order.

Categories