Want to increase the size of an image on the Product view page in Magento 1.8 CE, Modern theme.
I tried to change the values from 265 to 400 in the following files:
/app/design/frontend/default/modern/template/catalog/product/view/media.phtml
/app/design/frontend/base/default/template/catalog/product/view/media.phtml
/app/design/frontend/default/default/template/featurezoom/media.phtml
(because this extension was installed. I have a feeling that the problem might be here, but cannot find what)
/app/design/frontend/base/default/template/productdetails/media.phtml
even in the /app/code/core/Mage/Catalog/Model/Product.php
Changed the
css file .product-view .product-img-box .product-image {width: 400px}
Flushed the cache, cleared the folder /media/catalog/product/cache/
But something still keeps creating the 265x265 folder in the cache
Here is the page
Thought it would be simple task, but already spent the entire day on it.
Any help is appreciated
So I believe I found the solution. Thanks Nikitas for the suggestion to use the debug mode.
Not sure if this is proper way, but this works.
The file I edited was frontend/base/default/template/productdetails/media.phtml
Initial code was
/* Main Image Size */
if (strstr($_productDetails['mainImageSize'], '_')) {
$mainImageSize = explode('_', $_productDetails['mainImageSize'], 2);
} else {
$mainImageSize = array(265, 265);
}
Changing the sizes in the ELSE didn't help, so I changed it in the IF statement like this
/* Main Image Size */
if (strstr($_productDetails['mainImageSize'], '_')) {
/* $mainImageSize = explode('_', $_productDetails['mainImageSize'], 2); */
$mainImageSize = array(400, 400);
} else {
$mainImageSize = array(265, 265);
}
If you know better solution or have any suggestions, that would be helpful.
Thanks
Now I'll have to play with the zoom because it increased the zoom box
Just go to
/app/design/frontend/yourtheme/default/template/catalog/product/view/media.phtml
Find the code
'image')->resize(436)
and just give your image dimension in here like
'image')->resize(300,436)
Related
i've been looking for a solution for the whole day but don't seem to be able to find a proper solution.
The problem is (i think) quite simple. When an image is uploaded on my page it is then displayed in an img element. Now for some reason it is rotated by itself from portrait to landscape.
I cut the middle man and connected the img tag to the path.
Problem persists.
If i open it in ps and save it as a new jpeg it is fixed but that is not a viable choice since images will be uploaded directly from clients.
In not other program (ps, paint, photos, photos3d) does that issue exist
In my digging around i found that that is propably caused from the exif data of the image.
Everything else ignores that data, or reads it correctly idk.
Can anyone please tell me how to fix that?
I tried adding image-orientation:0deg and image-orientation:from-image to no result.
Also, just for my sanity's sake, does anyone know WHY this would be a problem?
EDITThis does not happen on firefox. That being said i cannot force everyone to avoid chrome
Thanks in advance
Ok so i looked everywhere and found some ways to rotate the image client side and added css to make it look legit. Then i realized that all that was wasted since it would cause the image to overrotate in browsers that displayed it correctly.
Ended up taking it to server side and fixing it there (rotating based on exif and the removing the exif data)
I will include the controller code
public JsonResult NormalizeOrientation(HttpPostedFileBase file)
{
Image img = Image.FromStream(file.InputStream);
if (Array.IndexOf(img.PropertyIdList, 274) > -1)
{
var orientation = (int)img.GetPropertyItem(274).Value[0];
switch (orientation)
{
case 1:
// No rotation required.
break;
case 2:
img.RotateFlip(RotateFlipType.RotateNoneFlipX);
break;
case 3:
img.RotateFlip(RotateFlipType.Rotate180FlipNone);
break;
case 4:
img.RotateFlip(RotateFlipType.Rotate180FlipX);
break;
case 5:
img.RotateFlip(RotateFlipType.Rotate90FlipX);
break;
case 6:
img.RotateFlip(RotateFlipType.Rotate90FlipNone);
break;
case 7:
img.RotateFlip(RotateFlipType.Rotate270FlipX);
break;
case 8:
img.RotateFlip(RotateFlipType.Rotate270FlipNone);
break;
}
// This EXIF data is now invalid and should be removed.
img.RemovePropertyItem(274);
}
MemoryStream ms = new MemoryStream();
img.Save(ms, ImageFormat.Jpeg);
return Json(new { base64imgage = Convert.ToBase64String(ms.ToArray()) }
, JsonRequestBehavior.AllowGet);
}
I am looking to create a program in Visual Studio (C#) which scans the screen for an exact image in an exact location of the screen. I have seen many discussions which involve algorithms to find a "close" image, but mine will be 100% exact; location, size and all.
I have obtained a png from a section of my screen [Image 1] using this code:
private void button1_Click(object sender, EventArgs e)
{
//Create a new bitmap.
var bmpScreenshot = new Bitmap(Screen.PrimaryScreen.Bounds.Width,
Screen.PrimaryScreen.Bounds.Height);
// Create a graphics object from the bitmap.
var gfxScreenshot = Graphics.FromImage(bmpScreenshot);
// Take the screenshot from the upper left corner to the right bottom corner.
gfxScreenshot.CopyFromScreen(1555, 950,
1700, 1010,
Screen.PrimaryScreen.Bounds.Size,
CopyPixelOperation.SourceCopy);
// Save the screenshot to the specified path that the user has chosen.
bmpScreenshot.Save("Screenshot.png");
}
So, basically here is the flowchart of my program on how I want to move forward:
1) create the master png using the above code
2) run loop:
create same screenshot using the same procedure as the master png
compare master png to new screenshot png and if:match then move on otherwise reiterate loop.
I am very new to programming, but I don't believe this is beyond me, given a little guidance. I have written fairly complicated (in my opinion) VBA and Matlab programs. Any help is greatly appreciated.
Thank You,
Sloan
Digging around a bit through Microsoft's documentation, I came up with a rough function that would do something similar to what you want.
https://msdn.microsoft.com/en-us/library/hh191601.aspx
This function offers the chance of getting stuck in an endless loop, so you might consider calling it with a timeout from your main. See here for info on synchronous methods with timeouts:
Monitoring a synchronous method for timeout
From your main, all you'd have to do is see if it returns true.
static int Main(string[] args)
{
if (ImageInLocation(left, right, top, bottom)) {
// do other things
}
return 0;
}
The only thing I'm not entirely sure on is how strict you can be with the ColorDifference. Even if the images are identical, any pixel difference with an entirely non-tolerant ColorDifference will come up false. If you know it should work and it's not, perhaps consider increasing the tolerance. Here's some more info on that:
https://msdn.microsoft.com/en-us/library/microsoft.visualstudio.testtools.uitesting.colordifference.aspx
public bool ImageInLocation(int left, int right, int top, int bottom) {
bool image_found = false;
var masterImage = Image.FromFile("path_to_master");
while (!image_found) {
// screenshot code above, output to "path_to/Screenshot.jpg"
var compImage = Image.FromFile("path_to/Screenshot.jpg");
// note, all zeroes may not be tolerant enough
var color_diff = new ColorDifference(0, 0, 0, 0);
Image diffImage;
image_found = ImageComparer.Compare(masterImage, compImage, color_diff, out diffImage);
}
return true;
}
Good luck! Welcome to the programming community.
Also, if anyone has any suggestions/changes, feel free to edit this. Happy imaging, friends!
I am using unveil.js to load a site more quickly.
I have a white div that blocks the content, which I want to disappear after the first images have loaded.
I though I could just count the images, but I realize that some of the latter ones could just load first (which normally happens because there is a threshold parameter which loads the ones that follow on the scroll).
Could someone help me with a smart way to do this?
Here's my code and the crappy solution:
$("img").unveil(2000, function() {
$(this).load(function(){
if(imageCount >= 4){
$(".white-cover").fadeOut("slow");
imageCount = 0;
}
Since unveil changes the src attribute, you can use jQuery to listen to an attribute change which indicate that an image has been replaced.
$(document).ready(function(){
$("#selected-date-range").change(function(){
alert( $("#selected-date-range").attr("value") );
});
});
In case I understand your problem correctly, I would use:
$(document).ready(function(){
// all images are loaded
}
Does this help you?
I already managed to create wxListCtrls with either icons or multicolumn text like this
Picture of two wxListCtrls
Now I'd like to add an icon to each line of the text list on the left. I thought this should be possible as typical wxWidgets applications like code::blocks and wxSmith often diplay icons in list/tree views (resource browser window) and even in tabs of notebooks (compiler log window).
So how can I create something like this? (Everybody knows Windows Explorer)
Picture of Explorer Window with icons
I tried this...
SetImageList (ToolImages, wxIMAGE_LIST_NORMAL);
InsertColumn (0, "Icon");
SetColumnWidth (0, 40);
...
for (int i=0; i<5; i++)
{
InsertItem (i, i);
SetItemColumnImage (i, 0, i);
SetItem (i, 1, IntToStr (i+1));
...
But as you can see, only the text gets displayd, the image column is blank. Is it possible at all to mix text and images in report mode? If not, what other wxControl class can I use to get the desired result?
Many Thanks in advance.
Yes, it is possible, and the listctrl sample shows how to do it, in particular see MyFrame::InitWithReportItems() function. The only difference with your code seems to be that you use a different InsertItem() overload, so perhaps you should use InsertItem(i, "") instead.
Also check that your image list does have the 5 icons in it.
More generally, trying to reduce the differences between your code and the (working) sample will almost always quickly find the problem.
Thanks, VZ, but I found out that it's not the InsertItem() but the SetImageList(). My image list was correct, but the "which" parameter wasn't. Replacing wxIMAGE_LIST_NORMAL by wxIMAGE_LIST_SMALL fixes the problem! I thought "SMALL" was only meant for the SMALL_ICON mode and that "NORMAL" should be the default. But yes, that makes sense, normal icons are big and don't fit in the text display. Would be nice if the documentation had told us that before long trial and error...
This is a simple example for SMALL ICONIC VIEW USING WXLISTCTRL .Please place this code inside the class declaration.I did it in Frame based Windows Application using CODE BLOCKS.It will be useful to you.
wxImageList *il=new wxImageList(32,32,false,0);
wxImageList *i2=new wxImageList(32,32,false,0);
wxDir dir(wxGetCwd());
wxDir dir1(wxGetCwd());
if ( !dir.IsOpened() )
{
// deal with the error here - wxDir would already log an error message
// explaining the exact reason of the failure
return;
}
if ( !dir1.IsOpened() )
{
// deal with the error here - wxDir would already log an error message
// explaining the exact reason of the failure
return;
}
puts("Enumerating object files in current directory:");
wxString path, filename, dirstring,filename1, dirstring1, img,imgPath,path1,img1,imgPath1;
int i=0;
path=wxT("C:\\testing\\splitterwindow\\set\\devices");
path1=wxT("C:\\testing\\splitterwindow\\set\\actions");
img=wxT("C:\\testing\\splitterwindow\\set\\devices\\");
img1=wxT("C:\\testing\\splitterwindow\\set\\actions\\");
bool cont=dir.Open(path);
bool cont1=dir1.Open(path1);
cont = dir.GetFirst(&filename, wxEmptyString, wxDIR_DEFAULT);
dirstring.Append(filename.c_str());
cont1 = dir1.GetFirst(&filename1, wxEmptyString, wxDIR_DEFAULT);
dirstring1.Append(filename1.c_str());
while ( cont )
{
imgPath.clear();
cont = dir.GetNext(&filename);
dirstring.Append(filename.c_str());
// Consturct the imagepath
imgPath.Append(img.c_str());
imgPath.Append(filename.c_str());
//Now, add the images to the imagelist
il->Add(wxBitmap(wxImage(imgPath.c_str())));
i++;
}
while ( cont1 )
{
imgPath1.clear();
cont1 = dir1.GetNext(&filename1);
dirstring1.Append(filename1.c_str());
// Consturct the imagepath
imgPath1.Append(img1.c_str());
imgPath1.Append(filename1.c_str());
//Now, add the images to the imagelist
i2->Add(wxBitmap(wxImage(imgPath1.c_str())));
i++;
}
//assigning the imagelist to listctrl
ListCtrl1->AssignImageList(il, wxIMAGE_LIST_SMALL);
ListCtrl3->AssignImageList(i2, wxIMAGE_LIST_SMALL);
for(int j=0;j < il->GetImageCount()-1;j++)
{
wxListItem itemCol;
itemCol.SetId(j);
itemCol.SetImage(j);
itemCol.SetAlign(wxLIST_FORMAT_LEFT);
ListCtrl1->InsertItem(itemCol);
}
for(int k=0;k < i2->GetImageCount()-1;k++)
{
wxListItem itemCol1;
itemCol1.SetId(k);
itemCol1.SetImage(k);
itemCol1.SetAlign(wxLIST_FORMAT_LEFT);
ListCtrl3->InsertItem(itemCol1);
}
`
AFAIK, Wordpress only generates Thumbnails (e.g., 'large') only when the desired image size is smaller (and not when the target size would be the same).
I use
add_image_size( 'referenzen-big', 627, 490, true );
So if my customer uploads a file with 627x490px, the original Image will be used.
But this is not desired, since this customed, in all good faith, uploads the images in the right size, and also highest possible .jpg-compression. This results in images being around 300kB in this case.
A pratical, but technicall not flawless way would be to ask him to upload his images in 628x490, so 1px more width, forcing a rescale. Suggestions like this will not be accepted :-)
So far, I've investigated the hooks responsible for image creation, and tracked the responsible function down; here's the last hook I found:
image_make_intermediate_size()
this is the function responsible for the actual resizing:
image_resize_dimensions().
There's even a line saying:
// if the resulting image would be the same size or larger we don't want to resize it
if ( $new_w >= $orig_w && $new_h >= $orig_h )
return false;
So how can I enable this "force resize" feature?
Here is the solution you are looking for, to be placed in your functions.php file:
function thumbnail_upscale( $default, $orig_w, $orig_h, $new_w, $new_h, $crop ){
if ( !$crop ) return null; // let the wordpress default function handle this
$aspect_ratio = $orig_w / $orig_h;
$size_ratio = max($new_w / $orig_w, $new_h / $orig_h);
$crop_w = round($new_w / $size_ratio);
$crop_h = round($new_h / $size_ratio);
$s_x = floor( ($orig_w - $crop_w) / 2 );
$s_y = floor( ($orig_h - $crop_h) / 2 );
return array( 0, 0, (int) $s_x, (int) $s_y, (int) $new_w, (int) $new_h, (int) $crop_w, (int) $crop_h );
}
add_filter( 'image_resize_dimensions', 'thumbnail_upscale', 10, 6 );
This is found here:
https://wordpress.stackexchange.com/questions/50649/how-to-scale-up-featured-post-thumbnail
It will upscale images and generate thumbnails for all image sizes. The only downfall, which probably isn't a downfall, is that no matter what you'll get a separate file for each image size for all uploaded images... even if it's a small icon or something. Hope this helps.
While still not optimal, wouldn't it be better to use a serverside library like Timthumb and then provide the original source and use the 'q' (= quality) parameter?
That would optimize the image, with the original size.
Might be some caveats, but really - anything is better than modifying the core.
If disk space is not the issue but just download speed as in my case...
The issue I was facing was the the client was not paying attention to size or dimension for the feature image uploads. The theme is a responsive theme and works well with the range of image heights and scaling to the desired image width in the page. So it was possible to upload very large files and not notice the size if sitting on a high speed network.
I added custom image sizes, used a plugin to force regeneration and modified the theme to display the custom size instead.
I've had a similar problem: a client website should generate bigger thumbs. I've ended up building a plugin with a custom Image Editor, like this:
require_once ABSPATH . WPINC . '/class-wp-image-editor.php';
require_once ABSPATH . WPINC . '/class-wp-image-editor-gd.php';
function im_add_image_editor($implementations) {
array_unshift($implementations, 'IM_Image_Editor_GD');
return $implementations;
}
add_filter('wp_image_editors', 'im_add_image_editor');
The IM_Image_Editor_GD extends WP_Image_Editor_GD, changes the _resize function (who calls image_resize_dimensions) to call an internal version of it, like this:
class IM_Image_Editor_GD extends WP_Image_Editor_GD {
public function __destruct() {
parent::__destruct();
}
protected function _resize( $max_w, $max_h, $crop = false ) {
$dims = $this->image_resize_dimensions( $this->size['width'], $this->size['height'], $max_w, $max_h, $crop );
if ( ! $dims ) {
return new WP_Error( 'error_getting_dimensions', __('Could not calculate resized image dimensions'), $this->file );
}
list( $dst_x, $dst_y, $src_x, $src_y, $dst_w, $dst_h, $src_w, $src_h ) = $dims;
$resized = wp_imagecreatetruecolor( $dst_w, $dst_h );
imagecopyresampled( $resized, $this->image, $dst_x, $dst_y, $src_x, $src_y, $dst_w, $dst_h, $src_w, $src_h );
if ( is_resource( $resized ) ) {
$this->update_size( $dst_w, $dst_h );
return $resized;
}
return new WP_Error( 'image_resize_error', __('Image resize failed.'), $this->file );
}
protected function image_resize_dimensions($orig_w, $orig_h, $dest_w, $dest_h, $crop = false) {
// Copied original image_resize_dimensions and changed the test
}
}
Hope this helps and sorry about my English!
You can manage with this plugin visit https://wordpress.org/plugins/simple-image-sizes/
Simple Image Sizes
This plugin allow create custom image sizes for your site. Override your theme sizes directly on the media option page. You can regenerate all the sizes you have just created and choose which one you wanted to regenerate. You can now get all the code to copy and paste to your function theme file. Now you can use the generated sizes directly into your posts and insert images at the right size ! Now you choose if you want display the size in the post insert image. Now you can regenerate the images one by one in the 'Medias' general pane. Now you can regenerate the images by bulk action in the 'Medias' general pane. Now you can regenerate the image sizes on single attachment edit page.
The default image sizes of WordPress are "thumbnail", "medium", "large" and "full" (the size of the image you uploaded). These image sizes can be configured in the WordPress Administration Media panel under Settings > Media. This is how you can use these default sizes with the_post_thumbnail():
the_post_thumbnail(); // without parameter -> 'post-thumbnail'
the_post_thumbnail('thumbnail'); // Thumbnail (default 150px x 150px max)
the_post_thumbnail('medium'); // Medium resolution (default 300px x 300px max)
the_post_thumbnail('large'); // Large resolution (default 640px x 640px max)
the_post_thumbnail('full'); // Full resolution (original size uploaded)
the_post_thumbnail( array(100,100) ); // Other resolutions
see also full documentation in http://codex.wordpress.org/Function_Reference/the_post_thumbnail
Nevermind, I changed the core. Hurts me on the inside, but for this projects it's the best solution.