I am trying to use a gallery to display 3 Images in a grid in the same line and same size and want the images to link to other sites when clicked.
I am using the "WP Gallery Custom Links" addon and Juno as my theme.
My problem is, that the gallery doesn't change the sizes of the images.
In fact the gallery ignores any kind of shortcode other than the images that it should display. I tried deactivating all plugins and using the standard-theme, as well as resizing the thumbnail images and even the images themself.
The following call is used:
[gallery size="150x150" columns="3" ids="1264,1257,1280"]
So i even changed the local files to have 150x150 size and the gallery is now scaling them up to 596x189 px.
<img src="..." style="width: 596px; height: 189px;" alt="">
I also changed the options for the standart sizes in the media-options to 150x150 in all sizes.
Also the pictures are not displayed in one line, but instead two in the top and one in another row, even thougth i am using 3 columns.
So if someone can help me, i probably just dont see something, but i dont know what it is.
OK i found the error, i added
.gallery figure.gallery-item {
display: inline-table;
padding: 3px;
width: 300px;
}
to the custom-css, seems the width in the gallery-item, that was wrapping the images did scale them down.
If someone knows where i can change this parameter in the options, or if there is a way to do so without the custom clause then please answer in a comment.
See size attribute docs. Instead of specifying exact dimensions, specify a named size in WordPress core, or a named size that is added by your theme or other plugins.
size specify the image size to use for the thumbnail display. Valid
values include "thumbnail", "medium", "large", "full" and any other
additional image size that was registered with add_image_size(). The
default value is "thumbnail". The size of the images for "thumbnail",
"medium" and "large" can be configured in WordPress admin panel under
Settings > Media. For example, to display a gallery of medium sized
images:
Related
I met a problem when trying to change the media setting. The first pic wass about Media Setting and how big a large/medium/thumbnail image is. I tried to make large for 960px.
The second picture was what I saw when trying to resize image in editing page. But I couldn't see the 960px option.
I'd tried some sizes smaller than 640px in Media Setting. It worked. And if for some larger than 640px, like 641px and 960px, it showed only 640px. It seemed not to be able to reach 960px that large.
So, why can't I use 960px?
I used a blank theme to make styles from the ground. And so far, I've not changed any function for image setting at all.
Most themes (esp. themes from wordpress) have a specific width limit (measured in pixels) for images inserted in a post or a page. Obviously, that limit depends on the theme’s main column width (which varies greatly from theme to theme).
/wp-includes/media.php has:
// we're inserting a full size image into the editor. if it's a really big image we'll scale it down to fit reasonably
// within the editor itself, and within the theme's content width if it's known. the user can resize it in the editor
// if they wish.
if ( !empty($GLOBALS['content_width']) ) {
$max_width = $GLOBALS['content_width'];
}
else
<strong>$max_width = 500;</strong>
Try overriding with $GLOBALS['content_width'] = 960; in the theme's function.php
As #Debajyoti Das explains, there is a set content width for most themes.
Either find the width in your theme and amend (search the files for 640) or if you have a child theme then add the following code in your functions.php which will usually override the themes width settings.
For instance this works with the Understrap framework:
// set theme width
global $content_width;
$content_width = 1024;
http://cameleonjackets.com/product-category/fall-2014/
The models heads are being cut off. How can I align the photo to the top? I've tried adjusting the photo sizes and the columns, but I want to keep the layout and product images as is. Is there a way to do this with CSS? Thanks!
The issue isn't with CSS. It's with the fact that your CMS is cropping the images, and doing so from the center of your images.
First you need to disable cropping on your generated thumbnails. Settings in wordpress will be found at
Dashboard > settings > media
and (depending on your installation of woocommerce)
Dashboard > Woocommerce > Settings > Product > Product Image Sizes
You will also need to disable cropping anywhere in your themes code that could be causing problems. Look for functions that look the similar to
add_image_size( $name, $width, $height, $crop );
Where $crop would be a true false statement that we want to be false.
Then you will need to have your thumbnails regenerated.
You can use this plugin to do that.
Then you can use css to set the size of whatever wraps your images as well as set overflow:hidden and then set the image styles min-width and min-height to 100%. That way if you upload different sized images it still appears to be properly cropped.
I want to remove FlexSlider from my WordPress WooTheme (Astrum) since it looks terrible. It makes our images full-size, so our images look silly.
I would prefer to have a thumbnail gallery where you can click on an image and it becomes 400px x 400px or something more standard; can anyone help me with removing flexslider and replacing with a gallery?
http://dv8sports.inpresence.us/product/bag-1/ for example
Flex slider is responsive. That means if you wrap slider inside some container it will stretch.
I would try to wrap the slider inside some other container which defines the preferred width. Your theme supports column shortcodes - use that.
According to their documentation, you can do something like:
[column width="one-third" place="first" ][/column]
[column width="one-third" place="first" ] Slider shortcode here [/column]
[column width="one-third" place="last" ][/column]
Another point: You submitted link to a product page and that page expects to contain product description and other stuff / not just a single image. Once you build the product page properly (add content) your image size will shrink according to surrounding content.
Hopefully this helps.
I am having a bit of trouble with an unfamiliar wordpress theme. My featured images are all 870 x 550 and yet when i put them in they are resized to 870 x 490, with an ugly crop. I have found a couple of CSS entries with a value of 490px so I changed them to 550px (see code snippet).
div.featured-media-container {width:870px; height:550px;}
div.featured-media-container img {width:870px; height:550px;}
This has made the container the right size, and resized my image to fill it, but the crop still remains so the image is stretched. How do I stop them being cropped when I drop them in?
Thanks.
Oh, here's the page in question: http://www.decentdesign.co.uk/portfolio/east-wing-coffee/
You Just DO one thing from your wp admin panel
go to settings > Media
and change the size according to your nedd. For reference take a look of below attached image
that's it Very Simple
Is it possible to , in Drupal 6 using Views, to specify that an image should be shown only if it belongs to the page? I want to make a header image that's different for every page, so each page should show only the image that belongs to it, and none of the image that belong to other page. Or can I do this without Views? I've used ImageField to add the field for the image, but I want it to display in the header, not the content with the node stuff.
Maybe I misunderstand, but I wouldn't use Views for this. Am I correct that what you want is to display a given image in the header of a given page ? I can see two options :
1) If you page basically display one node, and If you add the image using an imagefield, then you could use CSS to move it out of the content and into the header (using absolute positioning).
Something like :
div.field-field-<your field name> {
position: absolute;
top: 50px; /* Adjust to fit your theme */
left: 0px; /* Adjust to fit your theme */
}
You should make sure you've left enough space for the image at the location you want it. This CSS should go in your theme.
2) You could use a block for each of the images, set the block to display only on the page you want. Go to /admin/build/block/add to create a new block. Add the image under 'block body' - this will depend on your setup, but the general idea is to select an input format that allows images (That is the HTML img tag) and enter the HTML to point to that image, eg. <img src='/path/to/your/image' width='50px' height='50px' />
Then under 'Page specific visbility settings' select 'show on only the listed pages' and enter the path of the page you want this image on.
Save the block, then go to /admin/build/block/list and drag the newly created block in the section you want it to show (eg. header).
Option 2. means you don't have to know CSS/Drupal Themeing, and that the way the page is formated is independant of the node content (which you may or may not want). The downside is that you may end up with a lot of blocks which will make things a bit unwidly. A cleaner way to achieve the same way is to use the context module : http://drupal.org/project/context
There are yet other ways to achieve what you want (Drupal is very flexible), but I hope these are good starting points !