I am currently building a gallery using Divi Gallery Module where some images are horizontal and some are vertical.
The problem is that the theme automatically selects the thumbnail which is ok for horizontal ones, but the position of the thumbnail on vertical (portrait) images is not where I would like it to be.
For example, there is a portrait of a person and the thumbnail previews his chest whereas it would be more appropriate to show a persons shoulders and head.
Is there a way to adjust the thumbnail position and if so what is the easiest method?
I would suggest inspecting the element via your browser and finding the specific class that is placed on vertical images. Knowing the class should allow you to target the vertical images using CSS. You could add the CSS to style.css or via the Additional CSS area in under Appearance < Customizer (found in most themes).
Hope that helps!
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'm using a youtube embed plugin via wordpress to insert youtube videos. They work fine on some pages, but in of my widget areas the plugin adds an inline element of padding-top: 50% to the div with a class of 'fluid-width-video-wrapper', which shifts my video down 50% of the way, leaving a large gap. The div doesn't exist though when I use it on other areas of my site.
The div structure goes: epyt-gallery > widescreen flex-video when there is no issue, but on my widget area it goes:
epyt-gallery > fluid-width-video-wrapper > widescreen flex-video.
Is there something I did wrong with this area? Is there a way to remove the inline style or div from the widget area? I'm not sure how to go about it since the plugin seems to be adding it.
The widget area is currently using a shortcode inside of a 'text' widget.
The plugin is called YouTube by EmbedPlus Team.
On my site, the logo is up to search block when I try to view the site from tablets and phones, but from a PC it is OK. I included a photo to show you what I mean. Can anyone help me fix this?
As look from tablets and phones:
This is happening because your image width and height are predefined. This means that no matter what device you're on, the image will keep to the defined width/height.
You will need to make your image responsive.
You can do this by wrapping the image in a div that's got a defined width/height (perhaps a bootstrap grid column) and then apply Bootstrap's `.img-responsive' class on your image.
I'd provide a code example once you post your code & the position of where the image needs to be. (see comments on your main thread)
Try add .img-responsive class to the tag in your theme files.
Ok, I'm using a responsive WP Theme and just discovered my images are not responsive. I understand why but my limited CSS is hindering me big time.
All the images have fixed width and heights. I want all images to be responsive so can I not simply override all img tags with new CSS to make them responsive? Do I need a widget to do this?
I've been trying simple CSS entries like
I can directly affect the size of each image using something similar to above but no matter what combination of width, height, max-height and %'s I use the images stay a fixed size and distort the page when mobile.
Ok so i have to tell that i am not an expert in coding or stuff like that.
Here is the problem that i have found. I did a website for a friend of mine and i have noticed that on the homepage the incorporated slider would not show images in portrait but it would crop them in landscape. Is it possible to make the slider display the portrait images in portrait without cropping them?
This is the website and i am talking about the slider in the first page. www.saveriogenise.com
Thank you very much
it depends on the slider you are using, the slider you are using now is using a custom image size (550x335px), i think you can change the settings in the theme or slider admin, if not you have to edit the theme codes chose different size or re-size image keeping aspect ratio etc ...