Category: web development

Get the ID of a Post Meta Image

I Google’d and checked the WordPress codex, but could not find a function that would give me the ID of an image I uploaded into a custom meta field.

The Problem

I have uploaded an image, but that image is huge. I want to be able to display the image at my predefined size. There are functions to display the post thumbnail (featured image) in any which way you want, but this is different.

This is the cleanest method I’ve found to get the attachment’s ID. With the ID, you’ll be able to use a function to display that image.
Read more »

Responsive Fixed-Fluid Layout

The Problem

Build a two-column responsive page that had a fixed-width right column. It actually sounds easier than you think. That fixed-width right column throws a wrench into everything.

For this example, let’s go with a fluid left column and a 320px wide right column.

HTML

<div class="main">
<div class="leftwrapper">
<div class="left">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elit dolor, congue vitae turpis in, blandit dictum magna. Praesent sollicitudin dictum libero. Aliquam tempor elit quis metus egestas, vel adipiscing nibh pulvinar. Aenean quis venenatis massa, at interdum est. Praesent iaculis mi lacus, quis auctor purus placerat vel. Cras sed commodo velit. Aenean ac aliquam purus, vitae rhoncus justo. Proin mollis facilisis sapien, id consequat purus imperdiet eu. Donec posuere, arcu a facilisis ultrices, nibh nisi convallis ante, et sollicitudin metus ante vel felis. Curabitur sagittis, dolor malesuada adipiscing pulvinar, velit risus elementum augue, non tempor lectus mi sit amet ipsum. Aliquam mollis semper ultrices. Sed eleifend tempus dui nec venenatis. Maecenas faucibus turpis leo, nec facilisis sapien mattis non. Donec in elit vitae enim interdum auctor nec id dui. Vivamus sed odio diam. Cras pretium dolor ac neque iaculis eleifend.

</div>
</div>
<div class="right">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elit dolor, congue vitae turpis in, blandit dictum magna. Praesent sollicitudin dictum libero. Aliquam tempor elit quis metus egestas, vel adipiscing nibh pulvinar. Aenean quis venenatis massa, at interdum est. Praesent iaculis mi lacus, quis auctor purus placerat vel. Cras sed commodo velit. Aenean ac aliquam purus, vitae rhoncus justo.

</div>
</div>

Read more »

Adding the WordPress Uploader to Your Theme or Plugin

There are some tutorials out there similar to this, but WordPress has since updated their media uploader, making those tutorials obselete. This code is essentially a combination of the best ones I’ve found

Javascript

first, you’ll want to save this code into a .js file, say “uploader.js”
Read more »

qTranslate: Issues with Duplicate Content?

so i’ve been using this wordpress plugin that will help your site become multilingual called qTranslate. it’s awesome. it allows you to add different translations for menus, posts, pages, widgets, etc with a little bit of effort (of course, every project is different, some php coding may be required). here’s a fairly quick startup guide

the thing is, we only need the plugin for a set of pages and that’s it… not the most ideal solution, but it’s working… or was

i found a random issue that no amount of googling could resolve… every page that didn’t require translation would display fine except for the below snippet of code

essentially, the code was using “get_posts” to display a page within a page (almost inception-like)

Read more »

WordPress: Media Uploader for Meta Boxes

so i’ve been running into a nagging issue with wordpress’ new instance of its media uploader (released in v3.5)

if i had a meta box with an image uploader, it would conflict with the standard “Add Media” button for the editor

previous code

uploader.js

jQuery(document).ready(function() {
var form_field;
jQuery('.button-upload').click(function() {
form_field = '#' + jQuery(this).next('input').attr('id');
tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
return false;
});

window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
if(!imgurl){
imgurl = jQuery(html).attr('src');
}
if (jQuery(form_field).length > 0) {
jQuery(form_field).val(imgurl);
}
tb_remove();
}
});

Read more »

“Responsive” Email

i guess it really shouldn’t be called “responsive” — it’s more “adaptive”. i mean, you can’t resize your browser or outlook window and expect it to update on the fly.

YkbaV

i’d like to say i’m pretty good at coding up html pages with css… and getting better and better at making sites responsive. well, only some of those skills are needed to code html emails

it’s a pain. a big one.

Read more »

Instagram Embeds

testing out the new instagram embed feature:

straight embed code

responsive container

so the problem with the embeds is that it’s not clean for responsive. i tried to add the same sorta code that i use for youtube videos, but it doesn’t seem to do the exact trick

Read more »

Custom Metabox Per Template

so this came about when i was tasked to create a custom metabox for a wordpress site at work. i didn’t want the metabox to appear unless a specific template was chosen — this is so as not to confuse the person in the admin with new options they shouldn’t be messing with.

i found this solution, but it wasn’t quite working in my admin. so i put on my wordpress/php developer cap and dissected it down to the following:

Read more »

responsive web design: tools of the trade

these are the things that i MUST HAVE in order to efficiently work on a responsive web design project

text editor

editplus

Read more »

Older
Newer