I'm making a blog, that has specific html5 structure for img:
<figure>
<img />
<figcaption></figcaption>
</figure>
Is there a way to customize, how the_content() handles img rendering, adding my own template for img specificly (plus adding the_post_thumbnail_caption() template)?
Or is there a way to make your own template for WYSIWYG. I'm asking because i'd like to allow user, to apply one out of three possible img displays, that are bound to specific class of figure element (for example )
Thanks in advance
You could use get_the_content() and then use preg_match to look for the img tag and replace with your own code see how to replace img that with preg_match here https://stackoverflow.com/a/1107203/1287608
and the get_the_content() function here http://codex.wordpress.org/Function_Reference/get_the_content
Related
Optimization in terms of page speed and page size.
First method is showing the image as a background of a div instead of in an img tag:
<div style="background:url("image-url.jpeg") no-repeat;background-size:cover;max-width:350px;max-height:350px;display:block;width:100%;height:100%;"></div>
Second is the normal img tag way:
<img src="image-url.jpeg" width=350 height=350 alt="" />
Or anyone has a better way to display image.
Thank you.
*Disregarding SEO benefits
An answer here : https://buildawesomewebsites.com/html-img-vs-css-background-image/
Imo, I'll go with the img tag, but I'll improve your code : If you want to improve perfs, you could use 'srcset' attributes with your img tag : https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images and load smaller images for smaller devices.
In addition, you can use lazy load with img tag easily
In my website using PHP and Laravel, I'm using the method Html::linkAction to route various requests given. The linkAction then is converted to an <a> element. Suppose I want to add more html tags inside that <a> content, how to do this? Or, is there a way to do this using this method?
I tried just {{ Html::linkAction('Controller#method', '<img src=..>'}} but then it shows literally the whole string <img src=..> instead of the actual image. Thanks in advance.
You can use URL::action() instead:
<img src=..>
See this link.
I have a Wordpress site which displays the post's content using
<?php the_content(); ?>
there are images and text in the content which all get outputted in < p > tags
I want to style the margins/padding of the images and text differently. I can target the images but when I apply styles to the text, they affect the images as well.
The only options I can think of are using - margins (but that will cause problems later) and putting all text in block quotes but that will remove that functionality for future use.
can i 'pull out' the images and/or text out of the_content and display them another way?
HTML - currently
<div class="row">
<?php the_content(); ?>
</div><!-- /row -->
You can do it in several ways:
My prefered one is the follow:
Let's say that you have a div with a css class (i.e.: content wrapper)
So it will look like this:
<div class="contentWrapper">
My amazing conent <img src="amazing.jpg"/> <p>testing paragraph</p>
</div>
So in this example you can use simple css selectors to make any change that you want for the elements under contentWrapper i.e.:
.contentWrapper img, .contentWrapper p{
margin-right: 5px;
}
Another - but much dirtier way is using regex to replace some tags.
It's not a good practice at all, so I don't thing there is a point of an example.
Good luck!
Basically two sane ways to go about this:
Modify the existing CSS and tune it to target both the elements and the classes more precisely. That's the easier way.
Capture the output of the_content(); into a variable and then use preg_replace() etc. to modify the content. Or use a proper DOM parser in PHP to do the same. More work here.
(Use Javascript to modify the DOM after it's loaded. Less elegant approach.)
Use preg_replace to pull the images, remove the <p> tags and replace them with something else.
function filter_content_images($content) {
return preg_replace('/<p>\\s*?(<a .*?><img.*?><\\/a>|<img.*?>)?\\s*<\\/p>/s', '<div class="content-image">\1</div>', $content);
}
add_filter('the_content', 'filter_content_images');
This will remove them and replace with which you can then mini
I'm currently using a system for my portfolio where i add three images per project, which schould be inside an ul.
This works fine, but i need those img tags to be wrapped within li tags, and i have no clue how i should do this.
Take this:
<img src="img1.jpg"/>
<img src="img2.jpg"/>
<img src="img3.jpg"/>
Make this:
<li><img src="img1.jpg"/></li>
<li><img src="img2.jpg"/></li>
<li><img src="img3.jpg"/></li>
Thanks in advance!
Edit:
Sorry, here's more info for you guys:
I'm using Wordpress 3 as cms with custom post types.
The output is done via wp's "the_content()", where i put my images.
I know i could use wp's html editor to wrap li tags around manually,
the problem is that i wont be maintaining the site, so i want to make it easer for my coworkers.
This is why its outputting the img tags in a row, and i need to wrap those li tags around them.
I've read something about "preg_replace", but i cant seem to get it working.
EDIT:
I've found the solution, sometimes the easiest way is the best:
$thecontent = get_the_content();
$thecontent_format = '<li>'.str_replace(array("\r","\n\n","\n"),array('',"\n","</li>\n<li>"),trim($thecontent,"\n\r")).'</li>';
wraps every img element with a li, and then
echo $thecontent_format;
Anyways, thanks for you participation!
I don't want to sound stupid or anything but if your trying to do this with PHP I am assuming that PHP is also creating the img tags for display.... in that case all you have to do is:
echo "<li>";
image tag generating code goes here
and than close it off with:
echo "</li>";
do this for every image tag that being created...
Is that what you were asking?
I want to use phpThumb to resize all images in the content divs of my pages when they are served up to mobile devices.
So in my page templates for mobile devices I need to change all <img> tags in <div id="content> in the following manner:
<img src="/images/image_01.jpg">
-> <a href="/images/image_01.gif">
<img src="phpThumb.php?src=images/image_01.jpg&w=300">
</a>
<img src="/images/image_02.gif">
-> <a href="/images/image_02.gif">
<img src="phpThumb.php?src=images/image_02.gif&w=300">
</a>
What is the best way to do this?
Use str_replace to replace the old img tags to new ones. Alternatively, you can use preg_replace too if you are comfortable with regular expressions.
Since these are template pages specific to mobile devices I would suggest applying this to the actual template file instead of running some PHP code to transform it each time a mobile device requests a page. Most editors have Search & Replace functionality. And some support Regexes. Utilize this to replace all /src="([^"]+)"/ with src="phpThumb.php?src=$1&w=300".
Regular expressions are perfectly fine for that purpose. But you can also use "server-side jQuery" with http://querypath.org/ to transform it like this:
$html = qp($html);
foreach ($html->find("img") as $img) {
$src = $img->attr("src");
$img->attr("src", "new.php..."); // redirect to thumbNail
$img->replaceWith("<a href='$src'>" . $img->html() . "</a>");
}
print $html->writeHTML();