The scenario
Let’s say you have an image 600 pixels wide, in responsive layouts, you have to set the image width to 100% – or else it will not “adjust” to changes in the window size.
On your desktop, the width of your window will be greater than 600 pixels, so the image will be stretched and will loose it’s quality – it will become pixelated/blurry. On your mobile device, when the screen is less than 600 pixels wide, a horizontal scroll bar will appear – you loose the responsiveness of your layout.
The work-around
To go around this problem, I would want to set the image width to 100% only when the window width is lesser than the image width. If the image width is lesser than window width, just display the image in it’s original size.
The code
<script language="javascript" type="text/javascript">
function getOriginalWidthOfImg(img_element) {
var t = new Image();
t.src = (img_element.getAttribute ? img_element.getAttribute("src") : false) || img_element.src;
return t.width;
}
function responsive_images () {
$(".responsive_img").each(function() {
if(parseInt(getOriginalWidthOfImg(this)) >= parseInt($(window).width())) {
$(this).attr("width","100%");
} else {
$(this).removeAttr("width");
}
});
}
$(window).load(function() {
responsive_images();
$(window).resize(function() {
responsive_images();
});
});
</script>Note: You will need jQuery.
Credits:
FDisk’s answer in Stackoverflow: http://stackoverflow.com/a/3192577/66767
I got the chance to implement this in WordPress.
The first step, install the JSON API plugin for WordPress. It can be downloaded here: http://wordpress.org/extend/plugins/json-api/ or just search “JSON API” in your WP-Admin plugins section.
This plugin is really neat because it gives us a JSON response for any WordPress press by just appending ?json=1 at the URL. For example if I load this URL with the plugin installed: http://localhost/?json=1 I get a response in JSON containing the Posts in my frontpage.
{
status: "ok",
count: 2,
count_total: 24,
pages: 12,
posts: [
{<snipped - will contain the title, excerpt, date, etc.>},
{<snipped - will contain the title, excerpt, date, etc.>}
]
}In your template you just need to setup a container for the dynamically loaded items and a “loading” gif image.
<div id="ajax_content"></div>
<div class="row" id="loader">
<div class="span12" style="text-align: center; margin-bottom: 20px;">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/ajax-loader.gif" alt="" />
</div>
</div>The javascript part is pretty straight forward. The unlocked variable is pretty important since it prevents duplicate calls to the AJAX request. This is only quick way I got around that problem (duplicate calls).
<script language="javascript" type="text/javascript">
page_number = 2; //starting with what page number?
template_directory = '<?php echo get_bloginfo("template_directory") ?>';
unlocked = true; //this is to make sure we only load once
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
$("#loader").show();
if (unlocked) {
unlocked = false;
$.ajax({
type: "GET",
url: "<?php echo get_bloginfo('url'); ?>/page/"+page_number+"",
data: "json=1",
success: function(data){
console.log(data)
page_number++;
if (page_number <= data.pages) {
$.each(data.posts, function(key, val) {
console.log(key+" > "+val.title)
$("#ajax_content").append(
'<div class="row">'+
'<div class="span12">'+
'<h2>'+
'<a href="'+val.url+'" rel="bookmark" title="Permanent Link to '+val.title+'">'+
val.title+
'</a>'+
'<p>'+val.excerpt+'</p>'+
'</div>'+
'</div>'
);
});
}
$("#loader").hide();
unlocked = true;
}
});
}
}
});
</script>Credits:
Stackoverflow
Ajax Load
Hi Everyone,
My wife and I are moving to Auckland, New Zealand. I have Work-to-Resident Visa. Our departure will be on the May 13, 2012.
If you are looking for a web developer then send me an email. You can download my CV here.
I am open to working remotely. Then we can talk once I get to New Zealand.
** If you know anyone who is looking for someone with my skills, then please recommend me.
Regards,
Wenbert
First, I would like to thank Luca for this post.
Add in Gemfile
gem "nested_form", :git => 'https://github.com/ryanb/nested_form.git'
Then run
bundle install
and
rails g nested_form:install
In my “parent” model:
class Allergy < ActiveRecord::Base
validates :name, :presence => true
has_many :attachments, :dependent => :destroy
accepts_nested_attributes_for :attachments
end
In my “child” model:
class Attachment < ActiveRecord::Base
belongs_to :allergy, :polymorphic => true #add polymorphic
mount_uploader :attachment, AttachmentUploader
end
In my views:
...
<%= nested_form_for [@patient, @allergy], :html => {:multipart => true} do |f| %>
<%= render :partial => "fields", :locals => {:f => f} %>
<% end %>
...and in the partial I have this:
<%= f.fields_for :attachments do |attachment_form| %>
<div class="clearfix">
<%= attachment_form.label :desc %>
<%= attachment_form.text_field :desc %>
<%= attachment_form.label :attachment %>
<%= attachment_form.file_field :attachment %>
<%= attachment_form.link_to_remove "Remove this attachment" %>
</div>
<% end %>
<%= f.link_to_add "Add attachment", :attachments %>And to save in the controller, I have something like this:
def create
...
@patient = Patient.find(params[:patient_id])
if @allergy = @patient.allergies.create(params[:allergy])
# success
else
# error handling
end
endI might have missed something, but if you have comments, suggestions, and corrections do not hesitate to post them below. I am also very new to Ruby on Rails.
Might be different from what you have but this doc was useful.
You are unable to upgrade automatically your WordPress installation. You are also not able to update your plugins. You have also tried everything to make your connection settings correct and it still does not work.
The reason: Your PHP scripts does not have the permission to write.
The solution: Install suPHP
$ apt-get install libapache2-mod-suphp
Add this in your Apache conf:
suPHP_Engine on
Then:
$ a2dismod php5
$ /etc/init.d/apache2 restart
CHOWN and CHGRP your home directory
$ chmod -R wenbert /home/wenbert
$ chgrp -R wenbert /home/wenbert
Resources: http://www.suphp.org/DocumentationView.html?file=apache/INSTALL
FYI: I am on Ubuntu.
My schedule right now is not very tight and I have a couple of hours free almost everyday. So instead of playing Skyrim, I am learning Ruby on Rails.
I am using RVM (http://beginrescueend.com/) on Ubuntu Ubuntu 10.04 LTS (Lucid Lynx).
Here is the error I get when I try to run “rails server”:
wenbert@ubuntu:~/projects/rails/depot$ rails server
/home/wenbert/.rvm/gems/ruby-1.9.2-p290/gems/execjs-1.2.12/lib/execjs/runtimes.rb:47:in `autodetect': Could not find a JavaScript runtime. See https://github.com/sstephenson/execjs for a list of available runtimes. (ExecJS::RuntimeUnavailable)
from /home/wenbert/.rvm/gems/ruby-1.9.2-p290/gems/execjs-1.2.12/lib/execjs.rb:5:in `<module:ExecJS>'
from /home/wenbert/.rvm/gems/ruby-1.9.2-p290/gems/execjs-1.2.12/lib/execjs.rb:4:in `<top (required)>'
from /home/wenbert/.rvm/gems/ruby-1.9.2-p290/gems/coffee-script-2.2.0/lib/coffee_script.rb:1:in `require'
from /home/wenbert/.rvm/gems/ruby-1.9.2-p290/gems/coffee-script-2.2.0/lib/coffee_script.rb:1:in `<top (required)>'
from /home/wenbert/.rvm/gems/ruby-1.9.2-p290/gems/coffee-script-2.2.0/lib/coffee-script.rb:1:in `require'
from /home/wenbert/.rvm/gems/ruby-1.9.2-p290/gems/coffee-script-2.2.0/lib/coffee-script.rb:1:in `<top (required)>'
from /home/wenbert/.rvm/gems/ruby-1.9.2-p290/gems/coffee-rails-3.1.1/lib/coffee-rails.rb:1:in `require'
from /home/wenber
A lot of people have already experienced this error. There is a popular thread for this in Stackoverflow – here. The Original Poster of the thread selected the this answer:
I’m on Ubuntu 11.04. Had similar issues. Installing node.js fixed this for me
https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager
But I think the more appropriate answer is the one by vincent jacquel in this thread.
The Fix
- Open the
Gemfile
- Add these lines:
gem 'execjs'
gem 'therubyracer'
- Save.
- Then run this command:
$> bundle after
Note: I’m posting this for myself so that I can refer to it in the future.
$cat_id =get_cat_id('Uncategorized');
$query = new WP_Query('cat='.$cat_id.'&year='.$year.'&monthnum='.$month.'&day='.$day);
$image = false;
while ( $query->have_posts() ) {
$query->the_post();
the_title();
$image = wp_get_attachment_image_src(get_post_thumbnail_id($query->ID));
echo '<a href="'.$image[0].'">';
}More here for wp_get_attachment_image_src
Related: get_post_thumbnail.
Using Skeleton (http://www.getskeleton.com), I managed to come up with a “minimized” WordPress theme.
What is Skeleton?
Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone. More here…
My workflow
- Design a layout (Photoshop, etc.). You can use the template found in /templates or download it from http://getskeleton.com/#download
- Convert the layout into HTML
- Convert the HTML file into a WordPress theme
This theme will come in handy in Step 3. For example, you define the grid layout, columns, text colors, fonts, spacing, etc. yourself.
* Since most of the WordPress theme I created have a horizontal navigation bar, I have included the CSS for #access in style.css
* Also added the image CSS (align right, left, etc) by default.
* This also contains the default CSS for Skeleton.
* When adding images, do not set a specific image size. You can however use percentage.
You can download the theme here: https://github.com/wenbert/Ekini-WP-Skeleton.
Disclaimer: This is a work in progress.
Comments / suggestions are encouraged! 
Found this little gem in Stackoverflow.
$(function() {
$("img")
.mouseover(function() {
var src = $(this).attr("src").match(/[^.]+/) + "over.gif";
$(this).attr("src", src);
})
.mouseout(function() {
var src = $(this).attr("src").replace("over", "");
$(this).attr("src", src);
});
});Thanks to Jarrod Dixon.
Here is another simpler version.
$(".icons_inner img").hover(
function(){this.src = this.src.replace("_off","_on");},
function(){this.src = this.src.replace("_on","_off");
});You just have to name you email images as “my_icon_on.png” and “my_icon_off.png”. I find this version a lot simpler to implement and debug. Source.
The example shows that I sort posts with custom field “Start Date”. I am using ‘meta_query’ to query the custom fields – you can find out more here.
$args['post_type'] = array('ur_post',
'programs_post',
'education_post',
'blog_post'
);
$args['meta_key'] = 'Start Date';
$args['meta_query'] = array(
array(
'key' => 'Start Date',
'value' => date('Ymd'),
'compare' => '>=',
'type' => 'date'
)
);
/*This will sort. Make sure there is no underscore. It's orderby NOT order_by.*/
$args['orderby'] = 'meta_value';
$args['order'] = 'asc';
$the_query = new WP_Query($args);
while ( $the_query->have_posts() ) {
$the_query->the_post();
$start_date = get_post_custom_values('Start Date', $the_query->ID);
/*var_dump($custom_values);*/
if (date('Ymd',strtotime($start_date[0])) >= date('Ymd')) {
echo '<div class="event_date">';
//display date here...
echo '</div>';
echo '<div class="event_post_time">';
$start_time = get_post_custom_values('Start Time', $the_query->ID);
echo $start_time[0];
$end_time = get_post_custom_values('End Time', $the_query->ID);
if ($end_time != NULL) {
echo ' - '.$end_time[0];
}
echo '</div>';
}
}
wp_reset_postdata();
twitter.com/wenbert