Hello,
I would like to be able to insert a full width image inside a post.
here is the link
http://le-meilleur-du-golf.com/analyseur-de-swing-de-golf/
The image is the one just on top of the Youtube vidéo.
It’s size is 1500×553, and i have set it up to be full scale.
But it appears quite small inside my content.
Do you know why?
when you click on the image, it goes to the media, where you see the full size of the media.
here: http://i1.wp.com/le-meilleur-du-golf.com/wp-content/uploads/2015/04/golfnuls.jpg
I would like the image to appear that big, inside my post.
Do you know how i could do that?
many thanks,
Thierry
Hello Thierry
There is no way to use a full width image because the container of the post is not as big as your image. You can stretch it to the full width of the container though as big as the video under the image:
http://screencast.com/t/lTbsPaTaNCrQ – http://screencast.com/t/7l7Zjh9qT9Pi
The only way to use a full width image is to set it as a featured image and use post style 7 : http://screencast.com/t/Kf2v7slg7QO
I hope this helps.
Thank you
Thank you for your support;
is it possible to tweak the width of the container, to make it bigger maybe in the CSS? (maybe only for post style 7).
Below the featured image, i would like to add many images full width within the content…
please do you have a suggestion?
question aside: what is the plugin you are using for you social media buttons,on the image you shared (share on facebook, share on twitter)
many thanks
Thierry
Hello Bogdan,
I tried to pull on the side of the image to make it match with the size of the video player, but it doesn’t work (it work in the back office), but the maximum size displayed is the one currently on the page live, which is not enough for me
http://le-meilleur-du-golf.com/analyseur-de-swing-de-golf/
there must be a way to make the content width bigger for images inside the content? how is it that you can do it on your side and i can’t?
many thanks
Please make sure you select full size of the picture : http://screencast.com/t/WaKXpKsJU also where you insert media: http://screencast.com/t/qo7UkHy9
I have inspected your site and saw that the image is not set to full size:
mine: http://screencast.com/t/SLHvG2weQwUZ yours: http://screencast.com/t/oAOZpXeoplS
The sharing buttons on the top post are not from a plugin. The option comes with the theme: http://screencast.com/t/6mqWHJj00
In order to get an image full width you need to do some custom modification.
It can be done with CSS. You have to place the image in a
Then you can use this custom CSS to display it full size:
@media(min-width: 1141px) {
.td-post-content .full-image {
left: -20%;
position: relative;
transform: translateX (30%);
}
.full-image img {
max-width: none !important;
}
}
result: http://screencast.com/t/kzuD7LqF
If it needs a bit of adjusting, change the values in the code.
You will have to do this to every image you want to be displayed full. Add it in the container and give it the ‘full-image’ class
Thank you!
Hello Bogdan,
thank you so very much for this solution, i believe i am very close now, with this custom CSS.
but still, this is not working as intended.
I have applied the custom CSS in my theme, and i have placed the image in a container, as you indicated.
you can see the result here:
http://le-meilleur-du-golf.com/analyseur-de-swing-de-golf/
there must be some kind of code somewhere blocking the size max of any media. Because, even putting the image full size doesn’t work properly.
do you have any idea?
many thankS,
Thierry
Hi,
Please disable all your plugins. Leave just visual composer active because it is required by the theme. Try to remove the image and add it again in full size.
If the problem is still there, send us an email with your login info at contact@tagdiv.com so we can take a look and see what is going on. Also paste in a link to this topic so we know who you are.
Thank you!
Hello Bogdan,
This is sick! i absolutley love it! i can tell you this has been something really important to me.
http://le-meilleur-du-golf.com/analyseur-de-swing-de-golf/
desactivating and reactivating the plugins worked like a charm indeed, i didn’t know that trick.
This is perfect for my articles (the ones without sidebars), i tried to replicate for my pages.
here is what i get
http://le-meilleur-du-golf.com/materiel-de-golf/couvre-bois-golf/
if i use the same custom CSS, and try to tweak it, it doesn’t do anything.
@media(min-width: 1141px) {
.td-post-content .full-image {
left: -20%;
position: relative;
transform: translateX (30%);
}
.full-image img {
max-width: none !important;
}
}
should i create another custom CSS , for my pages?
again, thank you very much for your great support
Thierry
Hi Thierry,
As you can see in the code, the first class applied is ‘td-post-content’. So this means the code is meant for posts. For pages a new code is required:
@media(min-width: 1141px) {
.td-page-wrap .full-image {
left: -37%;
position: relative;
transform: translateX (20%);
}
.full-image img {
max-width: none !important;
}
}Just add it below the first code
This time i set the left propriety to a 37%. This worked on my end, but if for some reason it will not be positioned well on your end, simply change the percentage to see which one fits best.
result: http://screencast.com/t/Ev78JN296
Thank you!
Hello Bogdan,
Thank YOU very much, now i feel i can take my website to a new level of UX;
Last question if you allow me,
http://le-meilleur-du-golf.com/analyseur-de-swing-de-golf/
How can i add white text on top of that full size image, as an overlay? Is it a simple technique with a custom URL and a container? or a nice shortcode or plugin? What is your idea?
many thanks,
Thierry
Hello Thierry,
In order to place a title above the photo, you need to create a spanclass image-header element and h2 element inside the divcontaining the image like so:
http://screencast.com/t/9bU4XkbfTp
Then use this custom css. I added the whole bunch in here so replace what you have in the theme panel with this one
Here is the whole bunch:
.full-image{position:relative!important;}
@media(min-width: 1141px) {
.td-page-wrap .full-image {
left: -37%;
position: relative;
transform: translateX (20%);}
.full-image img {
max-width: none !important;}}
@media(min-width: 1141px) {
.td-post-content .full-image {
left: -20%;
position: relative;
transform: translateX (30%);}
.full-image img {
max-width: none !important;}}
.image-header h2{
color:white;
position: absolute;
bottom: 80px;
left: 200px;}
You can edit the title position here at the bottom of the code. There are 2 parameters: left and bottom. Change these values to re-position your title.
result: http://screencast.com/t/J391Xx48aPH
Thanks
Hello Bogdan,
thank you very much for your support, this is outstanding. I have implemented and it works.
Does the title have to be h2? Is it in order for the text to be big enough?
This will alter referencing on some occasions.
Could it be parapgraph, or H6, if we are able to customize the size at the case by case?
many thanks,
Thierry
Hello Thierry,
I just set it to a H2 as an example. You can have a paragraph or H6 or anything you want there.
You can then change the font size with CSS.
Thanks.
Hi Bogdan,
Thanks a lot for your GREAT support, much appreciated.
Have a good day,
cheers,
Thierry
