<div style="margin:0px auto ;width:490;height:288px; overflow:hidden;"> // But here read and hide watmark on "height".
<img style="width:490px;height:318" src="******"/> // Original image src, and size.
</div>
</div>
Me using wordpress, so i got uploaded images, and watemark on images at the bottom. I want to hide this 40px on botton.
Simple page: trollfesz.cc/fun/279887
I want to do same.
You can use the manual crop feature after uploading the image or if you want to bulk crop multiple images then use this plugin . I got the same problem hence resolved it with this plugin . link
Related
In functions.php i have,
function university_features() {
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
add_image_size('professorLandscape', 400, 260, true);
add_image_size('professorPortrait', 480, 650, true);
add_image_size('pageBanner', 1500, 350, true);
}
add_action('after_setup_theme', 'university_features');
In single-professor.php, I have:
<div class="one-third">
<?php the_post_thumbnail('professorPotrait'); ?>
</div>
But the image size doesn't change. But, if I put the default size of "thumbnail" or any of the others like this:
<div class="one-third">
<?php the_post_thumbnail('thumbnail'); ?>
</div>
it works. What could be the issue? I'm working on localhost.
I have checked your code and it seems everything is working perfectly. I think what you missed that after setting the new image sizes you did not regenerate those images. You can try to upload a new image and check; make sure you have uploaded a large size more than 480px X 650px for checking purpose, because WordPress will crop a image if you upload larger than that. For existing images which you have already uploaded in the admin panel you can use a third party plugin like "Regenerate Thumbnails", I have checked with this plugin, you can try this if you want. Hope it will work.
Try to edit the default image sizes in the admin panel
And instead of the post_thumbnail custom class added .
use the default ones and edit them in the wordpress admin panel
The default values for wordpress images are
Thumbnail size (150 x 150 pixels)
Medium size (maximum 300 x 300 pixels)
Large size (maximum 1024 x 1024 pixels)
Full size (the original size of the uploaded image)
According to https://enginescout.com.au/wordpress-image-sizes/
<div class="one-third">
<?php the_post_thumbnail('medium'); ?>
</div>
Go to your WordPress dashboard and log in.
Select Media in the Settings menu. Change the width and height dimensions in Media Settings to fit your needs.
Confirm your changes by clicking Save Changes.
Checkout this example by visual composer https://visualcomposer.com/blog/wordpress-image-sizes-guide/#changing-wordpress-default-image-sizes
Another possible solution would be
You can add a mask for the posts themselves so the image itself will be locked to a certain width and height of the mask for example 100vh and 100vw
Checkout the example in Material Design bootstrap5
you can apply the same thing by utilizing their styling in your theme or recreate another like it https://mdbootstrap.com/docs/standard/content-styles/masks/
Code example
<div class="bg-image">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="w-100" />
<div class="mask" style="background-color: rgba(0, 0, 0, 0.6)"></div>
</div>
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:
I found this piece of code on stackoverflow that would allow me to place a small image over a larger image (in my case a small lock to indicate the movie is unavailable)
<div style="position:relative;display:inline;">
<img src="_images/test.jpg" width="350" />
<div style="position:absolute;bottom:10px;right:10px;">
<img src="_images/lock.png" width="40">
</div>
</div><h3>Air</h3>
it all displays perfectly, but there is a split second where the AIR tag at the bottom displays first (and sometimes the lock image), before it all snaps into place properly. (The main image, the lock in the bottom corner of the image, then the h3 tagged Air at the bottom.)
Does anyone know the cause of this, and how one might fix it?
Thanks
One alternative is to place the src content in a data uri scheme. This will cause the images to load with the content. When you set src to a uri resource, the browser has to go out and get it. This causes the delay you see.
http://en.wikipedia.org/wiki/Data_URI_scheme
In the Carousel Slider at the Evolve Theme, there are a few sample pictures.
How can I change them into new pictures and add an href that an article opens by clicking on an image?
You upload a photo in the media library with the correct dimensions for the slider.
When you select to edit the image you get the full size version.
In Firefox I right click on the image and ask to copy "Image Location", in the Chrome browser "Copy image URL"
that gives me the url to the image in my clipboard something like
http://www.####.###/wp-content/uploads/2013/06/image.jpg
Then you go to the widgets
You have to add the "T4P Carousel Slider" to the Header1 area. If you don't The theme automatically loads its own custom widget for advertizing the theme. Once you add the widget you will get a code box that by default has their code in it.
You are going to replace that code with your own it is not to hard but it is certainly not a drag and drop option.
Once you drag the Carousel Slider to the Header you will see the code.
you will see 4 sections that look like this:
<img src='http://www.####.###/wp-content/themes/evolve/library/media/images/slide/slider_img_01.jpg' alt='' />
<div class='carousel-caption'>
<h4>Built-in Bootstrap Elements let you do amazing things with your website</h4>
You replace this part of the code with the url to the image from the library using cntl-v and ad a alt tag if you like
Before
http://www.####.###/wp-content/themes/evolve/library/media/images/slide/slider_img_01.jpg' alt='' />
After
http://wp.fofc.org/wp-content/uploads/2013/06/baby.jpg' alt='Baby' />
Next you can add a Caption to be over the top of the image
Before
Built-in Bootstrap Elements let you do amazing things with your website
After
This is a really cool image
down at the bottom of the code box you will see additional code.
This controls how may dots are in the rectangular window for navigation one line for each dot
So you want to have as many lines as you have images. If you only have 3 images take the line with data-to='4' completely out. or you can add another line at the bottom:
5
<div id='carousel-nav'>
<a href='#myCarousel' data-to='1' class='active'>1</a>
<a href='#myCarousel' data-to='2'>2</a>
<a href='#myCarousel' data-to='3'>3</a>
<a href='#myCarousel' data-to='4'>4</a>
-- add or remove lines above this line
</div>
This controls the navigation box in the lower center of the slider. However the dot does not seem to move as the slides change automatically. The dot only moves when you click on it.
If you prefer you can remove the entire div from the code and that will remove the navigation box.
Hope this helps.
each post in my website, contains a photo gallery. The gallery consists of thumbnail images which link to full-size images.
I have also placed a PinIt button in my posts. The problem is that it catches thumbnail images for pining.
Based on what I've found about this kind of issue, I ended up with the following code which should exclude thumbnails from pining, and include full-size images instead. None of these, is donw though...
<a href="path_to_full_image" rel="lightbox[single_post]" pi:pinit:media="path_to_full_image">
<img src="path_to_thumbnail" width="200" height="130" nopin="nopin" />
</a>
Any suggestions?
We can avoid showing an image in the pin action just by using nopin = "nopin" in the image attribute.
For eg.,
<img src="http://via.placeholder.com/350x150" nopin = "nopin" />
In order for the PinIt button to pick full-size images they should be loaded and visible on the page. Since they are not, it cannot grab them to the grid gallery. As a workaround I would suggest to have a custom logic that pre-loads full-sized images before triggering the PinIt button click event. Something like this:
$('a[rel="lightbox"]').each(function(){
image_src = $(this).attr('href');
$('<img/>').attr('src',image_src).appendTo('#imageContainer');
;
})
$('#pinItButton').trigger('click');
This way you will pre-load all the images and put them into imageContainer block and then trigger a click that will open Grid Gallery to pick an image.
Hope it helps.