Im working on a site's gallery which is made of a thumbnail block displaying all the pictures
and a section for displaying a specific image.
This is the code i use to display the thumbnail and the image in its real size.
<a class="thumb" name="tuzla1" href="http://hkdnapredak.com/root/images/stories/Tuzla2011.jpg" title="Tuzla">
<img height="75" width="75" src="http://hkdnapredak.com/root/images/stories/Tuzla2011.jpg" alt="Tuzla" />
</a>
The problem is: I can't think of anything to set the size of the opened image. Setting the thumbnail size is fine: height="75" width="75" but the size of the opened one is the problem.
Using this method, you can't set the size of the image you're linking to. It's going to open in the browsers with no HTML associated with it, so it will open at it's full size (or scaled to fit, depending on the browser).
The solution is to link to a page that contains the image. This lets you set code that determines the image size. However, this is a manual process - 500 images will require 500 custom pages. Not ideal.
If you get more sophisticated, you can build a script and pass it and image name, height and width, then dynamically build the page to display the image at the given height and width. Then you can display an arbitrary number of images with 1 script.
Another way to go is with a lightbox plugin which lets you pop the full sized image up into a box over top of the rest of the page. You've probably seen this method used on Facebook or other sites - it's popular and doesn't take that much effort to use. I like it because you don't have to leave the page you're on, and you can show lots of photos on a fairly compact page.
Related
Goal: When creating an image gallery in Wordpress 5.3.2 using the Gutenberg editor, I'd like to be able to select the image size.
Why: The block gallery automatically serves the large image and then relies on CSS to resize the image to fit the flexbox layout. Instead I'd like to choose the medium size for my site, which is closer in size to what's displayed in the layout. This will improve load times, as users aren't being served oversized images.
Question: Is there some code I can add to functions.php that will give me the option to choose the image size I want or to override the default large size for the medium size?
I understand what you're going for and unfortunately WordPress and Gutenberg still loads the full-size, original image (and just resizes it in css) :(
There are several closely-related issues that describe this
https://core.trac.wordpress.org/ticket/45407
https://github.com/WordPress/gutenberg/issues/9620
https://github.com/WordPress/gutenberg/issues/6177
Update, 2021:
Gutenberg no longer loads the full-size, original image and you can choose which in the block's right side panel which of the registered image sizes to load;
but that image is often still larger than necessary and not fully optimized; more information at https://gist.github.com/skorasaurus/a01249d4302226bf12c80dd979322303
I have uploaded an image into a wordpress website and when i enable open in lightbox the image actually shrinks to about a 200x200px square. the original file is much larger and im wondering if there is a way to enable the lightbox to display the larger image (or at least not shrink the image once it is opened in a lightbox)
Turns out the image link the lightbox was referencing had dimensions in the url, going to the media tab and taking the image location itself and pasting it in fixed the issue.
I am a back-end developer and I'd like to create a little website using angular and boostrap.
I would like to create a galerie, and I have been looking around to see how it's done. I found a correct example on the following link : https://blueimp.github.io/Bootstrap-Image-Gallery/
In that case, the images are taken from flickr api, which sends 2 different pictures (small and large). The small one is the thumbnail, and when you click on it, it opens the large one.
My question is the following one : let's say I have all my images of different sizes, and that I would like to have thumbnails of those (same size, but responsive !) to create my gallery, what would be the way to do that? With css only?
Create parent <div> with fix width then add img inside by applying width:100% on image and height:auto. Please try to implement the example you found and if you find any issues post with your code.
For my website we use custom style sheets that are stored locally on our server and are injected into the webpages. However when i add them to CKEditor and then attempt to resize or move an image with the enhanced image plugin they cannot be resized or moved at all. Has anyone encountered this problem before? Is there anyway around it?
edit: So i add my css files using
config.contentsCss = ['http://fonts.googleapis.com/css?family=Droid+Sans',
'http://fonts.googleapis.com/css?family=Bree+Serif',
'http://fonts.googleapis.com/css?family=Droid+Sans+Mono',
'http://192.168.0.50/css/new/all.css?v=1" media="all',
'http://192.168.0.50/css/new/templates.css?v=1',
'http://192.168.0.50/css/pre_review/colors.css?v=1',
'http://192.168.0.50/css/pre_review/paged_test.css?v=2',
'http://192.168.0.50/css/pre_review/bootstrap.min.css?v=1',
'http://192.168.0.50/css/pre_review/main.css?v=1',
'text/css'];
I have also installed the Enhanced Image plugin to allow me to resize and move images around. however when i insert an image on to the page the source looks like
<p><img alt="" height="239" src="http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png" width="239" /></p>
when i originally set the image width and height in the popup panel i set the values to 2 and 2, these values do nothing to edit the actual size of the image. It still displays at the full size of 239x 239.
I know that it is my added styles that are causing this error as it works fine without them, However i do need them. is there anyway around this without having to remove the styles?
First of all, your contentsCss has some weird parts like the last item or this 'http://192.168.0.50/css/new/all.css?v=1" media="all'. Please verify that all this works. Incorrect rules may affect CKEditor.
Second, the issue may be very simple - your CSS most likely affect widgets styling. Disable loading your CSS files one by one and see which one breaks the Enhanced Image plugin. Then find the rule that breaks it and then improve the rule so it does not affect images.
I am new to magento. I am using a theme 'rwd'. The product images get blurred when its listed on home page.
With Inspect element, I found that its natural image size is 85x85. But re-sized to 140x140. How do i set the image to 140x140 or any other procedure to be taken care for image resolutions?
Try this one :
Go to the file view.xml which you can find in code/Magento/Catalog/etc/.
Open the file and edit line 31 from :
<var name="product_small_image_sidebar_size">85</var>
to :
<var name="product_small_image_sidebar_size">140</var>
If you look inside the template file:
app\design\frontend\rwd\default\template\catalog\product\list.phtml
you will find around line 128 (Magento 1.9.1.x) the image size setting for the Grid View:
<?php $_imgSize = 85; ?>
just change the value to the one you need. After clearing Magento image cache you will find that the small images will be created at the resolution you set, thus not involving the poor browser resize.
In .phtml files there are many of these $_imgSize settings related to the different views, just do a text search for the string.
I think in your case is the uploaded image size is smaller and in default magento resizes product image to 140x140.So in this case the image tends to expand and hence it looks blurr.
One solution would be to upload an image with large size.
I think you should open the magento project with a good text editing software such as sublime text 2, and then do a research in the whole project (ctrl + alt + F), and look for the string '140'.
That way you may find the place where magendo defines the size to which magendo resizes your image.