I am working on wordpress(3.5.2) project but getting one issue in case of image resizing. In wordpress when i upload any image its auto resizing to thumbnail,medium and larger but the name of image taking like image-300x300.jpg but i want, for thumbnail it should be imagename-thmbnail.jpg, for medium imagename-medium.jpg and for large imagename-large.jpg
I have made changes in Setting/Media - image re-size but it not coming consistence image name .
I do appreciate for advance help.
If I follow you correctly Neil,
You are wanting the image files created in the WordPress upload/sizing routine to be named as follows:
[imgname]-thmbnail.jpg,
[imgname]-medium.jpg,
[imgname]-large.jpg.
To the best of my knowledge this is not an option. If you can provide more detail on why you want to do this I may be able to help more.
You can declare custom image sizes in your functions.php file like so:
`add_image_size( 'thmbnail', 80, 80, true );`
and then use it in your theme:
`the_post_thumbnail('thmbnail');`.
Just be aware WordPress uses the following natively: thumb, thumbnail, medium, large, post-thumbnail.
Related
Trouble with a blurred thumbnail at my website project
Greetings.
Ladies And Gentleman
I ask some question about this picture I've sent, what I want to ask about is how to make
this picture's blurred thumbnail turned into High-Definition.
enter image description here
already try to turn off lazy loading with this code but loading="lazy"
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
Website using Wordpress
this is the link https://cloudteamize.com/test-porto/
Increase the size of the thumbnail on the Wordpress settings "Settings > Media" I suggest you put it at least 650px.
You will always see it blurry because is a flexible container and often stretch larger than the actual image size (It varies on viewport size or screen resolution).
pd: You will need to regenerate the thumbnails after or reupload the image and use the latest version. When you change those settings old images don't create the new thumbnail versions automatically.
THE SOLUTION IS FOUNDED:
the problem is the image link that my plugin using called: Portofolio Carousel is adding 350x181.png at the end of the link, I think that make my image use the lower quality.
example:
the original file is -> mmd.png
but in that plugin -> mmd-350x181.png
i take the values of my src then remove the 350x150.png to only .png using my massy javascript like this:
$ = jQuery;
$(document).ready(function() {
const imgs=document.querySelectorAll('#portofolio img');
imgs.forEach(img => console.log(img.removeAttribute('srcset'), img.removeAttribute('loading'),img.src=img.src.replace("-350x181","")));
});
some how if I not doing my code inside console.log, the code didn't run. I think that is really weird, but some how when I try to put that in console.log, it just works so if you can give me suggestions or make this code clearer, that's will be great.
I am looking to re-design the Login page. I need to add a new background image. Let me know where should I be copying this image into the project and where should I be specifying the image reference. I see the change made directly into Login.html are not reflecting in the output.
There are two logos in Maximo Anywhere, ibmLogoDark.png and ibmLogoLight.png (for the light and dark backgounds). You will need to obtain suitable replacement (transparent backgound) logo gifs or png files from your customer, of an equivalent size.
The IBM logo image files are in:
\MaximoAnywhere\apps\WorkExecution\common\js\platform\ui\control\images\mdpi
and also in:
\MaximoAnywhere\apps\WorkExecution\common\idx\mobile\themes\common\idx\images
So that is where I put copies of my customers replacement logos.
You'll want to give them different names from the IBM logos just so they don't get overwritten so easily. There are 4 CSS files you need to update to the new name:
about.css, launch.css and login.css in:
\MaximoAnywhere\apps\WorkExecution\common\idx\mobile\themes\common\idx
and mdpi.css in
\MaximoAnywhere\apps\WorkExecution\common\js\platform\ui\control\css
There are also two app.xml files you need to update to point to the new names. One in each of:
\MaximoAnywhere\apps\WorkExecution\platform-artifacts\dialog
and
\MaximoAnywhere\apps\WorkExecution\platform-artifacts\login
Then rebuild and you're done. Oh, and make sure you clear your browser cache (or use incognito mode) to test.
On the catalog/category page I would like images change when hover. Like clubmonaco.com I know how to do it on html/css but no idea on magento. Any help?
You could modify files in this directory:
app/design/frontend/base/default/template/catalog/product
for example (list/ and list.phtml)
or your template for example:
app/design/frontend/default/yourtemplate/template/directory with product files
CSS files you can find in:
skin/frontend/
You should also think, where the second image is stored. You can use "CSS-Sprites" for this case - a single image file, that contains both photos. The disadvantage is, that you have to customize every page, where magento shows product images.
Alternatively you have to define exact orders. First image is the front view, second image is always the back view.
The programming part is not really difficult. Look at
app/design/frontend/base/default/template/catalog/product/list.phtml
for the Catalog view. Path can vary, if you have a custom template. In the Magento backend there is a feature to show up the real path (system->configuration->development tools).
You can write your Javascript directly into the list.phtml. Magento also writes JS-code directly in the .phtml files. Of course it's not very pretty, but Magento is so complex; if other people work with the shop system, it will be easier to find.
Keep in mind, that the list.phtml contains two layouts: Grid and List View. Just if you do a change and wonder, why you can't see a change in the frontend ;-)
I'm generating images through phpThumb on my Wordpress based website using Magic Fields 2 but I'm having problems posting those images to We Heart It and other websites since they don't recognize it as an image due to all the code appended.
Therefore I was wondering if there's a way to make phpThumb return the actual generated image thumbnail link instead of the original link with all the code appended like:
http://www.mywebsite.com/wp-content/themes/basetheme/phpThumb/phpThumb.php?src=http://www.mywebsite.com/wp-content/files_mf/1331856830IMG_0286.jpg&w=364&h=200&zc=1&q=95
Is there any way to achieve this?
http://ailoo.net/2008/07/wordpress-plugin-autothumb-phpthumb/ <-- I'm using this plugin for the same! :)
The solution to my problem is probably quite simple, but I can't find it.
I want a link under the images saying "view full size" that links to the original, full-sized picture. I've only find the $imagecache_path variable that prints the path to the node.
You should be able to theme the imagecache function and add a link the original there.
See:
http://api.lullabot.com/theme_imagecache
And:
http://api.drupal.org/api/function/theme_image/6