Use thumbnail image size for img src WordPress
- SOLVED
Hello,
I working with a theme, and on the portfolio display page it posts the images at full image size and has a lightbox to view them larger. The thing I want to change is instead of showing the full image first, I want the cropped image version to show.
In the code, the image size is set for the thumbnail:
// This theme uses post thumbnails
add_theme_support('post-thumbnails');
add_image_size('apollo-small-thumb', 220, 150, true); //(cropped)
I want the appollo-small-thumb size to be the image that is displayed.
The snippet of code for the img scr and link are:
echo '<div class="vert-item"><a class="alpha-scope alpha-scope-image no-border" href="' . $slide['src'] . '" rel="group"><img src="' . $slide['src'] . '" ' . $slide['attrs'] . ' ' . $img_style . ' /></a></div>';
It's the img src part where the thumbnail needs to go.
Here is the full code of that section if that helps.
function make_collection($collection, $content)
{
$slides = array();
$media_count = get_post_meta(get_the_ID(), '_image_count', true);
if (get_post_meta(get_the_ID(), '_image_or_video_1', true) == '') {
$media_count--;
}
if ($media_count) {
$images_found = 0;
$i = 1;
while ($images_found != $media_count && $i < 100) {
$switch = get_post_meta(get_the_ID(), '_image_or_video_' . $i, true);
if ($switch) {
$images_found++;
$media = get_post_meta(get_the_ID(), '_' . $switch, true);
if ($media) {
$type = substr($switch, 5, 5);
$attrs = trim(get_post_meta(get_the_ID(), '_post_image_attr_' . $i, true));
$caption = '';
if (get_post_meta(get_the_ID(), '_caption_switch_' . $i, true) == 'caption_text_' . $i)
$caption = trim(get_post_meta(get_the_ID(), '_caption_text_' . $i, true));
$slides[] = array(
'type' => $type,
'attrs' => $attrs,
'src' => $media,
'caption' => $caption
);
}
}
$i++;
}
foreach ($slides as $slide) {
if ($slide['type'] != 'image') {
$collection = 'vertical';
}
}
$wight = 940;
switch ($collection) {
case 'vertical':
if (sizeof($slides)) {
if ($content == '') {
$img_style = 'style = "width: 940px;"';
} else {
$img_style = '';
}
echo '<div id="variant-verical">';
foreach ($slides as $slide) {
if ($slide['type'] == 'image') {
//$slide['src'] = $this->prepare_path($slide['src']);
// $src = TPL_ADV . '/inc/timthumb.php?src=' . $slide['src'] . '&w=' . $wight . '&zc=1';
// $attachment_id = $this->get_attachment_id_from_src($slide['src']);
// $src = wp_get_attachment_image_src($attachment_id, 'apollo-big-thumb');
// $src = $src[0];
echo '<div class="vert-item"><a class="alpha-scope alpha-scope-image no-border" href="' . $slide['src'] . '" rel="group"><img src="' . $slide['src'] . '" ' . $slide['attrs'] . ' ' . $img_style . ' /></a></div>';
} else {
echo '<div class="vert-item">' . $this->detect_movie($slide['src'], false, 540) . $caption . '</div>';
}
}
echo '</div>';
}
Thanks!
Surferboy
Answers (2)
Kiet Luong answers:
For the best way I think you should use [[LINK href="http://code.google.com/p/timthumb/"]]timthumb[[/LINK]] for that work.
Kiet Luong comments:
echo '<div class="vert-item"><a class="alpha-scope alpha-scope-image no-border" href="' . $slide['src'] . '" rel="group"><img src=" timthumb.php?src=' .$slide['src'] . '&w=220&h=150&zc=0" ' . $slide['attrs'] . ' ' . $img_style . ' /></a></div>';
zc=0 : zoom image
zc=1 : crop image
surferboy comments:
The sizes are already generated when the images are uploaded. I just need to find out how to reference the thumbnail size here.
Like:
<img src="http://sitecom/wp-content/uploads/2012/11/the-fall.jpg" alt="" />
To this:
<img src="http://sitecom/wp-content/uploads/2012/11/the-fall-220x150.jpg" alt="" /></a></div>
So the -220x150 gets inserted before the .jpg
That img src is generated in this section of the code:
echo '<div class="vert-item"><a class="alpha-scope alpha-scope-image no-border" href="' . $slide['src'] . '" rel="group"><img src="' . $slide['src'] . '" ' . $slide['attrs'] . ' ' . $img_style . ' /></a></div>'
Hope that helps!
Thanks.
John Cotton answers:
Have you looked at [[LINK href="http://codex.wordpress.org/Function_Reference/get_children"]]get_children[[/LINK]]?
It could be slightly laborious, but you could get a list of the attachments compare the guid (the url of the image) to the src you have and then use your
$src = wp_get_attachment_image_src($attachment_id, 'apollo-big-thumb');
line when you have found the appropriate id.
Not very nice, but saves having to use a 3rd party library.
You could, of course, circumvent the above API calls by doing a SQL join between the post meta field (which looks to have your image src??) and the posts table to get the ID more directly, but that has issues for future upgrades....
surferboy comments:
Those commented out lines are from a previous theme I believe and don't work with this theme.
Not sure how I could find the appropriate id and then put it in the src part:
<img src="' . $slide['src'] . '" ' . $slide['attrs'] . ' ' . $img_style . ' />
John Cotton comments:
<blockquote>Not sure how I could find the appropriate id and then put it in the src part:</blockquote>
I'm assuming that $slide['src'] holds the full size src of the uploaded image....
If so:
global $wpdb;
$attachment_id = $wpdb->get_var( $wpdb->prepare( "SELECT id FROM $wpdb->posts WHERE guid='%s'", $slide['src'] ) );
$sized_src = wp_get_attachment_image_src($attachment_id, 'apollo-big-thumb');
surferboy comments:
Yes, $slide['src'] holds the full size src of the uploaded image.
Now how can we put it all together to work?
surferboy comments:
I went ahead and added timthumb to the server and used that along with kioluong's code. That worked!
Thanks much all for you help!